InsaneJournal

Here's a new character roster! I designed it because I wanted a layout that made use of big pretty images, but also had a lot of information at the same time. So, you can click on the "more info" button and open up for detailed information about the character.

It also has minor use of RGBA color codes rather than hex codes, in order to get a cool transparency effect.

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

#000 #FFF #0C262E #D9DEDE rgba(13,47,59,.8)

TEMPLATE →
<lj-raw><center><lj-cut text=""> <div style="width: 950px; margin-top: 80px; padding: 10px;background:linear-gradient(top, #D9DEDE, transparent); background:-webkit-linear-gradient(top, #D9DEDE, transparent); background:-moz-linear-gradient(top, #D9DEDE, transparent); border-top-right-radius: 10px; border-top-left-radius: 10px"> <a href="#name6a" style="margin-top:-70px; display:inline-block; text-decoration:none; color: #000; border: 10px solid #FFF; height: 100px; width: 100px; background-color: #FFF; border-top-left-radius: 100%; border-bottom-left-radius:100%; border-top-right-radius: 100%; border-bottom-right-radius: 100%; transform:rotate(-45deg); -moz-transform:rotate(-45deg); -webkit-transform:rotate(-45deg)"><img src="TOPSQUAREIMG" style="height: 100px; width: 100px; transform:rotate:(45deg); -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); border-radius:100%"></a> <div style="font-family: palatino linotype, georgia; font-style:italic; font-weight:bold; font-size: 70px; letter-spacing: -5px; margin-top: -10px; line-height: 70px; border-bottom: 2px solid #AAA; color: #0C262E; text-shadow: 1px 1px 1px #FFF">character roster</div> <div style="font-family:arial; font-size: 9px; letter-spacing: 2px; margin-bottom: 10px; margin-top: 2px; color: #0C262E">NAME • EMAIL@EMAIL.COM • AIM NAME</div> <!--NAME1; COPY/PASTE THIS SECTION EACH TIME YOU WANT TO ADD A CHARACTER. MAKE SURE YOU CHANGE YOUR ANCHORS/ANCHOR LINKS IN EACH SECTION TO "NAMEA" AND "NAMEB"--> <div style="display:inline-block; width: 300px; height: 500px; background:url(BACKGROUNDIMG); margin: 2px; overflow:hidden;"> <!--YOU MAY NEED TO ADD/PLAY WITH BACKGROUND-SIZE AND BACKGROUND-POSITION TO ADJUST EACH IMAGE TO YOUR LIKING--> <a name="name1a"></a><div style="width: 280px; height: 520px; padding: 10px; background:linear-gradient(top, transparent, #0C262E); background:-moz-linear-gradient(top, transparent, #0C262E); background:-webkit-linear-gradient(top, transparent, #0C262E)"><div style="height: 280px"></div> <div style="font-family:palatino linotype, georgia; font-size: 30px; letter-spacing: 5px; text-shadow: 1px 1px 1px #000; color: #FFF;">NAME</div> <a href="#name1b" style="display:inline-block; text-decoration:none; color: #000; border: 10px solid #FFF; height: 100px; width: 100px; background-color: #FFF; box-shadow: 1px 1px 2px #000; border-top-left-radius: 100%; border-bottom-left-radius:0%; border-top-right-radius: 100%; border-bottom-right-radius: 100%; transform:rotate(-45deg); -moz-transform:rotate(-45deg) -webkit-transform:rotate(-45deg)"><img src="SQAUREIMG1" style="height: 100px; width: 100px; transform:rotate(45deg); -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); border-radius:100%"><div style="margin-left: -60px; font-size:9px;">more info</div></a> </div> <a name="name1b"><div style="width: 280px; height: 520px; padding: 10px; background-color:rgba(13,47,59,.8)"><a href="#name1a" style="margin-top: 30px; display:inline-block; text-decoration:none; color: #000; border: 10px solid #FFF; height: 100px; width: 100px; background-color: #FFF; box-shadow: 1px 1px 2px #000; border-top-left-radius: 100%; border-bottom-left-radius:100%; border-top-right-radius: 0%; border-bottom-right-radius: 100%; transform:rotate(-45deg); -moz-transform:rotate(-45deg); -webkit-transform:rotate(-45deg)"><div style="margin-left: 0px; float:right; margin-top: -10px; font-size:9px;">back</div><img src="SQUAREIMG2" style="height: 100px; width: 100px; transform:rotate:(45deg); -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); border-radius:100%"></a> <div style="height: 310px; margin-top: 10px; margin-left: -10px; margin-right:-10px; overflow:auto; font-family:arial; font-size: 11px; color: #FFF; text-align:justify; padding: 10px;"> <div style="float:right; margin-top: 5px; text-align:right;"><span style="font-size: 20px; line-height: 10px; font-family:palatino linotype, palatino, georgia; text-transform:uppercase; letter-spacing: -1px;">CHARACTER NAME</span><br> <span style="font-size: 9px">CODENAME/SUBTITLE • MORE SUBTITLE</span></div> <table align="center" style="width: 100%; font-size: 11px; color: #FFF; padding: 5px;"> <tr><td valign="top" style="width: 100px; opacity: .5">JOURNAL.</td><td><a href="http://USERNAME.insanejournal.com" style="color: #AAA; text-decoration:none">username</a></td></tr> <tr><td valign="top" style="opacity: .5">PB.</td><td>PB Name</td></tr> <tr><td valign="top" style="opacity: .5">BIRTHDATE.</td><td>Month 00, 0000</td></tr> <tr><td valign="top" style="opacity: .5">OCCUPATION.</td><td>Occupation</td></tr> <tr><td valign="top" style="opacity: .5">LOCATION.</td><td>Address</td></tr> <tr><td valign="top" style="opacity: .5">DATING STATUS.</td><td>Marital Status</td></tr> <!--CHANGE OR ADD MORE CATEGORIES TO THE TABLE AS YOU SEE FIT--> </table> <i>Blurb, description, and other notes go here.</i> </div> </div> </div> <!--END NAME1--> <div style="font-family:arial; font-size: 9px; letter-spacing: 1px; text-align:center; border-top: 2px solid #AAA; margin-top:5px; padding-top: 5px;">"ENVELOPE" CODE BY WEARESTARDUST AT <a href="http://supersuits.insanejournal.com" style="text-decoration:none; color: #0C262E">SUPERSUITS</a></div> </div> </lj-cut></center></lj-raw>

instructions→

1. Copy/paste the code into your entry.
2. Replace "TOPSQAUREIMG" with an image of your choosing. I used a userpic, but a .GIF also works!
3. The template has the coding for one character. For each new character, copy/paste what's marked in the code (it's clearly labeled! :) ), and change all anchor links to match, such as castiela and castielb for the two different panels.
4. Replace "BACKGROUNDIMG" with a large image of your choosing. The best ones for this are at least 500px tall. You may need to add/fiddle with background-position and background-size to make the image sit where you want it to. Here's a tutorial!.
5. Replace "SQUAREIMG1" and "SQUAREIMG2" with square images, like userpics or a .GIFs, of your choosing (at least 100x100).
6. Change the colors if you like!
7. Fill it in! This is in lj-raw format, so you need to BR your line breaks. Each box has an auto-scroll, so you don't need to worry about keeping everything uniform and can write blurbs or make info tables to your heart's content.
8. Enjoy :)

You're free to edit the colors and alter things as you please, so don't feel like you need to ask! All I ask is that you keep credit 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