InsaneJournal

Tweak says, "Soooo cool"

patron saint of self-injury (ex_pendragon394) wrote in rp_tutorials,
@ 2010-08-03 21:08:00

I've been a long time lurker/admirer of this community but have never really had anything to contribute, however after glancing at this entry and falling in love with the layout I decided to use it for myself and immediately had someone ask how. So I've made a blank version for whoever wants to use it.

Please note: You do not have to credit me for this. This wasn't my original code, all I did was clean it up and change the colors, and please if you use it feel free to edit it however you see fit. If you do feel so inclined to credit someone you can either link back to this entry so others can find it, or credit

vivyan for the original coding. I hope this is helpful.

LIVE PREVIEW

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>TITLE HERE</title>
<style> 
 
a:link, a:visited {
	color: #75B5CB;
	text-transform: uppercase;
	font-size: 7pt;
	font-weight: bold;
}
 
body {
	background-image: url();
	background-color: #C0C0C0;
}
 
body, td {
	font-family: tahoma;
	font-size: 8pt;
	line-height: 9pt;
	text-align: justify;
	color: #787878;
}

hr {
	height: 1px;
	border-top: 1px;
	width: 100%;
	color: #787878;
}
 
a {
	color: #75B5CB;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 7pt;
	font-weight: bold;
}
  
.title {
	font-size: 36pt; 
	line-height: 15pt; 
	letter-spacing: -4px;
	font-family: garamond; 
	font-weight: normal;
	color: #75B5CB;
	text-transform: lowercase;
}
 
.subtitle {
	font-size: 16px;
	line-height: 9px;
	font-family: georgia;
	font-weight: lighter;
	letter-spacing: 3pt;
	text-transform: lowercase;
	color: #666666;
	background-color: #DCDDE1;
	display: block;
	font-style: italic;
}

</style>
</head>

<table width="695" bgcolor="#C0C0C0">
<tbody>
<tr>
<td valign="top">
<table border="0" width="365">
<tbody>
<tr>
<td bgcolor="#E9EAEE" valign="top"> 
<p align="right">
<span class="title">CHARACTER NAME</span>
<table width="358" border="0" cellspacing="5" cellpadding="5">
<tr> 
<td>
<p align="justify">
<span class="subtitle">BASIC INFORMATION</span><br>
<b>FULL NAME:</b> Name goes here.<br>
<b>DATE OF BIRTH & AGE:</b> Date & age go here.<br>
<b>APPARENT AGE:</b> Apparent age goes here.<br>
<b>PLACE OF BIRTH:</b> Place of birth goes here.<br>
<b>SPECIES:</b> Species goes here.
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table> 
 
<br> 
 
<table border="0" width="365">
<tbody>
<tr>
<td bgcolor="#E9EAEE" valign="top"> 
<div align="right">
<span class="title">PROFILE</span><br> 
<div align="justify"><font style="font-family: tahoma; font-size: 8pt; letter-spacing: 1px;"> 
<table width="358" border="0" cellspacing="5" cellpadding="5">
<tr>
<td>
<p align="justify">
<span class="subtitle">PERSONALITY</span><br>
Text goes here.
</td>
</tr>
<tr> 
<td>
<p align="justify">
<span class="subtitle">BIOGRAPHY</span><br>
Text goes here. 
</td>
</tr>
</table>
</font>
<p></p>
</div>
</div>
</td>
</tr>
</tbody>
</table> 
 
<br>

<table border="0" width="365">
<tbody>
<tr>
<td bgcolor="#E9EAEE" valign="top">
<table width="358" border="0" cellspacing="5" cellpadding="5">
<tr>
<td bgcolor="#DCDDE1"> <a href="URL HERE">« Community Link Here</a></td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td valign="top">
<table border="0" width="305">
<tbody>
<tr>
<td bgcolor="#E9EAEE" valign="top"> <img src="IMAGE%20URL%20HERE" width="300" height="430"> 
</td>
</tr>
</tbody>
</table> 
 
<br>

<table border="0" width="305">
<tbody>
<tr>
<td valign="top" bgcolor="#E9EAEE"> 
<div align="right">
<span class="title">STORYLINES</span>
<table width="300" border="0" cellspacing="5" cellpadding="5">
<tr>
<td> <p align="justify"> <span class="subtitle">CHARACTER NAME</span><br>
<a href="JOURNAL LINK HERE"><img src="IMAGE%20URL%20HERE" width="65" height="65" border="0" align="left"></a> 
Text goes here.</td>
</tr>
<tr>
<td> <p align="justify"> <span class="subtitle">CHARACTER NAME</span><br>
<a href="JOURNAL LINK HERE"><img src="IMAGE%20URL%20HERE" width="65" height="65" border="0" align="left"></a> 
Text goes here.</td>
</tr>
<tr>
<td> <p align="justify"> <span class="subtitle">CHARACTER NAME</span><br>
<a href="JOURNAL LINK HERE"><img src="IMAGE%20URL%20HERE" width="65" height="65" border="0" align="left"></a> 
Text goes here.</td>
</tr>
<tr>
<td> <p align="justify"> <span class="subtitle">CHARACTER NAME</span><br>
<a href="JOURNAL LINK HERE"><img src="IMAGE%20URL%20HERE" width="65" height="65" border="0" align="left"></a> 
Text goes here.</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>

<br>

<table border="0" width="305">
<tbody>
<tr>
<td bgcolor="#E9EAEE" valign="top"> 
<p align="right">
<span class="title">OOC INFO</span>
<table width="300" border="0" cellspacing="5" cellpadding="5">
<tr>
<td> <p align="justify"> <span class="subtitle">PLAYER CONTACT</span><br>
<b>TIMEZONE:</b> Timezone.<br>
<b>AIM OR THREAD:</b> Playing preference here.<br>
<b>CONTACT:</b> Contact info here.<br>
<b>JOURNAL & AIM:</b> <a href="JOURNAL URL HERE">username</a> & screen 
name.<br>
<b>PLAYED BY:</b> Played by goes here.
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

</center>

Obviously you will need to host this on an external server for which I recommend either SCRIBBLD or RIPWAY, though I have found Scribbld to be a bit more reliable.

(Post a new comment)

	graciebird 2010-08-04 02:28 am UTC (link)
	This is great, thank you! (Reply to this) (Thread)

	ex_pendragon394 2010-08-04 03:23 am UTC (link)
	You're welcome! (Reply to this) (Parent)

	(Anonymous) 2010-08-04 02:29 am UTC (link)
	freewebs.com is a splendid hosting site as well. All you have to do is go into your settings and downgrade into HTML. It never failed me or went down. (Reply to this) (Thread)

	ex_pendragon394 2010-08-04 03:23 am UTC (link)
	I'll have to check that out. Thank you! (Reply to this) (Parent)

(Deleted post)

ex_pendragon394
2010-08-04 06:20 am UTC (link)
lmao, and Colin is in the live preview. I thought the boys would make excellent models. I'm glad you like!
(Reply to this) (Parent)

hawksworth
2010-08-06 05:42 am UTC (link)
Awesome layout, EVEN MORE AWESOME PEOPLE IN SAID LAYOUT. Definitely putting it to good use. THANKS!
(Reply to this)

carternoelle
2010-08-06 06:18 pm UTC (link)
This is amazing! I'm using a different version, but I think i might switch and use this one. <3
(Reply to this)

aprilwalker
2010-08-09 10:15 am UTC (link)
I'm planning to use this for thewizards. Username is the same as it is here. <3
(Reply to this)

endernorth
2010-08-11 03:50 am UTC (link)
Thank you a million times over. I need pretty much this exact thing, so you are my hero.
(Reply to this)

irish_cdj
2010-08-13 11:05 am UTC (link)
Totally loving this. :) I seem to be the only one having problems lol. My image is about three pixels too far to the left XD
(Reply to this) (Thread)

ex_pendragon394
2010-08-13 05:26 pm UTC (link)
What size did you make your image?
(Reply to this) (Parent) (Thread)

irish_cdj
2010-08-13 05:58 pm UTC (link)
300 x 430. Its that whole section, not just the image but the section around it lol.

http://irishcss.webs.com/jo.htm
(Reply to this) (Parent) (Thread)

ex_pendragon394
2010-08-13 06:08 pm UTC (link)
It looks like the whole section just scooted over. Let me play around with it a bit and see if I can't figure out how to get that straightened out.
(Reply to this) (Parent) (Thread)

irish_cdj
2010-08-13 06:26 pm UTC (link)
you rock.
(Reply to this) (Parent)

monsterbones
2010-11-29 10:39 pm UTC (link)
This may be a silly question, but I tried adding this code to a style on scribbld and when I hit view, I received this error (I hadn't changed anything, just c&p the code in and saved it): [Scribbld: Bad username, styleid, or style definition]

Do you, or anyone, know why?
(Reply to this) (Thread)

ex_pendragon394
2010-11-30 01:01 am UTC (link)
Can you take a screen cap of where you entered the code?
(Reply to this) (Parent) (Thread)

monsterbones
2010-11-30 07:30 am UTC (link)
Sure. Here you go.
(Reply to this) (Parent) (Thread)

ex_pendragon394
2010-11-30 03:23 pm UTC (link)
I think that's your problem. After you've created your new style, when you go to edit, make sure you're in easy mode rather than raw mode. Then once you have that page open, paste the code in the very last box available and you should be good to go.
(Reply to this) (Parent) (Thread)

monsterbones
2010-11-30 08:36 pm UTC (link)
Ah, thank you! I guess I should have tried that first, haha. :)
(Reply to this) (Parent) (Thread)

ex_pendragon394
2010-11-30 10:39 pm UTC (link)
No problem! Glad I could help.
(Reply to this) (Parent)

onthe_mark
2010-12-17 05:43 am UTC (link)
Ok this might sound stupid of me, but can this be used for an IJ character profile? I've been trying to figure it out and I can't get it to look right.
(Reply to this) (Thread)

ex_pendragon394
2010-12-17 05:52 am UTC (link)
It can but it has to be hosted externally, it can't just be posted into an entry. There's another similar profile layout here however that does not need to be hosted outside of insanejournal.
(Reply to this) (Parent) (Thread)

onthe_mark
2010-12-17 05:53 am UTC (link)
Danke. I was wondering why the blue text and subheadings weren't showing in preview mode...
(Reply to this) (Parent) (Thread)

ex_pendragon394
2010-12-17 06:01 am UTC (link)
It's because of the way it's coded. You could set it up that way, but I sadly no longer have dreamweaver which was kind of crucial to me when I did this because I'm still in the learning stages of using css.
(Reply to this) (Parent)

mitochondrion
2011-03-20 10:11 pm UTC (link)
Thank you very much! Lovely. We're using over at genome_project for our profiles. Just tweaked the color a little bit.
(Reply to this)

just4rpgs
2011-05-19 03:36 am UTC (link)
I've been looking for this code for two weeks... I knew I saw it on here somewhere. Thank you!!!!
(Reply to this)

caprica
2011-07-17 05:08 am UTC (link)
thanks so much for this!
(Reply to this)