Tessisamess

Information

Hey guys! Sorry for the posting delay! This month I've got a larger project underway to post for you guys, and I'm really excited about it, but it's a secret so you'll just have to stay tuned until it's ready for version 0.0.1 to go live! Additionally, make sure your sanity extension is up to date; new updates went live about an hour ago. You can see the changelog here.

In the interim we have a new timeline code! This should be super easy to use and rearrange as needed, and comes with two options for adding images to your timeline events. Enjoy! ♥

Coding: Container and basic event

<lj-raw><div style="width:430px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:justify;line-height:1.6;font-size:13px;color:#333;font-family:tahoma,arial,sans-serif;"> <!---DATE---> <div style="font-size:9px;letter-spacing:4px;font-weight:bold;text-transform:uppercase;text-align:center;color:#000;margin:10px 0 0 0;"> Date </div> <!---TITLE---> <div style="font-family:century gothic,tahoma,arial,sans-serif;font-size:20px;letter-spacing:2px;text-transform:uppercase;text-align:center;color:#3B9BE0;"> Title </div> <!---EVENT---> <div style="width:100%;box-sizing:border-box;padding:15px;margin:10px 0;border:1px solid #ddd;"> Event_Info </div> <!---CONNECTOR---> <div style="height:100px;width:1px;background:#555;"></div> <a href="http://tessisamess.insanejournal.com/" style="margin:10px 0 0 0;font-size:8px;letter-spacing:3px;font-weight:bold;text-transform:uppercase;color:#bbb;text-decoration:none;">CODE BY</a></div></lj-raw>

Coding: Inset image event

[paste INSIDE the container provided above]
<!---DATE---> <div style="font-size:9px;letter-spacing:4px;font-weight:bold;text-transform:uppercase;text-align:center;margin:10px 0 0 0;"> Date </div> <!---TITLE---> <div style="font-family:century gothic,tahoma,arial,sans-serif;font-size:20px;letter-spacing:2px;text-transform:uppercase;text-align:center;color:#3B9BE0;"> Title </div> <!---EVENT---> <div style="width:100%;box-sizing:border-box;padding:15px;margin:10px 0;border:1px solid #ddd;"> <img src="URL" style="width:100%;margin:0 0 10px 0;"> Event_Info </div> <!---CONNECTOR---> <div style="height:100px;width:1px;background:#555;"></div>

Coding: Flush image event

[paste INSIDE the container provided above]
<!---DATE---> <div style="font-size:9px;letter-spacing:4px;font-weight:bold;text-transform:uppercase;text-align:center;margin:10px 0 0 0;"> Date </div> <!---TITLE---> <div style="font-family:century gothic,tahoma,arial,sans-serif;font-size:20px;letter-spacing:2px;text-transform:uppercase;text-align:center;color:#3B9BE0;"> Title </div> <!---EVENT---> <div style="width:100%;box-sizing:border-box;margin:10px 0;border:1px solid #ddd;"> <img src="URL" style="width:100%;"> <div style="padding:15px;"> Event_Info </div> </div> <!---CONNECTOR---> <div style="height:100px;width:1px;background:#555;"></div>

Editing Guide

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

FONTS

tahoma,arial,sans-serif - Bulk text
century gothic,tahoma,arial,sans-serif - Event titles

COLORS

#ddd

Event container borders

#555

Event connector

#3B9BE0

Event Title

#333

Event text

#000

Date text

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!