InsaneJournal

Tweak says, "connection in an isolating age"

fuck 'em in the heart {kait} (wearestardust) wrote in supersuits,
@ 2014-04-25 17:03:00

Entry tags:

!!!templates, !!character rosters, #wearestardust

Cast List/Character Roster: Banded

CAST of characters.

CATEGORY HEADING

CHARACTER NAME

more information
~journal

CHARACTER NAME

more information
~journal

CHARACTER NAME

more information
~journal

CHARACTER NAME

more information
~journal

CHARACTER NAME

more information
~journal

CHARACTER NAME

more information
~journal

CATEGORY HEADING

CHARACTER NAME

more information
~journal

CHARACTER NAME

more information
~journal

CHARACTER NAME

more information
~journal

CHARACTER NAME

more information
~journal

CHARACTER NAME

more information
~journal

CHARACTER NAME

more information
~journal

CODE BY WEARESTARDUST @ SUPERSUITS

character roster/cast list → banded

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>

<!--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--!>

<!--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:

To add another character, use the following code:

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

(Post a new comment)

	starbuck 2014-04-25 10:07 pm UTC (link)
	I can't deal with you. Every time I look at my f-page there's something new and pretty up. (Reply to this)

	iseethelight 2014-04-25 10:58 pm UTC (link)
	Oh my god yes. (Reply to this)

	shadowpiranha 2014-04-26 05:01 pm UTC (link)
	Yup. I'm your biggest fan. (Reply to this)

	magikfanfic 2014-09-29 12:43 pm UTC (link)
	I love banded styles so much. Using it here with a couple of very minor tweaks. Thank you. (Reply to this)

	ex_dickens625 2016-04-24 01:31 am UTC (link)
	BTW I totally modified it to use here (Reply to this)

	backinyourbox 2017-12-22 06:22 am UTC (link)
	Just letting you know before I close this window for my sanity (!) that I'm modifiying for use on my journal here (locked for now while I'm working on it - should get it finalised by end of today...) (Reply to this)