Tessisamess

Layouts, Codes, Tutorials, & Resources

Hey there, I'm Tess!

Welcome to my blog; I make lots of different layouts, codes, tutorials, and other resources for Insanejournal and Dreamwidth RPers! There's a lot to choose from and brand new content goes up every week!

Take a look around, and don't hesitate to ask for help if you need it!

Can't get enough resources? Why not subscribe to my Patreon for exclusive monthly content, or support the creation of more content by leaving a tip on Ko-Fi! ♡

Need an invite?

If you're unable to comment on my journal to ask for help now that anon has been turned off due to serious spam issues, don't worry! Just shoot me an email and I'll send you an invite code for Insanejournal. I've got plenty to spare!
×

Please Note:

I do not offer assistance with any sites other than IJ and DW unless it is for general HTML and CSS (ie. custom hosted pages and similar.) I cannot convert a code to a new site's rules because there are a lot of niche RP sites, and I have no way of knowing each one's limitations and caveats. Sorry about that!

Layout By

Powered by InsaneJournal

Hey there, I'm Tess!

Welcome to my blog; I make lots of different layouts, codes, tutorials, and other resources for Insanejournal and Dreamwidth RPers! There's a lot to choose from and brand new content goes up every week!

Take a look around, and don't hesitate to ask for help if you need it!

Can't get enough resources? Why not subscribe to my Patreon for exclusive monthly content, or support the creation of more content by leaving a tip on Ko-Fi! ♡

Need an invite?

If you're unable to comment on my journal to ask for help now that anon has been turned off due to serious spam issues, don't worry! Just shoot me an email and I'll send you an invite code for Insanejournal. I've got plenty to spare!
×

December 2018

S M T W T F S
      1
2345678
9101112131415
16171819202122
23242526272829
3031     

Please Note:

I do not offer assistance with any sites other than IJ and DW unless it is for general HTML and CSS (ie. custom hosted pages and similar.) I cannot convert a code to a new site's rules because there are a lot of niche RP sites, and I have no way of knowing each one's limitations and caveats. Sorry about that!

Layout By

Powered by InsaneJournal

The Road So Far: Multifunction Timeline


LIVE PREVIEW


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



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!

Comments

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