Entry tags:

layouts: storyline

Storyline Table With Interest Bar
I wanted an easy way to point out which storylines I'm most interested in at the moment (and one that's easily edited as I fill lines or my interests change), so I came up with this. It's my first time sharing to rp_tutorials, so hopefully this goes well. ;)

Live Example

STEP ONE: Copy and paste the code. Make sure to check 'Disable Auto-Formatting' or things may get wonky.
STEP TWO: Replace the following:

• ICON/PICTURE with a url to the picture you want to use (the table is sized so that a standard 100x100 icon fits)
• STORYLINE TITLE/TAG LINE with something catchy
• CHARACTER NAME and FANDOM with, well, the character's name and fandom, if applicable
• Describe your storyline where all my jibber jabber is
• Edit the interest bar this way:

  To change the bar color, find background: #448D31 near the end of the code and replace that hex code with one of your choosing. The default is green. If you want to change the background color of the bar, edit the part a few lines before that, the one that says background: #FFFFFF.
  
  To change how much of the bar is filled, change both max-width: 50.00% and width: 50.00% to your preferred percentage.

STEP THREE: Repeat table for each storyline.

<center><table width="600" cellpadding="10" style="border:1px solid black;"> <colgroup> <col span="1" style="width: 17%;"> <col span="1" style="width: 68%;"> <col span="1" style="width: 15%;"> </colgroup> <tr><td><center><img src="ICON/PICTURE"></center></td><td style="text-align:left;vertical-align:top"><B><center>STORYLINE TITLE / TAG LINE</b><font size="-2"><BR>CHARACTER NAME © FANDOM</font></center><p style="text-align:justify;">Info about the storyline; what are you looking for, which character do you want to play against, what your preferred pairings are, and all that other good stuff.</p></td><td> <div style="margin: auto; text-align: center; width: 90%;"><div style="text-align: left; margin: 2px auto; font-size: 0px; line-height: 0px; border: solid 1px #000000; background: #FFFFFF; overflow: hidden; "><div style="font-size: 0px; line-height: 0px; height: 15px; min-width: 0%; max-width: 50.00%; width: 50.00%; background: #448D31; "><!----></div></div></div></td></tr></table></center>

The interest bar is modified from the Nanowrimo bar here.

Crediting me isn't totally, absolutely necessary, but I'd love comments. Especially if any of this could be improved upon. My HTML is admittedly rusty.