InsaneJournal

Tweak says, "Britin"

upyr (

upyr) wrote in

rp_tutorials,
@ 2013-05-30 04:00:00

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>

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.

(Read comments)

InsaneJournal

Post a comment in response: