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!


( )Anonymous- this user has disabled anonymous posting.
( )OpenID
Don't have an account? Create one now.
No HTML allowed in subject
Notice! This user has turned on the option that logs your IP address when posting.