Previous | Next

The Road So Far: Multifunction Timeline



Hey guys, it's finally here! The first HTML page of the 2017 roundup! I'm so excited to finally get this timeline up, and I can't wait for the rest of the HTML pages that have been at high request that I'll be posting this month!

This timeline should be very easy to customize to match your game's layout (or whatever else you want to use it for, of course!) The easiest way to make this match your journal is to copy your layout's body background specs and font styling, as well as the page's h1 through h6 styling (or whichever headers your layout has styled; if it's one if mine it usually is very close to body and looks like h1,h2,h3,h4 so you'll want to add up to h5 to the list if it isn't already there.) After that, it's just a matter of matching some colors with Replace All and importing your game's journal header, if desired!

This timeline comes with two event types: Standard, which allows for linking of any aspect of the timeline contents and also supports images, and an alternate version if you want your image header to span the whole event's width without padding. Both of these vent types have the capability to use an optional class that hides and expands long content. Enjoy! ♥

The Coding

Installation Guide

Paste into a custom style (or off-site equivalent if you don't have a paid account) and fill in with your timeline events! (This is laid out pretty clearly so I'll leave off the replacement values this time around. Just make sure you get Page Title for your tab page title and the rest should explain itself!)

Expanding Sections

  • Add full to the event class of your timeline event; this will work on the standard and the alt version of events. When you've done this it should read as class="event full" or class="event alt full" depending on which type of event post you're expanding.

  • Add id="EVENTNAME" to your event's inner content. When you've done this it should read as class="event-inner" id="EVENTNAME" for either version.

  • At the end of your event-inner content (before the div closes) add <a class="full-bar" href="#EVENTNAME"></a>

  • You're done! You can do this to as many of the events as you want; just remember that EVENTNAME needs to be unique to each event.

Editing Guide

Paste the coding into Notepad or similar and bring up Replace All (usually Ctrl+H) to replace values quickly and easily!

Open Sans - Page font
font-family:; - Headers have been left blank for font, so add a font family here if you want an accent font

https://i.imgur.com/zn14SEI.png - Tab icon
https://i.imgur.com/XS8Dbvx.png - Page background
https://i.imgur.com/flDnIDk.png - Expanding footer background
HEADERBG - Optional header background

255,255,255 Header text (semi-transparent rgba value; change to 0,0,0 to reverse)
#fff Header title and links; start/end text; event background and arrow;
#aaa Timeline date
#666 Start/end title backgrounds; non-link timeline title; event marker (diamond)
#111 Page text
#000 Link color
0,0,0 Header background; text shadow in header and start/end titles; box shadow on each event; background of middle timeline track (semi-transparent rgba value; change to 255,255,255 to reverse)

Terms of Use

♡ Do not remove credit.
♡ Do not redistribute my codes in part or in whole (posting a copy for players to use in your game is fine with a link to original post.)
♡ If you break something during editing, please feel free to drop me a comment and I'll help as best I can!
♡ I love seeing edits! This isn't a rule, but if you have a cool edit of one of my codes I'd love to see it!


Feb. 13th, 2018 09:41 pm (UTC)
Feb. 13th, 2018 10:57 pm (UTC)
Holy WOW.
Feb. 14th, 2018 01:26 am (UTC)
Umm... This is AMAZING!!!
Feb. 19th, 2018 04:40 pm (UTC)
Hee, ty ty! I was SUPER excited to get this one up haha.
Feb. 19th, 2018 05:15 pm (UTC)
I can't wait to start playing with it!
Feb. 14th, 2018 02:47 am (UTC)
Yesssssss. How do you keep anticipating what I need.
Feb. 15th, 2018 08:42 am (UTC)
Still loving it, still loving it as I toy around with it for you. Its just so pretty.
Feb. 19th, 2018 04:41 pm (UTC)
Ooooh HELL YES ♥
Feb. 14th, 2018 01:19 pm (UTC)
This is beautiful!
Feb. 19th, 2018 04:41 pm (UTC)
Heee, ty!! ♥
Mar. 27th, 2018 02:08 pm (UTC)

Secondly: I'm scared I'm going to just break this XD

Thirdly: Is it chill to change the colours around and such or not?
Apr. 2nd, 2018 03:36 pm (UTC)
EEE ty ty!! ♥ (And I just had to use SPN for a timeline code—I had to!)

Of course, play around with the look and feel as much as you like! ♥ You can change anything as long as credit stays where it is (or is somewhere else visible on the page.) And, of course, if something does break while you're editing, feel free to let me know and I'll see what I can do!