InsaneJournal

code by wearestardust @ supersuits

Iiii don't play Dragon Age, but my wife does, and after doing the Codex layout I decided to make it BioWare Theme Week and go for designing a layout around Dragon Age II's menu screens! And it just so happens to perfectly match Charlie's LARPing costume from Supernatural, and given that Felicia Day plays Tallis in DA2 she worked out nicely as my test model.

BTW, this is a huge code, which is why I don't have dummy text in the live preview. I went to post it and the post was too large. However, it SHOULD accommodate even long profiles without breaking the limit; it's only because I had to post the code twice for the preview and for the copy/paste textbox. :)

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

#FFF #000 #AAA #2A3330 #150002 #260200 #680500 #883116 #FFF578 #E9E395

TEMPLATE →
<lj-raw><center><table style="width: 940px; font-family: palatino linotype, book antiqua, georgia; font-size: 11px; color: #e9e395;text-align:justify; padding: 10px; background-color: #FFF;"><tr><td> <!--TOP BORDER SCOOPS--!> <div style="float:left; width:30px; height: 30px; background-color: #FFF; border-radius: 100px; border-right: 6px solid #680500; margin-right: -25px; margin-top: -5px; transform:rotate(45deg); -webkit-transform:rotate(45deg)"></div> <div style="float:right; width:30px; height: 30px; background-color: #FFF; border-radius: 100px; border-right: 4px solid #680500; margin-left: -25px; margin-top: -5px; transform:rotate(140deg); -webkit-transform:rotate(140deg)"></div> <!--END BORDER SCOOPS--!> <div style="background-color: #CCC; height: 554px; width: 886px; border: 3px solid #680500; padding: 0px; overflow: hidden; box-shadow: 1px 1px 8px #AAA"> <!--CONTENT BOX--!> <!--ATTRIBUTES BOX--!> <a name="1" style="color: #e9e395"> <div style="background-color: #CCC; height: 554px; margin-bottom:4px; width: 886px; padding: 0px;"> <!--LEFT SIDEBAR--!> <div style="float:left; height: 550px; width: 320px; background-color: #150002; padding: 4px;"> <div style="height: 180px; border-top-right-radius: 200px; border-top: 5px solid #e9e395; background:url(BACKGROUNDGIF); background-position: right;"><div style="height: 180px; background: linear-gradient(to bottom, transparent 50%, #150002); background: -webkit-linear-gradient(top, transparent 50%, #150002); background: -moz-linear-gradient(top, transparent 50%, #150002)"></div></div> <div style="margin-left: 20px;margin-top: -20px;font-size: 30px; font-weight:bold; color: #FFF; letter-spacing: -2px; text-shadow: 1px 1px 15px #e9e395">Character Name</div> <div style="margin-left: 20px; margin-bottom: 15px;font-size: 20px; color: #883116; letter-spacing: -1px; font-weight:bold; line-height: 10px;">Rank, Class, or Tagline</div> <!--USERPIC BAR--!> <img src="USERPIC1" style="height: 50px; width: 50px; padding: 2px; background-color: #e9e395;opacity: 1; border: 1px solid #e9e395; box-shadow: 1px 1px 20px #e9e395; margin: 1px; margin-left: 10px;"> <img src="USERPIC2" style="height: 50px; width: 50px; padding: 2px; opacity: .6; border: 1px solid #2a3330; margin: 1px;"> <img src="USERPIC3" style="height: 50px; width: 50px; padding: 2px; opacity: .6; border: 1px solid #2a3330; margin: 1px;"> <img src="USERPIC4" style="height: 50px; width: 50px; padding: 2px; opacity: .6; border: 1px solid #2a3330; margin: 1px;"> <img src="USERPIC5" style="height: 50px; width: 50px; padding: 2px; opacity: .6; border: 1px solid #2a3330; margin: 1px;"> <!--END USERPIC BAR--!> <!--MENU--!> <div style="background-color: #150002; width: 305; margin-top: 2px; overflow:hidden"> <div style="margin: 2px;"><div style="float:left; height:34; width: 30px; background-color: #260200; box-shadow: 1px 1px 20px #150002; border-bottom-right-radius: 50px; border-right: 4px solid #680500"></div> <div style="height:20px; width: 300px; background: linear-gradient(to right, #FFF578, transparent);background: -webkit-linear-gradient(left, #FFF578 , transparent); background: -moz-linear-gradient(left, #FFF578, transparent);border-top: 2px solid #680500; border-bottom: 1px solid #680500; box-shadow: 1px 1px 20px #680500; padding: 5px; font-family: palatino linotype, book antiqua, georgia;text-transform:uppercase;font-size: 20px; line-height: 20px"><a href="#1" style="color: #150002; text-decoration:none">ATTRIBUTES</a></div></div> <div style="margin: 2px;"> <div style="height:20px; width: 272px; margin-left: 28px;border-top: 2px solid transparent; border-bottom: 1px solid transparent;padding: 5px; font-family: palatino linotype, book antiqua, georgia;text-transform:uppercase;font-size: 20px; line-height: 20px"><a href="#2" style="color: #e9e395;text-decoration:none">PERSONALITY</a></div></div> <div style="margin: 2px;"> <div style="height:20px; width: 272px; margin-left: 28px;border-top: 2px solid transparent; border-bottom: 1px solid transparent;padding: 5px; font-family: palatino linotype, book antiqua, georgia;text-transform:uppercase;font-size: 20px; line-height: 20px"><a href="#3" style="color: #e9e395;text-decoration:none">ABILITIES & SKILLS</a></div></div> <div style="margin: 2px;"> <div style="height:20px; width: 272px; margin-left: 28px;border-top: 2px solid transparent; border-bottom: 1px solid transparent;padding: 5px; font-family: palatino linotype, book antiqua, georgia;text-transform:uppercase;font-size: 20px; line-height: 20px"><a href="#4" style="color: #e9e395;text-decoration:none">HISTORY</a></div></div> <div style="margin: 2px;"> <div style="height:20px; width: 272px; margin-left: 28px;border-top: 2px solid transparent; border-bottom: 1px solid transparent;padding: 5px; font-family: palatino linotype, book antiqua, georgia;text-transform:uppercase;font-size: 20px; line-height: 20px"><a href="#5" style="color: #e9e395;text-decoration:none">NOTES</a></div></div> </div> <!--END MENU--!> <!--OOC INFO--!> <center><div style="width: 270px; margin-top: -5px; color: #AAA"> <div style="font-size: 18px; border-bottom: 1px solid #2a3330">OOC</div> Playername • email@email.com • aimname (aim)<br> cdjname (cdj) • Time Zone • PB Name (pb)</div></center> <!--END OOC INFO--!> </div> <!--END LEFT SIDEBAR--!> <div style="width: 550px; height: 550px; background: radial-gradient(farthest-side, #280406, #150002); border: 4px solid #150002; overflow: auto;"> <div style="color: #FFF; font-size: 40px; text-transform:uppercase; border-bottom: 2px solid #680500; line-height: 38px; margin: 10px; margin-top:20px;">ATTRIBUTES</div> <div style="padding: 20px; font-family: arial;text-shadow: 1px 1px 10px #e9e395"> <table style="margin-left: 50px; width: 420px; font-family:arial; font-size: 11px; color: #e9e395; text-shadow: 1px 1px 10px #e9e385; text-align:justify"> <tr><td valign="top" style="width: 100px; opacity: .5">NAME.</td><td>Character Name</td></tr> <tr><td valign="top" style="opacity: .5">TITLE/CODE.</td><td>Title or Codename</td></tr> <tr><td valign="top" style="opacity: .5">NICKNAMES.</td><td>Nicknames</td></tr> <tr><td valign="top" style="opacity: .5">CLASS/RANK.</td><td>Fighting class, rank, or other specialization</td></tr> <tr><td valign="top" style="opacity: .5">AGE.</td><td>00</td></tr> <tr><td valign="top" style="opacity: .5">DATE OF BIRTH.</td><td>Month 00, 0000<br><br></td></tr> <tr><td valign="top" style="opacity: .5">ORIENTATION.</td><td>Sexual/Romantic Orientation</td></tr> <tr><td valign="top" style="opacity: .5">DATING STATUS.</td><td>Dating/Marital Status</td></tr> <tr><td valign="top" style="opacity: .5">DATING HISTORY.</td><td>Past Romantic Partner<br> Past Romantic Partner<br><br></td></tr> <tr><td valign="top" style="opacity: .5">FAMILY.</td><td>Mother<br> Father<br> Siblings, etc, etc<br><br></td></tr> <tr><td valign="top" style="opacity: .5">HEIGHT.</td><td>0'0"</td></tr> <tr><td valign="top" style="opacity: .5">BUILD.</td><td>Physical Build</td></tr> <tr><td valign="top" style="opacity: .5">HAIR.</td><td>Hair Color</td></tr> <tr><td valign="top" style="opacity: .5">EYES.</td><td>Eye Color<br><br></td></tr> <tr><td valign="top" style="opacity: .5">WEAPONS.</td><td>Weapons of choice</td></tr> <tr><td valign="top" style="opacity: .5">ARMOR.</td><td>Protecting the squishy bits</td></tr> </table> </div> </div> </div></a> <!--END ATTRIBUTES BOX--!> <!--PERSONALITY BOX--!> <a name="2" style="color: #e9e395"> <div style="background-color: #CCC; height: 554px; margin-bottom:4px; width: 886px; padding: 0px;"> <!--LEFT SIDEBAR--!> <div style="float:left; height: 550px; width: 320px; background-color: #150002; padding: 4px;"> <div style="height: 180px; border-top-right-radius: 200px; border-top: 5px solid #e9e395; background:url(BACKGROUNDGIF); background-position: right;"><div style="height: 180px; background: linear-gradient(to bottom, transparent 50%, #150002); background: -webkit-linear-gradient(top, transparent 50%, #150002); background: -moz-linear-gradient(top, transparent 50%, #150002)"></div></div> <div style="margin-left: 20px;margin-top: -20px;font-size: 30px; font-weight:bold; color: #FFF; letter-spacing: -2px; text-shadow: 1px 1px 15px #e9e395">Character Name</div> <div style="margin-left: 20px; margin-bottom: 15px;font-size: 20px; color: #883116; letter-spacing: -1px; font-weight:bold; line-height: 10px;">Rank, Class, or Tagline</div> <!--USERPIC BAR--!> <img src="USERPIC1" style="height: 50px; width: 50px; padding: 2px; opacity: .6; border: 1px solid #2a3330; margin: 1px;margin-left: 10px;"> <img src="USERPIC2" style="height: 50px; width: 50px; padding: 2px; background-color: #e9e395;opacity: 1; border: 1px solid #e9e395; box-shadow: 1px 1px 20px #e9e395; margin: 1px;"> <img src="USERPIC3" style="height: 50px; width: 50px; padding: 2px; opacity: .6; border: 1px solid #2a3330; margin: 1px;"> <img src="USERPIC4" style="height: 50px; width: 50px; padding: 2px; opacity: .6; border: 1px solid #2a3330; margin: 1px;"> <img src="USERPIC5" style="height: 50px; width: 50px; padding: 2px; opacity: .6; border: 1px solid #2a3330; margin: 1px;"> <!--END USERPIC BAR--!> <!--MENU--!> <div style="margin: 2px;"> <div style="height:20px; width: 272px; margin-left: 28px;border-top: 2px solid transparent; border-bottom: 1px solid transparent;padding: 5px; font-family: palatino linotype, book antiqua, georgia;text-transform:uppercase;font-size: 20px; line-height: 20px"><a href="#1" style="color: #e9e395;text-decoration:none">ATTRIBUTES</a></div></div> <div style="background-color: #150002; width: 305; overflow:hidden"> <div style="margin: 2px;"><div style="float:left; height:34; width: 30px; background-color: #260200; box-shadow: 1px 1px 20px #150002; border-bottom-right-radius: 50px; border-right: 4px solid #680500"></div> <div style="height:20px; width: 300px; background: linear-gradient(to right, #FFF578, transparent);background: -webkit-linear-gradient(left, #FFF578, transparent); background: -moz-linear-gradient(left, #FFF578, transparent);border-top: 2px solid #680500; border-bottom: 1px solid #680500; box-shadow: 1px 1px 20px #680500; padding: 5px; font-family: palatino linotype, book antiqua, georgia;text-transform:uppercase;font-size: 20px; line-height: 20px"><a href="#2" style="color: #150002; text-decoration:none">PERSONALITY</a></div></div> <div style="margin: 2px;"> <div style="height:20px; width: 272px; margin-left: 28px;border-top: 2px solid transparent; border-bottom: 1px solid transparent;padding: 5px; font-family: palatino linotype, book antiqua, georgia;text-transform:uppercase;font-size: 20px; line-height: 20px"><a href="#3" style="color: #e9e395;text-decoration:none">ABILITIES & SKILLS</a></div></div> <div style="margin: 2px;"> <div style="height:20px; width: 272px; margin-left: 28px;border-top: 2px solid transparent; border-bottom: 1px solid transparent;padding: 5px; font-family: palatino linotype, book antiqua, georgia;text-transform:uppercase;font-size: 20px; line-height: 20px"><a href="#4" style="color: #e9e395;text-decoration:none">HISTORY</a></div></div> <div style="margin: 2px;"> <div style="height:20px; width: 272px; margin-left: 28px;border-top: 2px solid transparent; border-bottom: 1px solid transparent;padding: 5px; font-family: palatino linotype, book antiqua, georgia;text-transform:uppercase;font-size: 20px; line-height: 20px"><a href="#5" style="color: #e9e395;text-decoration:none">NOTES</a></div></div> </div> <!--END MENU--!> <!--OOC INFO--!> <center><div style="width: 270px; margin-top: -5px; color: #AAA"> <div style="font-size: 18px; border-bottom: 1px solid #2a3330">OOC</div> Playername • email@email.com • aimname (aim)<br> cdjname (cdj) • Time Zone • PB Name (pb)</div></center> <!--END OOC INFO--!> </div> <!--END LEFT SIDEBAR--!> <div style="width: 550px; height: 550px; background: radial-gradient(farthest-side, #280406, #150002); border: 4px solid #150002; overflow: auto;"> <div style="color: #FFF; font-size: 40px; text-transform:uppercase; border-bottom: 2px solid #680500; line-height: 38px; margin: 10px; margin-top:20px;">PERSONALITY</div> <div style="padding: 20px; font-family: arial;text-shadow: 1px 1px 10px #e9e395"> PERSONALITY GOES HERE </div> </div> </div></a> <!--END PERSONALITY BOX--!> <!--SKILLS BOX--!> <a name="3" style="color: #e9e395"> <div style="background-color: #CCC; height: 554px; margin-bottom:4px; width: 886px; padding: 0px;"> <!--LEFT SIDEBAR--!> <div style="float:left; height: 550px; width: 320px; background-color: #150002; padding: 4px;"> <div style="height: 180px; border-top-right-radius: 200px; border-top: 5px solid #e9e395; background:url(BACKGROUNDGIF); background-position: right;"><div style="height: 180px; background: linear-gradient(to bottom, transparent 50%, #150002); background: -webkit-linear-gradient(top, transparent 50%, #150002); background: -moz-linear-gradient(top, transparent 50%, #150002)"></div></div> <div style="margin-left: 20px;margin-top: -20px;font-size: 30px; font-weight:bold; color: #FFF; letter-spacing: -2px; text-shadow: 1px 1px 15px #e9e395">Character Name</div> <div style="margin-left: 20px; margin-bottom: 15px;font-size: 20px; color: #883116; letter-spacing: -1px; font-weight:bold; line-height: 10px;">Rank, Class, or Tagline</div> <!--USERPIC BAR--!> <img src="USERPIC1" style="height: 50px; width: 50px; padding: 2px; opacity: .6; border: 1px solid #2a3330; margin: 1px;margin-left: 10px;"> <img src="USERPIC2" style="height: 50px; width: 50px; padding: 2px; opacity: .6; border: 1px solid #2a3330; margin: 1px;"> <img src="USERPIC3" style="height: 50px; width: 50px; padding: 2px; background-color: #e9e395;opacity: 1; border: 1px solid #e9e395; box-shadow: 1px 1px 20px #e9e395; margin: 1px;"> <img src="USERPIC4" style="height: 50px; width: 50px; padding: 2px; opacity: .6; border: 1px solid #2a3330; margin: 1px;"> <img src="USERPIC5" style="height: 50px; width: 50px; padding: 2px; opacity: .6; border: 1px solid #2a3330; margin: 1px;"> <!--END USERPIC BAR--!> <!--MENU--!> <div style="margin: 2px;"> <div style="height:20px; width: 272px; margin-left: 28px;border-top: 2px solid transparent; border-bottom: 1px solid transparent;padding: 5px; font-family: palatino linotype, book antiqua, georgia;text-transform:uppercase;font-size: 20px; line-height: 20px"><a href="#1" style="color: #e9e395;text-decoration:none">ATTRIBUTES</a></div></div> <div style="margin: 2px;"> <div style="height:20px; width: 272px; margin-left: 28px;border-top: 2px solid transparent; border-bottom: 1px solid transparent;padding: 5px; font-family: palatino linotype, book antiqua, georgia;text-transform:uppercase;font-size: 20px; line-height: 20px"><a href="#2" style="color: #e9e395;text-decoration:none">PERSONALITY</a></div></div> <div style="background-color: #150002; width: 305; overflow:hidden"> <div style="margin: 2px;"><div style="float:left; height:34; width: 30px; background-color: #260200; box-shadow: 1px 1px 20px #150002; border-bottom-right-radius: 50px; border-right: 4px solid #680500"></div> <div style="height:20px; width: 300px; background: linear-gradient(to right, #FFF578, transparent);background: -webkit-linear-gradient(left, #FFF578, transparent); background: -moz-linear-gradient(left, #FFF578, transparent);border-top: 2px solid #680500; border-bottom: 1px solid #680500; box-shadow: 1px 1px 20px #680500; padding: 5px; font-family: palatino linotype, book antiqua, georgia;text-transform:uppercase;font-size: 20px; line-height: 20px"><a href="#3" style="color: #150002; text-decoration:none">ABILITIES & SKILLS</a></div></div> <div style="margin: 2px;"> <div style="height:20px; width: 272px; margin-left: 28px;border-top: 2px solid transparent; border-bottom: 1px solid transparent;padding: 5px; font-family: palatino linotype, book antiqua, georgia;text-transform:uppercase;font-size: 20px; line-height: 20px"><a href="#4" style="color: #e9e395;text-decoration:none">HISTORY</a></div></div> <div style="margin: 2px;"> <div style="height:20px; width: 272px; margin-left: 28px;border-top: 2px solid transparent; border-bottom: 1px solid transparent;padding: 5px; font-family: palatino linotype, book antiqua, georgia;text-transform:uppercase;font-size: 20px; line-height: 20px"><a href="#5" style="color: #e9e395;text-decoration:none">NOTES</a></div></div> </div> <!--END MENU--!> <!--OOC INFO--!> <center><div style="width: 270px; margin-top: -5px; color: #AAA"> <div style="font-size: 18px; border-bottom: 1px solid #2a3330">OOC</div> Playername • email@email.com • aimname (aim)<br> cdjname (cdj) • Time Zone • PB Name (pb)</div></center> <!--END OOC INFO--!> </div> <!--END LEFT SIDEBAR--!> <div style="width: 550px; height: 550px; background: radial-gradient(farthest-side, #280406, #150002); border: 4px solid #150002; overflow: auto;"> <div style="color: #FFF; font-size: 40px; text-transform:uppercase; border-bottom: 2px solid #680500; line-height: 38px; margin: 10px; margin-top:20px;">ABILITIES & SKILLS</div> <div style="padding: 20px; font-family: arial;text-shadow: 1px 1px 10px #e9e395"> SKILLS GO HERE </div> </div> </div></a> <!--END SKILLS BOX--!> <!--HISTORY BOX--!> <a name="4" style="color: #e9e395"> <div style="background-color: #CCC; height: 554px; margin-bottom:4px; width: 886px; padding: 0px;"> <!--LEFT SIDEBAR--!> <div style="float:left; height: 550px; width: 320px; background-color: #150002; padding: 4px;"> <div style="height: 180px; border-top-right-radius: 200px; border-top: 5px solid #e9e395; background:url(BACKGROUNDGIF); background-position: right;"><div style="height: 180px; background: linear-gradient(to bottom, transparent 50%, #150002); background: -webkit-linear-gradient(top, transparent 50%, #150002); background: -moz-linear-gradient(top, transparent 50%, #150002)"></div></div> <div style="margin-left: 20px;margin-top: -20px;font-size: 30px; font-weight:bold; color: #FFF; letter-spacing: -2px; text-shadow: 1px 1px 15px #e9e395">Character Name</div> <div style="margin-left: 20px; margin-bottom: 15px;font-size: 20px; color: #883116; letter-spacing: -1px; font-weight:bold; line-height: 10px;">Rank, Class, or Tagline</div> <!--USERPIC BAR--!> <img src="USERPIC1" style="height: 50px; width: 50px; padding: 2px; opacity: .6; border: 1px solid #2a3330; margin: 1px;margin-left: 10px;"> <img src="USERPIC2" style="height: 50px; width: 50px; padding: 2px; opacity: .6; border: 1px solid #2a3330; margin: 1px;"> <img src="USERPIC3" style="height: 50px; width: 50px; padding: 2px; opacity: .6; border: 1px solid #2a3330; margin: 1px;"> <img src="USERPIC4" style="height: 50px; width: 50px; padding: 2px; background-color: #e9e395;opacity: 1; border: 1px solid #e9e395; box-shadow: 1px 1px 20px #e9e395; margin: 1px;"> <img src="USERPIC5" style="height: 50px; width: 50px; padding: 2px; opacity: .6; border: 1px solid #2a3330; margin: 1px;"> <!--END USERPIC BAR--!> <!--MENU--!> <div style="margin: 2px;"> <div style="height:20px; width: 272px; margin-left: 28px;border-top: 2px solid transparent; border-bottom: 1px solid transparent;padding: 5px; font-family: palatino linotype, book antiqua, georgia;text-transform:uppercase;font-size: 20px; line-height: 20px"><a href="#1" style="color: #e9e395;text-decoration:none">ATTRIBUTES</a></div></div> <div style="margin: 2px;"> <div style="height:20px; width: 272px; margin-left: 28px;border-top: 2px solid transparent; border-bottom: 1px solid transparent;padding: 5px; font-family: palatino linotype, book antiqua, georgia;text-transform:uppercase;font-size: 20px; line-height: 20px"><a href="#2" style="color: #e9e395;text-decoration:none">PERSONALITY</a></div></div> <div style="margin: 2px;"> <div style="height:20px; width: 272px; margin-left: 28px;border-top: 2px solid transparent; border-bottom: 1px solid transparent;padding: 5px; font-family: palatino linotype, book antiqua, georgia;text-transform:uppercase;font-size: 20px; line-height: 20px"><a href="#3" style="color: #e9e395;text-decoration:none">ABILITIES & SKILLS</a></div></div> <div style="background-color: #150002; width: 305; overflow:hidden"> <div style="margin: 2px;"><div style="float:left; height:34; width: 30px; background-color: #260200; box-shadow: 1px 1px 20px #150002; border-bottom-right-radius: 50px; border-right: 4px solid #680500"></div> <div style="height:20px; width: 300px; background: linear-gradient(to right, #FFF578, transparent);background: -webkit-linear-gradient(left, #FFF578, transparent); background: -moz-linear-gradient(left, #FFF578, transparent);border-top: 2px solid #680500; border-bottom: 1px solid #680500; box-shadow: 1px 1px 20px #680500; padding: 5px; font-family: palatino linotype, book antiqua, georgia;text-transform:uppercase;font-size: 20px; line-height: 20px"><a href="#4" style="color: #150002; text-decoration:none">HISTORY</a></div></div> <div style="margin: 2px;"> <div style="height:20px; width: 272px; margin-left: 28px;border-top: 2px solid transparent; border-bottom: 1px solid transparent;padding: 5px; font-family: palatino linotype, book antiqua, georgia;text-transform:uppercase;font-size: 20px; line-height: 20px"><a href="#5" style="color: #e9e395;text-decoration:none">NOTES</a></div></div> </div> <!--END MENU--!> <!--OOC INFO--!> <center><div style="width: 270px; margin-top: -5px; color: #AAA"> <div style="font-size: 18px; border-bottom: 1px solid #2a3330">OOC</div> Playername • email@email.com • aimname (aim)<br> cdjname (cdj) • Time Zone • PB Name (pb)</div></center> <!--END OOC INFO--!> </div> <!--END LEFT SIDEBAR--!> <div style="width: 550px; height: 550px; background: radial-gradient(farthest-side, #280406, #150002); border: 4px solid #150002; overflow: auto;"> <div style="color: #FFF; font-size: 40px; text-transform:uppercase; border-bottom: 2px solid #680500; line-height: 38px; margin: 10px; margin-top:20px;">HISTORY</div> <div style="padding: 20px; font-family: arial;text-shadow: 1px 1px 10px #e9e395"> HISTORY GOES HERE </div> </div> </div></a> <!--END HISTORY BOX--!> <!--NOTES BOX--!> <a name="5" style="color: #e9e395"> <div style="background-color: #CCC; height: 554px; margin-bottom:4px; width: 886px; padding: 0px;"> <!--LEFT SIDEBAR--!> <div style="float:left; height: 550px; width: 320px; background-color: #150002; padding: 4px;"> <div style="height: 180px; border-top-right-radius: 200px; border-top: 5px solid #e9e395; background:url(BACKGROUNDGIF); background-position: right;"><div style="height: 180px; background: linear-gradient(to bottom, transparent 50%, #150002); background: -webkit-linear-gradient(top, transparent 50%, #150002); background: -moz-linear-gradient(top, transparent 50%, #150002)"></div></div> <div style="margin-left: 20px;margin-top: -20px;font-size: 30px; font-weight:bold; color: #FFF; letter-spacing: -2px; text-shadow: 1px 1px 15px #e9e395">Character Name</div> <div style="margin-left: 20px; margin-bottom: 15px;font-size: 20px; color: #883116; letter-spacing: -1px; font-weight:bold; line-height: 10px;">Rank, Class, or Tagline</div> <!--USERPIC BAR--!> <img src="USERPIC1" style="height: 50px; width: 50px; padding: 2px; opacity: .6; border: 1px solid #2a3330; margin: 1px;margin-left: 10px;"> <img src="USERPIC2" style="height: 50px; width: 50px; padding: 2px; opacity: .6; border: 1px solid #2a3330; margin: 1px;"> <img src="USERPIC3" style="height: 50px; width: 50px; padding: 2px; opacity: .6; border: 1px solid #2a3330; margin: 1px;"> <img src="USERPIC4" style="height: 50px; width: 50px; padding: 2px; opacity: .6; border: 1px solid #2a3330; margin: 1px;"> <img src="USERPIC5" style="height: 50px; width: 50px; padding: 2px; background-color: #e9e395;opacity: 1; border: 1px solid #e9e395; box-shadow: 1px 1px 20px #e9e395; margin: 1px;"> <!--END USERPIC BAR--!> <!--MENU--!> <div style="margin: 2px;"> <div style="height:20px; width: 272px; margin-left: 28px;border-top: 2px solid transparent; border-bottom: 1px solid transparent;padding: 5px; font-family: palatino linotype, book antiqua, georgia;text-transform:uppercase;font-size: 20px; line-height: 20px"><a href="#1" style="color: #e9e395;text-decoration:none">ATTRIBUTES</a></div></div> <div style="margin: 2px;"> <div style="height:20px; width: 272px; margin-left: 28px;border-top: 2px solid transparent; border-bottom: 1px solid transparent;padding: 5px; font-family: palatino linotype, book antiqua, georgia;text-transform:uppercase;font-size: 20px; line-height: 20px"><a href="#2" style="color: #e9e395;text-decoration:none">PERSONALITY</a></div></div> <div style="margin: 2px;"> <div style="height:20px; width: 272px; margin-left: 28px;border-top: 2px solid transparent; border-bottom: 1px solid transparent;padding: 5px; font-family: palatino linotype, book antiqua, georgia;text-transform:uppercase;font-size: 20px; line-height: 20px"><a href="#3" style="color: #e9e395;text-decoration:none">ABILITIES & SKILLS</a></div></div> <div style="margin: 2px;"> <div style="height:20px; width: 272px; margin-left: 28px;border-top: 2px solid transparent; border-bottom: 1px solid transparent;padding: 5px; font-family: palatino linotype, book antiqua, georgia;text-transform:uppercase;font-size: 20px; line-height: 20px"><a href="#4" style="color: #e9e395;text-decoration:none">HISTORY</a></div></div> <div style="background-color: #150002; width: 305; overflow:hidden"> <div style="margin: 2px;"><div style="float:left; height:34; width: 30px; background-color: #260200; box-shadow: 1px 1px 20px #150002; border-bottom-right-radius: 50px; border-right: 4px solid #680500"></div> <div style="height:20px; width: 300px; background: linear-gradient(to right, #FFF578, transparent);background: -webkit-linear-gradient(left, #FFF578, transparent); background: -moz-linear-gradient(left, #FFF578, transparent);border-top: 2px solid #680500; border-bottom: 1px solid #680500; box-shadow: 1px 1px 20px #680500; padding: 5px; font-family: palatino linotype, book antiqua, georgia;text-transform:uppercase;font-size: 20px; line-height: 20px"><a href="#5" style="color: #150002; text-decoration:none">NOTES</div></div> </div> <!--END MENU--!> <!--OOC INFO--!> <center><div style="width: 270px; margin-top: -5px; color: #AAA"> <div style="font-size: 18px; border-bottom: 1px solid #2a3330">OOC</div> Playername • email@email.com • aimname (aim)<br> cdjname (cdj) • Time Zone • PB Name (pb)</div></center> <!--END OOC INFO--!> </div> <!--END LEFT SIDEBAR--!> <div style="width: 550px; height: 550px; background: radial-gradient(farthest-side, #280406, #150002); border: 4px solid #150002; overflow: auto;"> <div style="color: #FFF; font-size: 40px; text-transform:uppercase; border-bottom: 2px solid #680500; line-height: 38px; margin: 10px; margin-top:20px;">NOTES</div> <div style="padding: 20px; font-family: arial; color: #e9e395; text-shadow: 1px 1px 10px #e9e395"> NOTES GO HERE </div> </div> </div></a> <!--END NOTES BOX--!> <!--END CONTENT BOX--!> </div> <!--BOTTOM BORDER SCOOPS--!> <div style="float:left; width:30px; height: 30px; background-color: #FFF; border-radius: 100px; border-right: 4px solid #680500; margin-right: -25px; margin-top: -25px; transform:rotate(300deg); -webkit-transform:rotate(300deg)"></div> <div style="float:right; width:30px; height: 30px; background-color: #FFF; border-radius: 100px; border-right: 4px solid #680500; margin-left: -25px; margin-top: -25px; transform:rotate(200deg); -webkit-transform:rotate(200deg)"></div> <!--END BORDER SCOOPS--!> </td></tr></table> <div style="font-face:arial; font-size:9px; letter-spacing: 3px; text-transform:uppercase">code by wearestardust @ <a href="http://supersuits.insanejournal.com" style="text-decoration:none; color: #680500">supersuits</a></div> </center></lj-raw>

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

2. Replace BACKGROUNDGIF with a gif or other image of your choice. You may have to fiddle with background-position to get it positioned the way you want; this section of code appears 5 times, so using find/replace in Notepad is good.

3. Replace USERPIC1, USERPIC2, USERPIC3, USERPIC4, and USERPIC5 with userpics or other square images of your choice. Each one appears 5 times, so using find/replace in Notepad is a good idea for this too!

4. Find/Replace is ALSO useful for filling in the sidebar. This design is a little funky in that you DO have to make sure you fill it in for each mini-window, so the phrases you want to search for are: Character Name, Rank, Class, or Tagline, and then everything that's in the OOC box. In the code, there are hidden markers for sections that are pretty clearly blocked out. Fill in "OOC INFO" once, then copy/paste the code every time you see "OOC INFO/END OOC INFO" (it appears 5 times).

5. Fill it in! I think the places for content, which say ____ GOES HERE, should be pretty easy to find. This is in lj-raw format, so you need to BR your line breaks.

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