InsaneJournal

Tweak says, "Your mother shaves penguins!"

bear (morethancostume) wrote,
@ 2015-06-02 20:36:00

Entry tags:

code: character profile

Bio Sheet: Night Vale

Full Name

Full Name	Full Name
Nickname	Nickname Nickname
Fandom	Fandom
Canon Point	Canon Point
Age	##
Date of Birth	Month ##, ####
Sign	Sign
Residence	Residence
Occupation	Occupation
Orientation	Orientation
Dating Status	Partner
Mother	Mother
Father	Father
Extended Family	Relative Relative
Height	#'#"
Build	Build
Hair	Hair Color
Eyes	Eye Color
Tattoos	Tattoos
Scars	Scars

Personality goes here.

☾ Talent
Talent description goes here.

History goes here.

☾ Note here.

Hover over pictures for a description of the relationship.

QUOTE HERE

ooc: player, timezone, aim name (aim), pb (pb). code by morethancostume

the code

<lj-raw><center><lj-cut text="LJCUT TEXT">
<div style="width:750px;height:630px;background:#993b8f;color:#fff;border:2px solid #241f20;font-family: Calibri,Candara,Segoe,'Segoe UI',Optima,Arial,sans-serif;">
<div style="width:730px;height:120px;font-size:70px;background:url('http://i.imgur.com/0IyRUPz.jpg') right no-repeat;text-align:left;padding:30px 0px 0px 20px;text-shadow:5px 5px 5px #6a2460, 10px 10px 10px #6a2460, 5px 5px 5px #fff;">

Full Name

</div>

<div style="width:750px;height:400px;overflow:hidden;font-size:13px;letter-spacing:1px;">

<a name="1"></a><div style="width:750px;height:400px;background:url('http://i.imgur.com/dpazd7B.jpg') no-repeat;">

<div style="width:390px;height:340px;float:left;margin:25px 0px 0px 50px;border:1px solid #6a2460;text-align:justify;padding:5px;background:rgba(106,36,96,0.5);"><div style="width:380px;height:340px;overflow:auto;padding-right:10px;">

<table style="width:365px;font-family: Calibri,Candara,Segoe,'Segoe UI',Optima,Arial,sans-serif;color:#fff;font-size:13px;letter-spacing:0.5px;">
<tr><td valign="top" style="width:150px;opacity:0.8;">Full Name</td><td>
	Full Name
</td></tr><tr><td valign="top" style="opacity:0.8;">Nickname</td><td>
	Nickname<br>
	Nickname<br><br>
</td></tr><tr><td valign="top" style="opacity:0.8;">Fandom</td><td>
	Fandom
</td></tr><tr><td valign="top" style="opacity:0.8;">Canon Point</td><td>
	Canon Point<br><br>
</td></tr><tr><td valign="top" style="opacity:0.8;">Age</td><td>
	##
</td></tr><tr><td valign="top" style="opacity:0.8;">Date of Birth</td><td>
	Month ##, ####
</td></tr><tr><td valign="top" style="opacity:0.8;">Sign</td><td>
	Sign<br><br>
</td></tr><tr><td valign="top" style="opacity:0.8;">Residence</td><td>
	Residence
</td></tr><tr><td valign="top" style="opacity:0.8;">Occupation</td><td>
	Occupation<br><br>
</td></tr><tr><td valign="top" style="opacity:0.8;">Orientation</td><td>
	Orientation
<tr><td valign="top" style="opacity:0.8;">Dating Status</td><td>
	Partner<br><br>
</td></tr><tr><td valign="top" style="opacity:0.8;">Mother</td><td>
	Mother
</td></tr><tr><td valign="top" style="opacity:0.8;">Father</td><td>
	Father
</td></tr><tr><td valign="top" style="opacity:0.8;">Extended Family</td><td>
	Relative<br>
	Relative<br><br>
</td></tr><tr><td valign="top" style="opacity:0.8;">Height</td><td>
	#'#"
</td></tr><tr><td valign="top" style="opacity:0.8;">Build</td><td>
	Build
</td></tr><tr><td valign="top" style="opacity:0.8;">Hair</td><td>
	Hair Color
</td></tr><tr><td valign="top" style="opacity:0.8;">Eyes</td><td>
	Eye Color<br><br>
</td></tr><tr><td valign="top" style="opacity:0.8;">Tattoos</td><td>
	Tattoos
</td></tr><tr><td valign="top" style="opacity:0.8;">Scars</td><td>
	Scars
</td></tr></table>

</div></div>

<img src="GIFURL1" style="width:200px;height:210px;float:left;margin:25px 0px 13px 50px;border:5px solid #993b8f;box-shadow:0px 0px 0px 1px #6a2460;">

<div style="width:200px;height:120px;float:left;margin:0px 0px 0px 56px;font-size:12px;line-height:18px;">
<a href="#1" style="text-decoration:none;color:#6a2460;"><div style="width:100px;height:20px;background:#fff;margin-bottom:5px;font-weight:bold;">Basics</div></a>
<a href="#2" style="text-decoration:none;color:#fff;"><div style="width:100px;height:20px;background:#6a2460;margin-bottom:5px;">Personality</div></a>
<a href="#3" style="text-decoration:none;color:#fff;"><div style="width:100px;height:20px;background:#6a2460;margin-bottom:5px;">Talents</div></a>
<a href="#4" style="text-decoration:none;color:#fff;"><div style="width:100px;height:20px;background:#6a2460;margin-bottom:5px;">History</div></a>
<a href="#5" style="text-decoration:none;color:#fff;"><div style="width:100px;height:20px;background:#6a2460;margin-bottom:5px;">Notes + Lines</div></a>
</div>
</div>

<a name="2"></a><div style="width:750px;height:400px;background:url('http://i.imgur.com/PsHG8ws.jpg') no-repeat;">

<div style="width:390px;height:340px;float:left;margin:25px 0px 0px 50px;border:1px solid #6a2460;text-align:justify;padding:5px;background:rgba(106,36,96,0.5);"><div style="width:380px;height:340px;overflow:auto;padding-right:10px;text-indent:20px;">

Personality goes here.<p>

</div></div>

<img src="GIFURL2" style="width:200px;height:210px;float:left;margin:25px 0px 13px 50px;border:5px solid #993b8f;box-shadow:0px 0px 0px 1px #6a2460;">

<div style="width:200px;height:120px;float:left;margin:0px 0px 0px 56px;font-size:12px;line-height:18px;">
<a href="#1" style="text-decoration:none;color:#fff;"><div style="width:100px;height:20px;background:#6a2460;margin-bottom:5px;">Basics</div></a>
<a href="#2" style="text-decoration:none;color:#6a2460;"><div style="width:100px;height:20px;background:#fff;margin-bottom:5px;font-weight:bold;">Personality</div></a>
<a href="#3" style="text-decoration:none;color:#fff;"><div style="width:100px;height:20px;background:#6a2460;margin-bottom:5px;">Talents</div></a>
<a href="#4" style="text-decoration:none;color:#fff;"><div style="width:100px;height:20px;background:#6a2460;margin-bottom:5px;">History</div></a>
<a href="#5" style="text-decoration:none;color:#fff;"><div style="width:100px;height:20px;background:#6a2460;margin-bottom:5px;">Notes + Lines</div></a>
</div>
</div>

<a name="3"></a><div style="width:750px;height:400px;background:url('http://i.imgur.com/eNaocBQ.jpg') no-repeat;">

<div style="width:390px;height:340px;float:left;margin:25px 0px 0px 50px;border:1px solid #6a2460;text-align:justify;padding:5px;background:rgba(106,36,96,0.5);"><div style="width:380px;height:340px;overflow:auto;padding-right:10px;text-indent:20px;">

☾ <b>Talent</b><br>
	Talent description goes here.<p>

</div></div>

<img src="GIFURL3" style="width:200px;height:210px;float:left;margin:25px 0px 13px 50px;border:5px solid #993b8f;box-shadow:0px 0px 0px 1px #6a2460;">

<div style="width:200px;height:120px;float:left;margin:0px 0px 0px 56px;font-size:12px;line-height:18px;">
<a href="#1" style="text-decoration:none;color:#fff;"><div style="width:100px;height:20px;background:#6a2460;margin-bottom:5px;">Basics</div></a>
<a href="#2" style="text-decoration:none;color:#fff;"><div style="width:100px;height:20px;background:#6a2460;margin-bottom:5px;">Personality</div></a>
<a href="#3" style="text-decoration:none;color:#6a2460;"><div style="width:100px;height:20px;background:#fff;margin-bottom:5px;font-weight:bold;">Talents</div></a>
<a href="#4" style="text-decoration:none;color:#fff;"><div style="width:100px;height:20px;background:#6a2460;margin-bottom:5px;">History</div></a>
<a href="#5" style="text-decoration:none;color:#fff;"><div style="width:100px;height:20px;background:#6a2460;margin-bottom:5px;">Notes + Lines</div></a>
</div>
</div>

<a name="4"></a><div style="width:750px;height:400px;background:url('http://i.imgur.com/ohh29TW.jpg') no-repeat;">

<div style="width:390px;height:340px;float:left;margin:25px 0px 0px 50px;border:1px solid #6a2460;text-align:justify;padding:5px;background:rgba(106,36,96,0.5);"><div style="width:380px;height:340px;overflow:auto;padding-right:10px;text-indent:20px;">

History goes here.<p>

</div></div>

<img src="GIFURL4" style="width:200px;height:210px;float:left;margin:25px 0px 13px 50px;border:5px solid #993b8f;box-shadow:0px 0px 0px 1px #6a2460;">

<div style="width:200px;height:120px;float:left;margin:0px 0px 0px 56px;font-size:12px;line-height:18px;">
<a href="#1" style="text-decoration:none;color:#fff;"><div style="width:100px;height:20px;background:#6a2460;margin-bottom:5px;">Basics</div></a>
<a href="#2" style="text-decoration:none;color:#fff;"><div style="width:100px;height:20px;background:#6a2460;margin-bottom:5px;">Personality</div></a>
<a href="#3" style="text-decoration:none;color:#fff;"><div style="width:100px;height:20px;background:#6a2460;margin-bottom:5px;">Talents</div></a>
<a href="#4" style="text-decoration:none;color:#6a2460;"><div style="width:100px;height:20px;background:#fff;margin-bottom:5px;font-weight:bold;">History</div></a>
<a href="#5" style="text-decoration:none;color:#fff;"><div style="width:100px;height:20px;background:#6a2460;margin-bottom:5px;">Notes + Lines</div></a>
</div>
</div>

<a name="5"></a><div style="width:750px;height:400px;background:url('http://i.imgur.com/0mYHskT.jpg') no-repeat;">

<div style="width:390px;height:340px;float:left;margin:25px 0px 0px 50px;border:1px solid #6a2460;text-align:justify;padding:5px;background:rgba(106,36,96,0.5);"><div style="width:380px;height:340px;overflow:auto;padding-right:10px;text-indent:20px;">

☾ Note here.<p>

<hr width="50%">
<div style="width:100%;text-align:center;font-size:10px;margin-bottom:5px;">Hover over pictures for a description of the relationship.</div>

</div></div>

<img src="GIFURL5" style="width:200px;height:210px;float:left;margin:25px 0px 13px 50px;border:5px solid #993b8f;box-shadow:0px 0px 0px 1px #6a2460;">

<div style="width:200px;height:120px;float:left;margin:0px 0px 0px 56px;font-size:12px;line-height:18px;">
<a href="#1" style="text-decoration:none;color:#fff;"><div style="width:100px;height:20px;background:#6a2460;margin-bottom:5px;">Basics</div></a>
<a href="#2" style="text-decoration:none;color:#fff;"><div style="width:100px;height:20px;background:#6a2460;margin-bottom:5px;">Personality</div></a>
<a href="#3" style="text-decoration:none;color:#fff;"><div style="width:100px;height:20px;background:#6a2460;margin-bottom:5px;">Talents</div></a>
<a href="#4" style="text-decoration:none;color:#fff;"><div style="width:100px;height:20px;background:#6a2460;margin-bottom:5px;">History</div></a>
<a href="#5" style="text-decoration:none;color:#6a2460;"><div style="width:100px;height:20px;background:#fff;margin-bottom:5px;font-weight:bold;">Notes + Lines</div></a>
</div>
</div>

</div>

<div style="width:750px;height:80px;background:#241f20;font-size:50px;letter-spacing:-3px;"><div style="text-shadow:0px 0px 10px #241f20, 0px 0px 10px #241f20, 0px 0px 20px #fff;">

QUOTE HERE

</div><span style="font-size:11px;letter-spacing:0.5px;float:right;margin-right:5px;font-style:italic;">

ooc: player, timezone, aim name (aim), pb (pb).

code by <a href="http://morethancostume.insanejournal.com/" style="text-decoration:none;font-style:normal;color:#993b8f;">morethancostume</a></span>
</div>
</div>
</lj-cut></center></lj-raw>

the instructions

This is an unusual one for me since it's so specific to a particular fandom: the wonderful, creepy, amazing Welcome to Night Vale! With some recoloring and image swaps, you could use it for another fandom, but why would you want to? All hail the glow cloud.

I've embedded labels in the code to help you out. It should be fairly simple to navigate. For the most part, any text you need to change is easy to find. Use the  in the code to find your way. Additionally, be sure to find/replace:

LJCUT TEXT
GIFURL1
GIFURL2
GIFURL3
GIFURL4
GIFURL5
(all gif dimensions are 200x210)

You might need to change the color of any links you add, depending on where you put them. Instead of a normal <a href=""></a>, be sure to use <a href="" style="color:#;"></a> and pick an appropriate color.

BONUS: If you like this code, be sure to check out the matching Night Vale - OOC Contact design. It was also designed to match a fabulous journal layout by Tessisamess.

CREDIT: Please be sure to leave the credit tag in place. Comments are always appreciated. Enjoy!

I don't recommend changing colors, since they're matched to the background images, but if you want to swap any out, here they are:

#6a2460

#993b8f

#241f20

#FFF

If you change the dark purple to something else, you'll also need to find and replace rgba(106,36,96,0.5) with a new RGBA code that matches your new color. I use this site to generate that code. Keeping the last number as 0.5 will maintain the transparency.

In the event that you want to swap out any of the images, here's a key:
http://i.imgur.com/0IyRUPz.jpg - Eye
http://i.imgur.com/dpazd7B.jpg - Power Lines
http://i.imgur.com/PsHG8ws.jpg - Water Tower
http://i.imgur.com/eNaocBQ.jpg - Pyramid
http://i.imgur.com/ohh29TW.jpg - Radio Tower
http://i.imgur.com/0mYHskT.jpg - Glow Cloud (all hail)
http://i.imgur.com/JNYZUvr.png - Coming Soon