InsaneJournal

CAST of characters.

CODE BY WEARESTARDUST @ SUPERSUITS

Compact, simple cast list for mod journals and CDJs, left in neutral grays so you can color to match your own color scheme! If looking for colors, check out palettes of color combinations at Colour Lovers.

If you'd like to change the colors, find/replace the following:

#FFF #000 #444 #888 #AAA #CCC #DDD #EEE

TEMPLATE →
<lj-raw><center><div style="width: 785px; font-family:georgia; font-size: 60px; text-transform: lowercase; font-style:italic; letter-spacing: -5px; color: #AAA; text-align:right; margin-bottom: -13px;">CAST of characters.</div> <table style="width: 785px;font-family:arial; font-size: 11px; background:linear-gradient(to bottom, #DDD, #CCC); background: -webkit-linear-gradient(top, #DDD, #CCC); background:-moz-linear-gradient(top, #DDD, #CCC); padding: 10px; border: 1px solid #AAA; "><tr><td> <div style="margin-top: 20px; font-family:georgia; font-size: 50px; text-transform:uppercase; letter-spacing: -2px; color: #FFF; text-shadow: 1px 1px 7px #AAA; border-bottom: 2px solid #AAA; line-height: 40px; margin-bottom: 5px;">CATEGORY HEADING</div> <!--IF YOU NEED MORE SPACE IN THE BOX, ADJUST THE HEIGHT OF 120PX IN INCREMENTS OF 10--!> <div style="overflow:hidden"> <div style="float:left; display:inline-block; box-shadow: 1px 1px 7px #AAA; width: 100px; height: 120px; background-color: #EEE; padding: 10px; border: 1px solid #AAA; margin: 2px;"> <img src="USERPIC" style="width: 97px; height: 97px;border: 1px solid #AAA;"> <div style="width:116px; text-align: center; color: #FFF; background-color: #AAA; padding: 2px; margin-top: -30px; margin-left: -10px; position:relative; ">CHARACTER NAME</div> <div style="margin-top: 10px;">more information<br> <a href="http://USERNAME.insanejournal.com" style="text-decoration:none; color: #444">~journal</a></div> </div> <div style="float:left; display:inline-block; box-shadow: 1px 1px 7px #AAA; width: 100px; height: 120px; background-color: #EEE; padding: 10px; border: 1px solid #AAA; margin: 2px;"> <img src="USERPIC" style="width: 97px; height: 97px;border: 1px solid #AAA;"> <div style="width:116px; text-align: center; color: #FFF; background-color: #AAA; padding: 2px; margin-top: -30px; margin-left: -10px; position:relative; ">CHARACTER NAME</div> <div style="margin-top: 10px;">more information<br> <a href="http://USERNAME.insanejournal.com" style="text-decoration:none; color: #444">~journal</a></div> </div> <div style="float:left; display:inline-block; box-shadow: 1px 1px 7px #AAA; width: 100px; height: 120px; background-color: #EEE; padding: 10px; border: 1px solid #AAA; margin: 2px;"> <img src="USERPIC" style="width: 97px; height: 97px;border: 1px solid #AAA;"> <div style="width:116px; text-align: center; color: #FFF; background-color: #AAA; padding: 2px; margin-top: -30px; margin-left: -10px; position:relative; ">CHARACTER NAME</div> <div style="margin-top: 10px;">more information<br> <a href="http://USERNAME.insanejournal.com" style="text-decoration:none; color: #444">~journal</a></div> </div> <div style="float:left; display:inline-block; box-shadow: 1px 1px 7px #AAA; width: 100px; height: 120px; background-color: #EEE; padding: 10px; border: 1px solid #AAA; margin: 2px;"> <img src="USERPIC" style="width: 97px; height: 97px;border: 1px solid #AAA;"> <div style="width:116px; text-align: center; color: #FFF; background-color: #AAA; padding: 2px; margin-top: -30px; margin-left: -10px; position:relative; ">CHARACTER NAME</div> <div style="margin-top: 10px;">more information<br> <a href="http://USERNAME.insanejournal.com" style="text-decoration:none; color: #444">~journal</a></div> </div> <div style="float:left; display:inline-block; box-shadow: 1px 1px 7px #AAA; width: 100px; height: 120px; background-color: #EEE; padding: 10px; border: 1px solid #AAA; margin: 2px;"> <img src="USERPIC" style="width: 97px; height: 97px;border: 1px solid #AAA;"> <div style="width:116px; text-align: center; color: #FFF; background-color: #AAA; padding: 2px; margin-top: -30px; margin-left: -10px; position:relative; ">CHARACTER NAME</div> <div style="margin-top: 10px;">more information<br> <a href="http://USERNAME.insanejournal.com" style="text-decoration:none; color: #444">~journal</a></div> </div> <div style="float:left; display:inline-block; box-shadow: 1px 1px 7px #AAA; width: 100px; height: 120px; background-color: #EEE; padding: 10px; border: 1px solid #AAA; margin: 2px;"> <img src="USERPIC" style="width: 97px; height: 97px;border: 1px solid #AAA;"> <div style="width:116px; text-align: center; color: #FFF; background-color: #AAA; padding: 2px; margin-top: -30px; margin-left: -10px; position:relative; ">CHARACTER NAME</div> <div style="margin-top: 10px;">more information<br> <a href="http://USERNAME.insanejournal.com" style="text-decoration:none; color: #444">~journal</a></div> </div> <!--INSERT NEW CHARACTERS HERE. When adding new characters to any category, make sure they stay within the 'div style="overflow:hidden"' tag (the closer for that div is directly below this note) - this just wraps up all of the character boxes so that the next category header isn't influenced by their positioning (float, display)--!> </div> <div style="margin-top: 20px; font-family:georgia; font-size: 50px; text-transform:uppercase; letter-spacing: -2px; color: #FFF; text-shadow: 1px 1px 7px #AAA; border-bottom: 2px solid #AAA; line-height: 40px; margin-bottom: 5px;">CATEGORY HEADING</div> <!--IF YOU NEED MORE SPACE IN THE BOX, ADJUST THE HEIGHT OF 120PX IN INCREMENTS OF 10--!> <div style="overflow:hidden"> <div style="float:left; display:inline-block; box-shadow: 1px 1px 7px #AAA; width: 100px; height: 120px; background-color: #EEE; padding: 10px; border: 1px solid #AAA; margin: 2px;"> <img src="USERPIC" style="width: 97px; height: 97px;border: 1px solid #AAA;"> <div style="width:116px; text-align: center; color: #FFF; background-color: #AAA; padding: 2px; margin-top: -30px; margin-left: -10px; position:relative; ">CHARACTER NAME</div> <div style="margin-top: 10px;">more information<br> <a href="http://USERNAME.insanejournal.com" style="text-decoration:none; color: #444">~journal</a></div> </div> <div style="float:left; display:inline-block; box-shadow: 1px 1px 7px #AAA; width: 100px; height: 120px; background-color: #EEE; padding: 10px; border: 1px solid #AAA; margin: 2px;"> <img src="USERPIC" style="width: 97px; height: 97px;border: 1px solid #AAA;"> <div style="width:116px; text-align: center; color: #FFF; background-color: #AAA; padding: 2px; margin-top: -30px; margin-left: -10px; position:relative; ">CHARACTER NAME</div> <div style="margin-top: 10px;">more information<br> <a href="http://USERNAME.insanejournal.com" style="text-decoration:none; color: #444">~journal</a></div> </div> <div style="float:left; display:inline-block; box-shadow: 1px 1px 7px #AAA; width: 100px; height: 120px; background-color: #EEE; padding: 10px; border: 1px solid #AAA; margin: 2px;"> <img src="USERPIC" style="width: 97px; height: 97px;border: 1px solid #AAA;"> <div style="width:116px; text-align: center; color: #FFF; background-color: #AAA; padding: 2px; margin-top: -30px; margin-left: -10px; position:relative; ">CHARACTER NAME</div> <div style="margin-top: 10px;">more information<br> <a href="http://USERNAME.insanejournal.com" style="text-decoration:none; color: #444">~journal</a></div> </div> <div style="float:left; display:inline-block; box-shadow: 1px 1px 7px #AAA; width: 100px; height: 120px; background-color: #EEE; padding: 10px; border: 1px solid #AAA; margin: 2px;"> <img src="USERPIC" style="width: 97px; height: 97px;border: 1px solid #AAA;"> <div style="width:116px; text-align: center; color: #FFF; background-color: #AAA; padding: 2px; margin-top: -30px; margin-left: -10px; position:relative; ">CHARACTER NAME</div> <div style="margin-top: 10px;">more information<br> <a href="http://USERNAME.insanejournal.com" style="text-decoration:none; color: #444">~journal</a></div> </div> <div style="float:left; display:inline-block; box-shadow: 1px 1px 7px #AAA; width: 100px; height: 120px; background-color: #EEE; padding: 10px; border: 1px solid #AAA; margin: 2px;"> <img src="USERPIC" style="width: 97px; height: 97px;border: 1px solid #AAA;"> <div style="width:116px; text-align: center; color: #FFF; background-color: #AAA; padding: 2px; margin-top: -30px; margin-left: -10px; position:relative; ">CHARACTER NAME</div> <div style="margin-top: 10px;">more information<br> <a href="http://USERNAME.insanejournal.com" style="text-decoration:none; color: #444">~journal</a></div> </div> <div style="float:left; display:inline-block; box-shadow: 1px 1px 7px #AAA; width: 100px; height: 120px; background-color: #EEE; padding: 10px; border: 1px solid #AAA; margin: 2px;"> <img src="USERPIC" style="width: 97px; height: 97px;border: 1px solid #AAA;"> <div style="width:116px; text-align: center; color: #FFF; background-color: #AAA; padding: 2px; margin-top: -30px; margin-left: -10px; position:relative; ">CHARACTER NAME</div> <div style="margin-top: 10px;">more information<br> <a href="http://USERNAME.insanejournal.com" style="text-decoration:none; color: #444">~journal</a></div> </div> <!--INSERT NEW CHARACTERS HERE. When adding new characters to any category, make sure they stay within the 'div style="overflow:hidden"' tag (the closer for that div is directly below this note) - this just wraps up all of the character boxes so that the next category header isn't influenced by their positioning (float, display)--!> </div> <!--INSERT NEW HEADER HERE--!> <div style="overflow:hidden"> <!--INSERT NEW CHARACTERS HERE. When adding new characters to any category, make sure they stay within the 'div style="overflow:hidden"' tag (as shown here) - this just wraps up all of the character boxes so that the next category header isn't influenced by their positioning (float, display)--!> </div> </td></tr></table> <div style="margin-top: 5px; font-family:arial; font-size:9px; color: #444">CODE BY WEARESTARDUST @ <a href="http://supersuits.insanejournal.com" style="text-decoration:none; color: #888">SUPERSUITS</a></div></center></lj-raw>

To add a new header, use the following code:
<div style="margin-top: 20px; font-family:georgia; font-size: 50px; text-transform:uppercase; letter-spacing: -2px; color: #FFF; text-shadow: 1px 1px 7px #AAA; border-bottom: 2px solid #AAA; line-height: 40px; margin-bottom: 5px;">CATEGORY HEADING</div> <div style="overflow:hidden"> <!--INSERT NEW CHARACTERS HERE.--!> </div>

To add another character, use the following code:
<div style="float:left; display:inline-block; box-shadow: 1px 1px 7px #AAA; width: 100px; height: 120px; background-color: #EEE; padding: 10px; border: 1px solid #AAA; margin: 2px;"> <img src="USERPIC" style="width: 97px; height: 97px;border: 1px solid #AAA;"> <div style="width:116px; text-align: center; color: #FFF; background-color: #AAA; padding: 2px; margin-top: -30px; margin-left: -10px; position:relative; ">CHARACTER NAME</div> <div style="margin-top: 10px;">more information<br> <a href="http://USERNAME.insanejournal.com" style="text-decoration:none; color: #444">~journal</a></div> </div>

instructions→
1. Copy/paste the code into your entry.

2. Fill it in! The HTML is marked with where you can add more characters and headers, and the codes to do so are listed above.

• CATEGORY HEADER is the category of the list (Avengers, Hufflepuffs, Zombies, whatever).
• USERPIC should be that character's userpic (or a square gif if you want to get fancy but it could get messy with that many gifs on a page).
• USERNAME and JOURNAL should both be replaced with your character's journal name.

3. The "more information" tag can be anything you want depending on what you're using the cast list for. If you want to add another line of information, increase the height of the character box by 10 pixels for each line you add (this is marked in the HTML as well).

4. Other suggestions! The background color of the CHARACTER NAME panel can be used to color-code groups of characters if you have certain teams, occupations, or other designations that the CATEGORY HEADING doesn't necessarily describe.

5. Enjoy :)

Please keep the credit code at the bottom of the template so that people can find their way back to supersuits if they want to use it. Thank you!

♥ kait