Tessisamess

S	M	T	W	T	F	S
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

Information

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Page Title</title>
	<link rel="shortcut icon" href="https://i.imgur.com/zn14SEI.png" type="image/ico" />
	<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

<style>

/*-- THE ROAD SO FAR - TESSISAMESS - 2018 --*/
/*-- Find more fun stuff at: tessisamess.insanejournal.com --*/

/* GENERAL */

body{margin:0;padding:0;background:#aaa url(https://i.imgur.com/XS8Dbvx.png)center fixed repeat;font-family:Open Sans,helvetica,arial,sans-serif;font-size:14px;color:#111;}

a{font-weight:bold;color:#000;text-decoration:none;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;}
a:hover{opacity:0.5;}

h1,h2,h3,h4,h5{text-transform:uppercase;margin:0;font-family:;}

/* PAGE CONTAINER */

#container{}

/* HEADER */

header{background:rgba(0,0,0,0.3) url(HEADERBG)center;background-size:cover;text-align:center;padding:60px 0;text-transform:uppercase;text-shadow:1px 1px 0 rgba(0,0,0,0.2);color:rgba(255,255,255,0.7);}

header h1{font-size:240%;}
header h1 a{color:#fff;}

header h2{font-size:180%;letter-spacing:4px;}

nav{font-size:9px;letter-spacing:2px;margin-top:10px;}
nav a{display:inline-block;padding:0 5px;margin:0 5px;color:#fff;}

/* WHOLE TIMELINE */

#timeline{position:relative;width:650px;margin:0 auto;text-align:justify;}

/* VERTICAL TRACK */

#timeline:after{content:'';position:absolute;width:6px;background:rgba(0,0,0,0.2);top:0;bottom:0;left:50%;margin-left:-3px;z-index:50;}

/* START & END TITLES */

.time-cap{margin:70px auto;text-align:center;height:25px;line-height:25px;width:160px;padding:5px;color:#fff;background:#666;border-radius:10px/20px;position:relative;z-index:100;font-size:10px;letter-spacing:2px;text-shadow:1px 1px 0 rgba(0,0,0,0.2);}

/* EACH EVENT */

.event{padding:10px 40px;position:relative;background:transparent;width:50%;}
.event-inner{padding:30px;background:#fff;line-height:160%;text-align:justify;box-shadow:1px 1px 2px 0 rgba(0,0,0,0.2);}
.event img{width:100%;}

/* EXTRA CLASS TO EXPAND LONG EVENTS */

.full .event-inner{max-height:250px;overflow:hidden;-webkit-transition:all 1.6s ease-in-out;-moz-transition:all 1.6s ease-in-out;-ms-transition:all 1.6s ease-in-out;-o-transition:all 1.6s ease-in-out;transition:all 1.6s ease-in-out;}
.full-bar{display:block;background:#fff url(https://i.imgur.com/flDnIDk.png)center no-repeat;background-size:auto 15px;text-align:center;opacity:1!important;position:absolute;left:70px;right:70px;bottom:10px;height:40px;z-index:200;border-top:1px solid rgba(0,0,0,0.2);}
.full .event-inner:target{max-height:9999px;}
.full .event-inner:target .full-bar{display:none;}

/* ALT EVENT FOR FULL WIDTH PHOTOS */

.alt .alt-content{background:#fff;box-shadow:1px 1px 2px 0 rgba(0,0,0,0.2);}
.alt .event-inner{box-shadow:none;}
.alt h4{margin:0;padding:0 20px 10px 20px;}
.alt h5{padding:20px 20px 0 20px;}

/* EACH EVENT TITLE & DATE */

#timeline h4{color:#666;font-size:22px;margin-bottom:10px;}
#timeline h5{color:#aaa;font-size:15px;}

/* EVENT ARROWS */

.event:before{content:'';height:0;position:absolute;top:22px;width:0;z-index:1;border:medium solid #fff;}
.event:nth-of-type(odd){left:-12.2%;}
.event:nth-of-type(odd):before{right:30px;border-width:10px 0 10px 10px;border-color:transparent transparent transparent #fff;}
.event:nth-of-type(even){left:50%;}
.event:nth-of-type(even):before{left:30px;border-width:10px 10px 10px 0;border-color:transparent #fff transparent transparent;}

/* EVENT TRACK MARKERS */

.event:after{content:'';position:absolute;width:22px;height:22px;background:#666;top:22px;border-radius:50%;z-index:60;-webkit-clip-path:polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);clip-path:polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);}
.event:nth-of-type(even):after{left:-10.5px;}
.event:nth-of-type(odd):after{right:-10.5px;}

/* CREDIT - LEAVE THIS */

#credit{position:fixed;right:-83px;width:102px;bottom:15px;background:#fff;border:1px solid rgba(0,0,0,0.1);padding:5px;box-shadow:1px 1px 3px 0 rgba(0,0,0,0.2);font-weight:normal;font-size:10px;letter-spacing:1px;line-height:16px;height:16px;}
#credit:hover{right:-1px;opacity:1;}
#credit span{font-size:16px;font-weight:bold;display:block;float:left;padding:0 5px;margin-right:1px;}

</style>

</head>

<body>

<header>
		<h1><a href="">GAME NAME</a></h1>
		<h2>EVENTS TIMELINE</h2>

<div class="time-cap">
			STARTING DATE
		</div>

<section class="event">
			<div class="event-inner">
				<h5>Month - Year</h5>
				<h4>Event title</h4>
				Event Info
			</div>
		</section>

<section class="event alt">
			<div class="alt-content">
				<h5>Month - Year</h5>
				<h4>Event title</h4>
				<img src="URL">
					<div class="event-inner">
					Event Info
					</div>
			</div>
		</section>

<div class="time-cap">
			PRESENT DAY
		</div>

</div>

</article>

</body>
</html>

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!

FONTS

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

IMAGES

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

COLORS

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!

Tags: codes: timeline, html page

Profile

Title Here

Navigation

July 2024

Links List

Resources

Tags

Layout By

The Road So Far: Multifunction Timeline