InsaneJournal

Tweak says, "Why are there so many RPs?"

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

Entry tags:

!!!templates, !!bios/profiles, #wearestardust

Bio Sheet: Sundrop

character
name

name. Firstname Lastname
codename. Codename
nicknames. Nicknames
age. 00
date of birth. Month 00, 0000
occupation. Occupation
marital status. Marital Status

nationality. Nationality
height. 0'0"
build. Build
hair. Hair
eyes. Eyes
category. Category
category. Category

personality. }

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum lectus feugiat massa imperdiet, vel vehicula felis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at arcu eget lectus suscipit ornare malesuada at orci. Vestibulum eros purus, aliquam id tempus ac, mattis at tortor. Ut id nibh mollis, auctor ligula et, feugiat orci. Fusce iaculis, libero eu aliquam blandit, neque augue tincidunt dolor, aliquam semper urna libero quis eros. Aenean magna est, auctor vitae tristique id, cursus at neque. Nullam in lectus consequat, tempus sapien ut, scelerisque leo. Fusce ante felis, viverra ut elementum eu, blandit ac nisi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam placerat, mauris euismod imperdiet placerat, dolor tellus interdum lectus, blandit viverra est ante non nunc. Phasellus ullamcorper euismod dui eget dapibus. Vestibulum eu ante nulla. Praesent vitae ipsum fermentum, dignissim dui eget, tempus nunc. Donec auctor tortor nec eros vehicula, non sollicitudin nulla tristique. Morbi vestibulum, lectus vel facilisis vestibulum, sem elit ultrices eros, eu hendrerit tellus nunc nec massa.

Sed quis imperdiet neque. Vestibulum dictum felis lacus, ac consectetur elit porttitor et. Donec luctus lorem at mauris ullamcorper, eget elementum neque ornare. Curabitur eu nunc vitae orci tempus eleifend vel at est. Donec malesuada porta velit, at faucibus enim feugiat in. Phasellus cursus turpis nec imperdiet iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc laoreet, justo eget placerat aliquam, libero lacus dictum mauris, nec tincidunt tellus est sed elit. Integer aliquam nulla vitae quam malesuada rhoncus. Curabitur ornare erat quis nisl lacinia aliquam. Fusce sed metus venenatis dolor volutpat luctus sit amet non neque. In at eros dictum, volutpat massa vitae, ornare elit.

abilities+skills. }

history. }

notes. }

• Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum lectus feugiat massa imperdiet, vel vehicula felis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at arcu eget lectus suscipit ornare malesuada at orci. Vestibulum eros purus, aliquam id tempus ac, mattis at tortor. Ut id nibh mollis, auctor ligula et, feugiat orci. Fusce iaculis, libero eu aliquam blandit, neque augue tincidunt dolor, aliquam semper urna libero quis eros. Aenean magna est, auctor vitae tristique id, cursus at neque.

• Nullam in lectus consequat, tempus sapien ut, scelerisque leo. Fusce ante felis, viverra ut elementum eu, blandit ac nisi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam placerat, mauris euismod imperdiet placerat, dolor tellus interdum lectus, blandit viverra est ante non nunc. Phasellus ullamcorper euismod dui eget dapibus. Vestibulum eu ante nulla. Praesent vitae ipsum fermentum, dignissim dui eget, tempus nunc. Donec auctor tortor nec eros vehicula, non sollicitudin nulla tristique. Morbi vestibulum, lectus vel facilisis vestibulum, sem elit ultrices eros, eu hendrerit tellus nunc nec massa.

player+ooc. }

name. Playername
email. email@email.com
aim. aimname
cdj. cdjname
time zone. Time Zone
pb. PB

This is a place for player notes, like wanted lines and other things you might want to make people aware of.

code by wearestardust @ supersuits

bio sheet → sundrop

Still in that coding kick...! Yay colors other than gray and teal, but the yellow's back and I have zero problems with this. :)

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

#2B2B2B #FFF #FFE11F #FFD000 #DBD7BF #F5F3E4

TEMPLATE →

<lj-raw><center><div style="display:inline-block;font-family: arial; line-height: 16px; font-size: 11px; color: #2b2b2b;text-align:justify">

<!--LEFT SIDE--!>
<div style="float:left;font-family:georgia; font-size: 100px; color: #FFE11F; letter-spacing: -9px; text-align:right; line-height:55px"><span style="font-style:italic; color:#DBD7BF">character</span><br>
name<br>
<div style="border-radius: 200px; border-top-right-radius: 0px; background-color: #DBD7BF; border:10px solid #DBD7BF;float:right; margin-top:15px;margin-right:-10px"><img src="SQUAREGIF" style="height:140; width: 140; border-radius: 200px;"></div>
</div>

<!--RIGHT SIDE--!>

<!--HEADER BLOCK--!>
<div>
<div style="display:inline-block; margin-left: 15px; width:550px; height: 106;background-color: #F5F3E4; padding: 10px; margin-bottom:6px; line-height: 15px">

<div style="float:left; display:inline-block;margin-right:10px; border-right: 4px solid #FFE11F; padding-right:10px;">
<span style="float:left; width:85; font-weight:bold">name.</span> Firstname Lastname<br>
<span style="float:left; width:85; font-weight:bold">codename.</span> Codename<br>
<span style="float:left; width:85; font-weight:bold">nicknames.</span> Nicknames<br>
<span style="float:left; width:85; font-weight:bold">age.</span> 00<br>
<span style="float:left; width:85; font-weight:bold">date of birth.</span> Month 00, 0000<br>
<span style="float:left; width:85; font-weight:bold">occupation.</span> Occupation<br>
<span style="float:left; width:85; font-weight:bold">marital status.</span> Marital Status

</div>
<div style="float:left; display:inline-block;">
<span style="float:left; width:85; font-weight:bold">nationality.</span> Nationality<br>
<span style="float:left; width:85; font-weight:bold">height.</span> 0'0"<br>
<span style="float:left; width:85; font-weight:bold">build.</span> Build<br>
<span style="float:left; width:85; font-weight:bold">hair.</span> Hair<br>
<span style="float:left; width:85; font-weight:bold">eyes.</span> Eyes<br>
<span style="float:left; width:85; font-weight:bold">category.</span> Category<br>
<span style="float:left; width:85; font-weight:bold">category.</span> Category

</div>

<div style="float:right; height: 105; margin: -10px; padding: 10px;">
<div style="display:inline-block;width:120; letter-spacing: 2px; text-align:center; text-transform:uppercase; font-size:9px; background-color: #FFD000; padding: 2px; margin-bottom: 2px;"><a href="#1" style="text-decoration:none; color: #FFF">personality</a></div><br>
<div style="display:inline-block;width:120; letter-spacing: 2px; text-align:center; text-transform:uppercase; font-size:9px; background-color: #FFD000; padding: 2px; margin-bottom: 2px;"><a href="#2" style="text-decoration:none; color: #FFF">abilities+skills</a></div><br>
<div style="display:inline-block;width:120; letter-spacing: 2px; text-align:center; text-transform:uppercase; font-size:9px; background-color: #FFD000; padding: 2px; margin-bottom: 2px;"><a href="#3" style="text-decoration:none; color: #FFF">history</a></div><br>
<div style="display:inline-block;width:120; letter-spacing: 2px; text-align:center; text-transform:uppercase; font-size:9px; background-color: #FFD000; padding: 2px; margin-bottom: 2px;"><a href="#4" style="text-decoration:none; color: #FFF">notes</a></div><br>
<div style="display:inline-block;width:120; letter-spacing: 2px; text-align:center; text-transform:uppercase; font-size:9px; background-color: #FFD000; padding: 2px; margin-bottom: 2px;"><a href="#5" style="text-decoration:none; color: #FFF">player+OOC</a></div><br>

</div>
</div>

<!--INFORMATION BLOCKS--!>
<a name="1"></a><div style="display:inline-block;margin-left: 15px; width:550px; height: auto;background-color: #F5F3E4; padding: 10px; margin-bottom: 6px;">

<div style="font-family:arial; letter-spacing: -3px; font-size:40px; line-height: 30px;font-weight:bold; background-color: #DBD7BF; color: #FFF; border-bottom: 5px solid #FFE11F; margin-bottom:10px; padding: 2px; text-align:right; text-transform:lowercase"><span style="margin-right:-25px">personality. <span style="color: #FFE11F; text-shadow: 0px 0px">}</span></span></div>

PERSONALITY GOES HERE

<a name="2"></a>
<div style="font-family:arial; letter-spacing: -3px; font-size:40px; line-height: 30px;font-weight:bold; background-color: #DBD7BF; color: #FFF; border-bottom: 5px solid #FFE11F; margin-top:10px;margin-bottom:10px; padding: 2px; text-align:right; text-transform:lowercase"><span style="margin-right:-25px">abilities+skills. <span style="color: #FFE11F; text-shadow: 0px 0px">}</span></span></div>

ABILITIES GO HERE

<a name="3"></a>
<div style="font-family:arial; letter-spacing: -3px; font-size:40px; line-height: 30px;font-weight:bold; background-color: #DBD7BF; color: #FFF; border-bottom: 5px solid #FFE11F; margin-top:10px;margin-bottom:10px; padding: 2px; text-align:right; text-transform:lowercase"><span style="margin-right:-25px">history. <span style="color: #FFE11F; text-shadow: 0px 0px">}</span></span></div>

HISTORY GOES HERE

<a name="5"></a>
<div style="font-family:arial; letter-spacing: -3px; font-size:40px; line-height: 30px;font-weight:bold; background-color: #DBD7BF; color: #FFF; border-bottom: 5px solid #FFE11F; margin-top:10px;margin-bottom:10px; padding: 2px; text-align:right; text-transform:lowercase"><span style="margin-right:-25px">notes. <span style="color: #FFE11F; text-shadow: 0px 0px">}</span></span></div>

NOTES GO HERE

<a name="4"></a>
<div style="font-family:arial; letter-spacing: -3px; font-size:40px; line-height: 30px;font-weight:bold; background-color: #DBD7BF; color: #FFF; border-bottom: 5px solid #FFE11F; margin-top:10px;margin-bottom:10px; padding: 2px; text-align:right; text-transform:lowercase"><span style="margin-right:-25px">player+ooc. <span style="color: #FFE11F; text-shadow: 0px 0px">}</span></span></div>

<div style="float:left; display:inline-block;margin-right:10px;margin-left: 10px; line-height: 20px; border-right: 4px solid #FFE11F; padding-right:10px;">
<span style="float:left; width:85; font-weight:bold">name.</span> Playername<br>
<span style="float:left; width:85; font-weight:bold">email.</span> email@email.com<br>
<span style="float:left; width:85; font-weight:bold">aim.</span> aimname<br>
<span style="float:left; width:85; font-weight:bold">cdj.</span> cdjname<br>
<span style="float:left; width:85; font-weight:bold">time zone.</span> Time Zone<br>
<span style="float:left; width:85; font-weight:bold">pb.</span> PB

</div>

<div style="float:left; width: 200px; display:inline-block; line-height: 16px; ">
This is a place for player notes, like wanted lines and other things you might want to make people aware of.

</div>

</div></div>
<div style="clear-left; font-family:arial; font-size:9px; letter-spacing: 3px; color: #DBD7BF">code by wearestardust @ <a href="http://supersuits.insanejournal.com" style="text-decoration:none; color: #FFE11F">supersuits</a></div>
</center></lj-raw>

instructions→
1. Copy/paste the code into your entry.
2. Replace SQUAREGIF with, up, a square GIF. For best results without needing to fiddle with the img's style attibutes, this GIF should be at least 140px high and square.
4. Replace OOCUSERPIC with a userpic of your choice.
5. Fill it in! 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

P.S.: VARIANT! At the request of

heartlight, I've made a version with scrolly boxes in order to use this layout for long profiles without walls of text. Same instructions, just copy/paste this code instead:

<lj-raw><center><div style="display:inline-block;font-family: arial; line-height: 16px; font-size: 11px; color: #2b2b2b;text-align:justify">

<!--RIGHT SIDE--!>

<!--HEADER BLOCK--!>
<div>
<div style="display:inline-block; margin-left: 15px; width:550px; height: 106;background-color: #F5F3E4; padding: 10px; margin-bottom:6px; line-height: 15px">

</div>

</div>
</div>

<!--INFORMATION BLOCKS--!>
<a name="1"></a><div style="display:inline-block;margin-left: 15px; width:550px; height: auto;background-color: #F5F3E4; padding: 10px; margin-bottom: 6px;">

PERSONALITY GOES HERE

</div>

ABILITIES GO HERE

</div>

HISTORY GOES HERE

</div>

NOTES GO HERE

</div>

</div>

<div style="float:left; width: 200px; display:inline-block; line-height: 16px; ">
This is a place for player notes, like wanted lines and other things you might want to make people aware of.

</div>

P.P.S.: ANOTHER VARIANT! At the request of

cate, here's a multi-panel layout version of this code, which I'm going to give its own page when I'm not at work! Same colors are in use, etc etc, but instead of making use of multiple windows it has all of the sections open up in the same panel:

<lj-raw><center>
<!--IF YOUR CHARACTER'S NAME IS LONGER THAN THE WIDTH ALLOWS, ADJUST THE WIDTH OF THE TABLE BELOW: --!>
<table style="WIDTH: 950px; font-family:arial; font-size: 11px; color: #2B2B2B; text-align:justify">
<tr><td>
<!--LEFT SIDE--!>
<div style="float:left; font-family:georgia; font-size: 100px; color: #FFE11F; letter-spacing: -9px; text-align:right; line-height:55px"><span style="font-style:italic; color:#DBD7BF">character</span><br>
name<br>
<div style="border-radius: 200px; border-top-right-radius: 0px; background-color: #DBD7BF; border:10px solid #DBD7BF;float:right; margin-top:15px;margin-right:-10px"><img src="SQUAREGIF" style="height:140; width: 140; border-radius: 200px;"></div>
</div>
<!--END LEFT SIDE--!>

<!--HEADER BLOCK--!>
<div style="float:top">
<div style="display:inline-block; margin-left: 15px; width:550px; height: 106;background-color: #F5F3E4; padding: 10px; margin-bottom:6px; line-height: 15px">

</div>

<div style="float:right; height: 105; margin: -10px; padding: 14px;">
<div style="display:inline-block;width:120; opacity: 1; letter-spacing: 2px; text-align:center; text-transform:uppercase; font-size:9px; background-color: #FFD000; padding: 2px; margin-bottom: 2px;"><a href="#1" style="text-decoration:none; color: #FFF">personality</a></div><br>
<div style="display:inline-block;width:120; opacity: .85; letter-spacing: 2px; text-align:center; text-transform:uppercase; font-size:9px; background-color: #FFD000; padding: 2px; margin-bottom: 2px;"><a href="#2" style="text-decoration:none; color: #FFF">abilities+skills</a></div><br>
<div style="display:inline-block;width:120; opacity: .7; letter-spacing: 2px; text-align:center; text-transform:uppercase; font-size:9px; background-color: #FFD000; padding: 2px; margin-bottom: 2px;"><a href="#3" style="text-decoration:none; color: #FFF">history</a></div><br>
<div style="display:inline-block;width:120; opacity: .6;  letter-spacing: 2px; text-align:center; text-transform:uppercase; font-size:9px; background-color: #FFD000; padding: 2px; margin-bottom: 2px;"><a href="#4" style="text-decoration:none; color: #FFF">notes</a></div><br>
<div style="display:inline-block;width:120; opacity: .5; letter-spacing: 2px; text-align:center; text-transform:uppercase; font-size:9px; background-color: #FFD000; padding: 2px; margin-bottom: 2px;"><a href="#5" style="text-decoration:none; color: #FFF">player+OOC</a></div><br>

</div>
</div>
<!--END HEADER BLOCK--!>

<!--MAIN CONTENT--!>
<div style="display:inline-block; margin-left: 15px; width: 570px; height: 400px; background-color: #F5F3E4; overflow: hidden">

<!--PERSONALITY BOX--!>
<a name="1" style="color: #2b2b2b">
<div style="width:570px; height:400px; overflow:auto">

<!--SUBJECT HEADER--!>
<div style="font-family:arial; letter-spacing: -3px; font-size:40px; line-height: 30px;font-weight:bold; background-color: #DBD7BF; color: #FFF; border-bottom: 5px solid #FFE11F; margin-bottom:10px; padding: 2px; text-align:right; text-transform:lowercase"><span style="margin-right:0px">personality.<span style="color: #FFE11F;">}</span></span></div>
<!--END SUBJECT HEADER--!>

PERSONALITY GOES HERE

</div>

</div>
</a>
<!--END PERSONALITY BOX--!>

<!--SKILLS BOX--!>
<a name="2" style="color: #2b2b2b">
<div style="width:570px; height:400px; overflow:auto">

<!--SUBJECT HEADER--!>
<div style="font-family:arial; letter-spacing: -3px; font-size:40px; line-height: 30px;font-weight:bold; background-color: #DBD7BF; color: #FFF; border-bottom: 5px solid #FFE11F; margin-bottom:10px; padding: 2px; text-align:right; text-transform:lowercase"><span style="margin-right:0px">abilities+skills.<span style="color: #FFE11F;">}</span></span></div>
<!--END SUBJECT HEADER--!>

SKILLS GO HERE

</div>

</div>
</a>
<!--END SKILLS BOX--!>

<!--HISTORY BOX--!>
<a name="3" style="color: #2b2b2b">
<div style="width:570px; height:400px; overflow:auto">

<!--SUBJECT HEADER--!>
<div style="font-family:arial; letter-spacing: -3px; font-size:40px; line-height: 30px;font-weight:bold; background-color: #DBD7BF; color: #FFF; border-bottom: 5px solid #FFE11F; margin-bottom:10px; padding: 2px; text-align:right; text-transform:lowercase"><span style="margin-right:0px">history.<span style="color: #FFE11F;">}</span></span></div>
<!--END SUBJECT HEADER--!>

HISTORY GOES HERE

</div>

</div>
</a>
<!--END HISTORY BOX--!>

<!--NOTES BOX--!>
<a name="4" style="color: #2b2b2b">
<div style="width:570px; height:400px; overflow:auto">

<!--SUBJECT HEADER--!>
<div style="font-family:arial; letter-spacing: -3px; font-size:40px; line-height: 30px;font-weight:bold; background-color: #DBD7BF; color: #FFF; border-bottom: 5px solid #FFE11F; margin-bottom:10px; padding: 2px; text-align:right; text-transform:lowercase"><span style="margin-right:0px">notes.<span style="color: #FFE11F;">}</span></span></div>
<!--END SUBJECT HEADER--!>

OTHER NOTES GO HERE

</div>

</div>
</a>
<!--END NOTES BOX--!>

<!--OOC BOX--!>
<a name="5" style="color: #2b2b2b">
<div style="width:570px; height:400px; overflow:auto">

<!--SUBJECT HEADER--!>
<div style="font-family:arial; letter-spacing: -3px; font-size:40px; line-height: 30px;font-weight:bold; background-color: #DBD7BF; color: #FFF; border-bottom: 5px solid #FFE11F; margin-bottom:10px; padding: 2px; text-align:right; text-transform:lowercase"><span style="margin-right:0px">player+ooc.<span style="color: #FFE11F;">}</span></span></div>
<!--END SUBJECT HEADER--!>

PLAYER INFO AND OOC NOTES GO HERE

</div>

</div>
</a>
<!--END OOC BOX--!>

</div>
<!-- END MAIN CONTENT --!>

<div style="float: right; text-align:right; margin-top: 10px; font-size: 9px; letter-spacing: 3px; text-transform: lowercase; color: #2b2b2b">code by wearestardust @ <a href="http://supersuits.insanejournal.com" style="text-decoration:none; color: #FFD000 ">supersuits</a></div>

</td></tr></table></center></lj-raw>

(Post a new comment)

	igotshortshorts 2014-04-04 12:11 pm UTC (link)
	This is amazing. I love it! I'll probably replace my current sheet with this. (Reply to this)

	darkhuntress 2014-04-05 04:27 am UTC (link)
	I just switched a bunch of my bios to this one! Love it! (Reply to this)

	cate 2014-04-18 10:23 pm UTC (link)
	I love the look of this template. I was wondering if it is possible to make it so that each tab opens up a new page, like Iced Pineapple? I've been messing with the code but can't seem to figure it out. (Reply to this) (Thread)

	wearestardust 2014-04-18 10:28 pm UTC (link)
	ooh You know what, that might just be my project for this evening while I have down time at work. Thanks for the suggestion! I'mma do that :) (Reply to this) (Parent) (Thread)

	cate 2014-04-18 10:29 pm UTC (link)
	Hurray! (Reply to this) (Parent) (Thread)

	wearestardust 2014-04-18 10:33 pm UTC (link)
	If I can get it in a way I like it, it should be up later tonight/tomorrow! (Reply to this) (Parent)

	wearestardust 2014-04-19 12:26 am UTC (link)
	Hi! I haven't given the layout its own page yet like I did with the Aviator variation, but if you refresh this page and check out the P.P.S. at the bottom, I've included the code for a multi-panel version for you. :) (Reply to this) (Parent) (Thread)

	cate 2014-04-19 12:34 am UTC (link)
	Ahhh!! You rock! (Reply to this) (Parent) (Thread)

	wearestardust 2014-04-19 12:35 am UTC (link)
	Thank you!! :) Let me know if you have any problems with it! (Reply to this) (Parent)

	kensimont 2014-08-25 03:57 pm UTC (link)
	Once again I used your basic code Here this time! Thanks for awesome code!!! (Reply to this)

	yourbluesea 2015-04-09 02:05 pm UTC (link)
	love this layout, thanks for making it! (Reply to this)

	beatrice 2016-01-12 12:50 am UTC (link)
	Love this, thanks! (Reply to this)