InsaneJournal

Tweak says, "Your mom goes to college."

fuck 'em in the heart {kait} (wearestardust) wrote in supersuits,
@ 2014-04-13 02:22:00

Entry tags:

!!!templates, !!cdj codes, #wearestardust

CDJ Template Code: Writing Sample Collection

Uncolored layout designed for a collection of writing samples from multiple characters!

writing samples

playername
email@email.com + aimame (aim) + cdjname (cdj)

CHARACTER NAME A, FANDOM

CHARACTER NAME B, FANDOM

CHARACTER NAME C, FANDOM

Scene description, context, etc.

Content from another player faded out but included for sample's context

INSERT SAMPLE HERE

Scene description, context, etc.

Content from another player faded out but included for sample's context

INSERT SAMPLE HERE

Scene description, context, etc.

Content from another player faded out but included for sample's context

INSERT SAMPLE HERE

Scene description, context, etc.

Content from another player faded out but included for sample's context

INSERT SAMPLE HERE

Scene description, context, etc.

Content from another player faded out but included for sample's context

INSERT SAMPLE HERE

Scene description, context, etc.

Content from another player faded out but included for sample's context

INSERT SAMPLE HERE

Scene description, context, etc.

Content from another player faded out but included for sample's context

INSERT SAMPLE HERE

Scene description, context, etc.

Content from another player faded out but included for sample's context

INSERT SAMPLE HERE

Scene description, context, etc.

Content from another player faded out but included for sample's context

INSERT SAMPLE HERE

CODE BY WEARESTARDUST @ SUPERSUITS

cdj → sample collection

So, I had some old code that I used for writing samples and I really wasn't a fan of it, and then I wondered if it would be possible to make kind of... a hub that could collect them all together. What we end up with is a multi-panel sheet that lets you click through both characters and samples!

Because of the amount of links and anchors involved, I have all of this really clearly marked out in the behind-the-scenes text just for my own sanity. You should have no trouble parsing out the pieces of this and knowing where to add things.

This baby was left uncolored, sooo you get it in all of it's flat gray glory. If you'd like to change the colors, find/replace the following:

#FFF #000 #999 #AAA #CCC #DDD #EEE

If you come up with an awesome color scheme, please link me!

TEMPLATE →

<lj-raw><center><table style="width: 818px; font-family:arial; font-size: 11px;text-align:justify; border: 4px solid #999"><tr><td>
<div style="float:left; width: 300px; height: 500px; background-color: #CCC; border-right: 4px solid #FFF">
<!--SIDEBAR HEADER--!>
<div style="padding: 5px">

<div style="font-size: 70px; font-family:georgia; color: #FFF; font-weight:bold; line-height: 45px; letter-spacing: -4px; margin-top: -10px;margin-bottom: 20px;"><span style="color: #AAA">writing</span> samples</div>

<div style="color: #000; margin-bottom: 10px;"><span style="font-size: 30px; font-weight:bold; color: #FFF; text-transform:lowercase; letter-spacing: -2px;line-height: 20px;">playername</span><br>
email@email.com + aimame (aim) + cdjname (cdj)</div>
<!--END SIDEBAR HEADER--!>

<!--PRIMARY LIST--!>
<div style="background-color: #AAA; padding:5px;margin-bottom: 5px; border: 1px solid #999"><a href="#a" style="text-decoration:none; color: #FFF; letter-spacing: 2px;">CHARACTER NAME A, FANDOM</a></div>
<div style="background-color: #AAA; padding:5px;margin-bottom: 5px; border: 1px solid #999"><a href="#b" style="text-decoration:none; color: #FFF; letter-spacing: 2px;">CHARACTER NAME B, FANDOM</a></div>
<div style="background-color: #AAA; padding:5px;margin-bottom: 5px; border: 1px solid #999"><a href="#c" style="text-decoration:none; color: #FFF; letter-spacing: 2px;">CHARACTER NAME C, FANDOM</a></div>

<!--INSERT NEW CHARACTER HEADING HERE--!>

<!--END PRIMARY LIST--!>
</div></div>

<!--SECONDARY LIST--!>
<div style="display:inline-block; width: 500px; height: 500px; background-color: #CCC; overflow:hidden">

<!--SAMPLES FOR CHARACTER A--!>
<a name="a">

<!--CHARACTER A, SAMPLE 1--!>
<a name="a1">
<div style="width: 500px; height: 500px; background-color: #EEE; overflow: auto">
<div style="padding: 5px">

<div style="font-family:georgia; font-style:italic; text-transform:lowercase; color: #AAA; font-size: 60px; letter-spacing: -3px;text-align:right; border-bottom: 2px solid #AAA; line-height: 50px; padding: 10px; padding-bottom: 0px; margin-bottom:

3px;"><img src="USERPICA" style="height: 55px; margin-top: -10px; margin-left: -10px; border: 1px solid #999; border-radius: 100px; float:left">CHARACTER A</div>

<center>
<div style="display:inline-block; width: 130px; margin: 2px; background-color: #FFF; border: 1px solid #999; padding: 5px; text-align:center"><a href="#a1" style="text-decoration: none; color: #CCC; letter-spacing: 3px">SAMPLE 1</a></div>
<div style="display:inline-block; width: 130px; margin: 2px; background-color: #CCC; border: 1px solid #999; padding: 5px; text-align:center"><a href="#a2" style="text-decoration: none; color: #FFF; letter-spacing: 3px">SAMPLE 2</a></div>
<div style="display:inline-block; width: 130px; margin: 2px; background-color: #CCC; border: 1px solid #999; padding: 5px; text-align:center"><a href="#a3" style="text-decoration: none; color: #FFF; letter-spacing: 3px">SAMPLE

3</a></div></center>

<center><div style="width: 300; padding: 5px; background-color: #DDD; font-style:italic; text-align:justify;">Scene description, context, etc. </div></center><br>
<span style="opacity: .5">Content from another player faded out but included for sample's context</span>
<br><br>
INSERT SAMPLE HERE

</div>

</div></div>
</a>
<!--END CHARACTER A, SAMPLE 1--!>

<!--CHARACTER A, SAMPLE 2--!>
<a name="a2">
<div style="width: 500px; height: 500px; background-color: #EEE; overflow: auto">
<div style="padding: 5px">

3px;"><img src="USERPICA" style="height: 55px; margin-top: -10px; margin-left: -10px; border: 1px solid #999; border-radius: 100px; float:left">CHARACTER A</div>

<center>
<div style="display:inline-block; width: 130px; margin: 2px; background-color: #CCC; border: 1px solid #999; padding: 5px; text-align:center"><a href="#a1" style="text-decoration: none; color: #FFF; letter-spacing: 3px">SAMPLE 1</a></div>
<div style="display:inline-block; width: 130px; margin: 2px; background-color: #FFF; border: 1px solid #999; padding: 5px; text-align:center"><a href="#a2" style="text-decoration: none; color: #CCC; letter-spacing: 3px">SAMPLE 2</a></div>
<div style="display:inline-block; width: 130px; margin: 2px; background-color: #CCC; border: 1px solid #999; padding: 5px; text-align:center"><a href="#a3" style="text-decoration: none; color: #FFF; letter-spacing: 3px">SAMPLE

3</a></div></center>

</div>

</div></div>
</a>
<!--END CHARACTER A, SAMPLE 2--!>

<!--CHARACTER A, SAMPLE 3--!>
<a name="a3">
<div style="width: 500px; height: 500px; background-color: #EEE; overflow: auto">
<div style="padding: 5px">

3px;"><img src="USERPICA" style="height: 55px; margin-top: -10px; margin-left: -10px; border: 1px solid #999; border-radius: 100px; float:left">CHARACTER A</div>

<center>
<div style="display:inline-block; width: 130px; margin: 2px; background-color: #CCC; border: 1px solid #999; padding: 5px; text-align:center"><a href="#a1" style="text-decoration: none; color: #FFF; letter-spacing: 3px">SAMPLE 1</a></div>
<div style="display:inline-block; width: 130px; margin: 2px; background-color: #CCC; border: 1px solid #999; padding: 5px; text-align:center"><a href="#a2" style="text-decoration: none; color: #FFF; letter-spacing: 3px">SAMPLE 2</a></div>
<div style="display:inline-block; width: 130px; margin: 2px; background-color: #FFF; border: 1px solid #999; padding: 5px; text-align:center"><a href="#a3" style="text-decoration: none; color: #CCC; letter-spacing: 3px">SAMPLE

3</a></div></center>

</div>

</div></div>
</a>
<!--END CHARACTER A, SAMPLE 3--!>

</a>
<!--END CHARACTER A--!>

<!--SAMPLES FOR CHARACTER B--!>
<a name="b">

<!--CHARACTER B, SAMPLE 1--!>
<a name="b1">
<div style="width: 500px; height: 500px; background-color: #EEE; overflow: auto">
<div style="padding: 5px">

3px;"><img src="USERPICB" style="height: 55px; margin-top: -10px; margin-left: -10px; border: 1px solid #999; border-radius: 100px; float:left">CHARACTER B</div>

<center>
<div style="display:inline-block; width: 130px; margin: 2px; background-color: #FFF; border: 1px solid #999; padding: 5px; text-align:center"><a href="#b1" style="text-decoration: none; color: #CCC; letter-spacing: 3px">SAMPLE 1</a></div>
<div style="display:inline-block; width: 130px; margin: 2px; background-color: #CCC; border: 1px solid #999; padding: 5px; text-align:center"><a href="#b2" style="text-decoration: none; color: #FFF; letter-spacing: 3px">SAMPLE 2</a></div>
<div style="display:inline-block; width: 130px; margin: 2px; background-color: #CCC; border: 1px solid #999; padding: 5px; text-align:center"><a href="#b3" style="text-decoration: none; color: #FFF; letter-spacing: 3px">SAMPLE

3</a></div></center>

</div>

</div></div>
</a>
<!--END CHARACTER B, SAMPLE 1--!>

<!--CHARACTER B, SAMPLE 2--!>
<a name="b2">
<div style="width: 500px; height: 500px; background-color: #EEE; overflow: auto">
<div style="padding: 5px">

3px;"><img src="USERPICB" style="height: 55px; margin-top: -10px; margin-left: -10px; border: 1px solid #999; border-radius: 100px; float:left">CHARACTER B</div>

<center>
<div style="display:inline-block; width: 130px; margin: 2px; background-color: #CCC; border: 1px solid #999; padding: 5px; text-align:center"><a href="#b1" style="text-decoration: none; color: #FFF; letter-spacing: 3px">SAMPLE 1</a></div>
<div style="display:inline-block; width: 130px; margin: 2px; background-color: #FFF; border: 1px solid #999; padding: 5px; text-align:center"><a href="#b2" style="text-decoration: none; color: #CCC; letter-spacing: 3px">SAMPLE 2</a></div>
<div style="display:inline-block; width: 130px; margin: 2px; background-color: #CCC; border: 1px solid #999; padding: 5px; text-align:center"><a href="#b3" style="text-decoration: none; color: #FFF; letter-spacing: 3px">SAMPLE

3</a></div></center>

</div>

</div></div>
</a>
<!--END CHARACTER B, SAMPLE 2--!>

<!--CHARACTER B, SAMPLE 3--!>
<a name="b3">
<div style="width: 500px; height: 500px; background-color: #EEE; overflow: auto">
<div style="padding: 5px">

3px;"><img src="USERPICB" style="height: 55px; margin-top: -10px; margin-left: -10px; border: 1px solid #999; border-radius: 100px; float:left">CHARACTER B</div>

<center>
<div style="display:inline-block; width: 130px; margin: 2px; background-color: #CCC; border: 1px solid #999; padding: 5px; text-align:center"><a href="#b1" style="text-decoration: none; color: #FFF; letter-spacing: 3px">SAMPLE 1</a></div>
<div style="display:inline-block; width: 130px; margin: 2px; background-color: #CCC; border: 1px solid #999; padding: 5px; text-align:center"><a href="#b2" style="text-decoration: none; color: #FFF; letter-spacing: 3px">SAMPLE 2</a></div>
<div style="display:inline-block; width: 130px; margin: 2px; background-color: #FFF; border: 1px solid #999; padding: 5px; text-align:center"><a href="#b3" style="text-decoration: none; color: #CCC; letter-spacing: 3px">SAMPLE

3</a></div></center>

</div>

</div></div>
</a>
<!--END CHARACTER B, SAMPLE 3--!>

</a>
<!--END CHARACTER B--!>

<!--SAMPLES FOR CHARACTER C--!>
<a name="c">

<!--CHARACTER C, SAMPLE 1--!>
<a name="c1">
<div style="width: 500px; height: 500px; background-color: #EEE; overflow: auto">
<div style="padding: 5px">

3px;"><img src="USERPICC" style="height: 55px; margin-top: -10px; margin-left: -10px; border: 1px solid #999; border-radius: 100px; float:left">CHARACTER C</div>

<center>
<div style="display:inline-block; width: 130px; margin: 2px; background-color: #FFF; border: 1px solid #999; padding: 5px; text-align:center"><a href="#c1" style="text-decoration: none; color: #CCC; letter-spacing: 3px">SAMPLE 1</a></div>
<div style="display:inline-block; width: 130px; margin: 2px; background-color: #CCC; border: 1px solid #999; padding: 5px; text-align:center"><a href="#c2" style="text-decoration: none; color: #FFF; letter-spacing: 3px">SAMPLE 2</a></div>
<div style="display:inline-block; width: 130px; margin: 2px; background-color: #CCC; border: 1px solid #999; padding: 5px; text-align:center"><a href="#c3" style="text-decoration: none; color: #FFF; letter-spacing: 3px">SAMPLE

3</a></div></center>

</div>

</div></div>
</a>
<!--END CHARACTER C, SAMPLE 1--!>

<!--CHARACTER C, SAMPLE 2--!>
<a name="c2">
<div style="width: 500px; height: 500px; background-color: #EEE; overflow: auto">
<div style="padding: 5px">

3px;"><img src="USERPICC" style="height: 55px; margin-top: -10px; margin-left: -10px; border: 1px solid #999; border-radius: 100px; float:left">CHARACTER C</div>

<center>
<div style="display:inline-block; width: 130px; margin: 2px; background-color: #CCC; border: 1px solid #999; padding: 5px; text-align:center"><a href="#c1" style="text-decoration: none; color: #FFF; letter-spacing: 3px">SAMPLE 1</a></div>
<div style="display:inline-block; width: 130px; margin: 2px; background-color: #FFF; border: 1px solid #999; padding: 5px; text-align:center"><a href="#c2" style="text-decoration: none; color: #CCC; letter-spacing: 3px">SAMPLE 2</a></div>
<div style="display:inline-block; width: 130px; margin: 2px; background-color: #CCC; border: 1px solid #999; padding: 5px; text-align:center"><a href="#c3" style="text-decoration: none; color: #FFF; letter-spacing: 3px">SAMPLE

3</a></div></center>

</div>

</div></div>
</a>
<!--END CHARACTER C, SAMPLE 2--!>

<!--CHARACTER C, SAMPLE 3--!>
<a name="c3">
<div style="width: 500px; height: 500px; background-color: #EEE; overflow: auto">
<div style="padding: 5px">

3px;"><img src="USERPICC" style="height: 55px; margin-top: -10px; margin-left: -10px; border: 1px solid #999; border-radius: 100px; float:left">CHARACTER C</div>

<center>
<div style="display:inline-block; width: 130px; margin: 2px; background-color: #CCC; border: 1px solid #999; padding: 5px; text-align:center"><a href="#c1" style="text-decoration: none; color: #FFF; letter-spacing: 3px">SAMPLE 1</a></div>
<div style="display:inline-block; width: 130px; margin: 2px; background-color: #CCC; border: 1px solid #999; padding: 5px; text-align:center"><a href="#c2" style="text-decoration: none; color: #FFF; letter-spacing: 3px">SAMPLE 2</a></div>
<div style="display:inline-block; width: 130px; margin: 2px; background-color: #FFF; border: 1px solid #999; padding: 5px; text-align:center"><a href="#c3" style="text-decoration: none; color: #CCC; letter-spacing: 3px">SAMPLE

3</a></div></center>

</div>

</div></div>
</a>
<!--END CHARACTER C, SAMPLE 3--!>

</a>
<!--END CHARACTER C--!>

<!--INSERT NEW SAMPLE SECTION HERE - REMEMBER TO CHANGE YOUR LINKS--!>

</div>

<!--END SECONDARY LIST--!>
</td></tr></table>
<div style="text-align:center; margin-top: 4px;font-family:arial; font-size:9px; letter-spacing: 3px; text-transform:uppercase">CODE BY WEARESTARDUST @ <a href="http://supersuits.insanejournal.com/" style="text-decoration:none; color:

#AAA">SUPERSUITS</a></div>
</center></lj-raw>

To add another character to the left sidebar, copy/paste this code where it says "INSERT NEW CHARACTER HEADING HERE." The one below is labeled "d" and refers to the anchor link "d" -- change it to "e" if it's the fifth character, etc.

To add additional samples for that extra character, copy/paste this code where it says "INSERT NEW SAMPLE SECTION HERE - REMEMBER TO CHANGE YOUR LINKS." And then remember to change your links! The one below is "d" and ready to go, but to go past a fourth character, change the links to read e, e1, e2, and e3, or whatever letter is next. You can also change the letter system to have the anchor link be your character's first name, etc, whatever works for you. :)

<!--SAMPLES FOR CHARACTER D--!>
<a name="d">

<!--CHARACTER D, SAMPLE 1--!>
<a name="d1">
<div style="width: 500px; height: 500px; background-color: #EEE; overflow: auto">
<div style="padding: 5px">

3px;"><img src="USERPICD" style="height: 55px; margin-top: -10px; margin-left: -10px; border: 1px solid #999; border-radius: 100px; float:left">CHARACTER D</div>

<center>
<div style="display:inline-block; width: 130px; margin: 2px; background-color: #FFF; border: 1px solid #999; padding: 5px; text-align:center"><a href="#d1" style="text-decoration: none; color: #CCC; letter-spacing: 3px">SAMPLE 1</a></div>
<div style="display:inline-block; width: 130px; margin: 2px; background-color: #CCC; border: 1px solid #999; padding: 5px; text-align:center"><a href="#d2" style="text-decoration: none; color: #FFF; letter-spacing: 3px">SAMPLE 2</a></div>
<div style="display:inline-block; width: 130px; margin: 2px; background-color: #CCC; border: 1px solid #999; padding: 5px; text-align:center"><a href="#d3" style="text-decoration: none; color: #FFF; letter-spacing: 3px">SAMPLE

3</a></div></center>

</div>

</div></div>
</a>
<!--END CHARACTER D, SAMPLE 1--!>

<!--CHARACTER D, SAMPLE 2--!>
<a name="d2">
<div style="width: 500px; height: 500px; background-color: #EEE; overflow: auto">
<div style="padding: 5px">

3px;"><img src="USERPICD" style="height: 55px; margin-top: -10px; margin-left: -10px; border: 1px solid #999; border-radius: 100px; float:left">CHARACTER D</div>

<center>
<div style="display:inline-block; width: 130px; margin: 2px; background-color: #CCC; border: 1px solid #999; padding: 5px; text-align:center"><a href="#d1" style="text-decoration: none; color: #FFF; letter-spacing: 3px">SAMPLE 1</a></div>
<div style="display:inline-block; width: 130px; margin: 2px; background-color: #FFF; border: 1px solid #999; padding: 5px; text-align:center"><a href="#d2" style="text-decoration: none; color: #CCC; letter-spacing: 3px">SAMPLE 2</a></div>
<div style="display:inline-block; width: 130px; margin: 2px; background-color: #CCC; border: 1px solid #999; padding: 5px; text-align:center"><a href="#d3" style="text-decoration: none; color: #FFF; letter-spacing: 3px">SAMPLE

3</a></div></center>

</div>

</div></div>
</a>
<!--END CHARACTER D, SAMPLE 2--!>

<!--CHARACTER D, SAMPLE 3--!>
<a name="d3">
<div style="width: 500px; height: 500px; background-color: #EEE; overflow: auto">
<div style="padding: 5px">

3px;"><img src="USERPICD" style="height: 55px; margin-top: -10px; margin-left: -10px; border: 1px solid #999; border-radius: 100px; float:left">CHARACTER D</div>

<center>
<div style="display:inline-block; width: 130px; margin: 2px; background-color: #CCC; border: 1px solid #999; padding: 5px; text-align:center"><a href="#d1" style="text-decoration: none; color: #FFF; letter-spacing: 3px">SAMPLE 1</a></div>
<div style="display:inline-block; width: 130px; margin: 2px; background-color: #CCC; border: 1px solid #999; padding: 5px; text-align:center"><a href="#d2" style="text-decoration: none; color: #FFF; letter-spacing: 3px">SAMPLE 2</a></div>
<div style="display:inline-block; width: 130px; margin: 2px; background-color: #FFF; border: 1px solid #999; padding: 5px; text-align:center"><a href="#d3" style="text-decoration: none; color: #CCC; letter-spacing: 3px">SAMPLE

3</a></div></center>

</div>

</div></div>
</a>
<!--END CHARACTER D, SAMPLE 3--!>

</a>
<!--END CHARACTER D--!>

instructions→
1. Copy/paste the code into your entry.
2. Replace HEADERGIF with a gif of your choice!
3. Replace USERPICA, USERPICB, and USERPICC with userpics - I have them differentiated by character so that if you want to do one icon per character it's easy to find/replace.
4. Fill it in! The left sidebar only appears once in the code, but each character page (on the right) appears three times (one for each of the samples), so make sure you fill in each one.
5. Color, if desired! I left this one uncolored because I figured people would want to customize it to their CDJs and personal preferences.
6. 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

	ex_gojira298 2014-04-13 05:15 pm UTC (link)
	YESSS! This is awesome, there are like, none of these around. Thank you! (Reply to this) (Thread)

	wearestardust 2014-04-13 05:18 pm UTC (link)
	You're welcome! (Reply to this) (Parent)

	dash_dingo 2014-04-16 02:08 am UTC (link)
	!! I've yoinked this awesome layout for my RP examples, using a blue colour scheme. :E (Reply to this)

	irish_coding 2014-04-16 08:27 am UTC (link)
	I'm absolutely loving this. And using it!! (Reply to this)