07-08-2012, 02:37 AM
Version 1: Complete Profile
This code is intended to house ALL of your profile information and, consequently, is very bulky. o:
This code is intended to house ALL of your profile information and, consequently, is very bulky. o:
Code:
<style>
td.plainborder table {display:none; }
.row3 {
padding:7px 10px;
font-family:arial, helvetica, sans-serif;
font-size:12px;
line-height:150%;
}
.row3 p {
text-indent:25px;
padding:3px 0;
margin:0;
}
.row3 ul, ol { padding:3px 0; margin:3px 15px; }
.row3 ul li,.row3 ol li {padding:0; margin:5px 0; }
.charicons td { vertical-align:top; }
.charicons td img { padding:0 5px; }
.charicons tr.emp td { text-align:center; }
.floatimg {
float:right;
margin:10px;
}
.floatimg img {
height:120px;
}
.iconimg img {
height:auto;
}
.familytree{
float:right;
border:1px solid #000000;
margin:5px;
}
.famtree img { height: 55px; }
.siehaxTwo { border-collapse:collapse; width:100%; }
.siehaxTwo td { vertical-align:top; border:1px solid black; }
.inventory td {width:80%; }
.siehaxTwo td:first-child {
border-left:0;
width:15%; }
.siehaxTwo tr:first-child td {
border-top:0; }
.siehaxTwo tr:last-child td {
border-bottom:0; }
.siehaxTwo td:last-child {
border-right:0; }
.sieInventory tr td:first-child {
text-align:center; }
.siehaxTwo td.darkrow2 { border-width:1px; border-size:1px; border-color:#000000; border-style:solid none; padding:5px 0; }
.sieInventory td { padding:3px; }
.sizingTwo td { text-align:center; vertical-align:center; padding:2px; }
#navigation { text-align:center; font-size:12px; }
.colorwerds,.colorwords{
font-weight:bold; text-shadow:#222529 1px 1px .5px;
}
p.ooc {
padding:15px 0; margin:0 50px;
text-indent:0px;
text-align:center;
font-size:17px;
text-transform:uppercase;
font-weight:bold }
p.ooc img { float: right; margin:0 5px; }
.npcInfo {
font-size:11px; float: left; width:300px; margin-right:10px; }
.row3 b {
font-family:'Times New Roman', Times, Serif; font-size:14px; text-transform:uppercase;
}
.emp {
font-family:'Times New Roman', Times, Serif; font-size:13px; text-transform:uppercase; letter-spacing:0; word-spacing:2px; font-weight:normal;
}
.subtitle {
display:block;
float:right;
padding-right:8px;
}
.subtitle:before { content:'More: ' }
.maintitle { text-align:left; padding:8px; }
.darkrow2 { text-align:left; padding:6px; }
.sieSmall { font-size:11px; line-height:110%; }
.noBorder { border:0; }
#logostrip { display: none; }
.scrollCell { height:170px; overflow:auto; width:100%; line-height:120%; }
</style>
<p class="ooc">
<a href="#"><img src="http://i.imgur.com/4m3xX.jpg" title="Name" alt="Name" ></a>
This is an auxiliary character. Please send all PMs to my primary account, <a href="#">CHARACTER.</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean accumsan pellentesque sem quis porttitor. Etiam orci dui, elementum non venenatis eu, tristique a nisl. Donec est mauris, viverra viverra sodales et, tempor a lectus. Nullam elit magna, tempor sed tristique eget, congue a eros.</p>
</td>
</tr><tr>
<td colspan="3" class="row3" id="catacombs"><b>Player Catacombs</b>:
<div style="text-align:center;">
<img src="/images/catacombs/human2.png" title="Made 100 posts (July 2009)" alt="Made 100 posts (July 2009)">
</div>
</div>
</td>
</tr><tr>
<td class="titlemedium2 emp noBorder" valign="top" colspan="3" id="other-characters">
Other Characters
</td>
</tr><tr>
<td colspan="3" class="row3" id="characters" style="padding:0;">
<table class="charicons siehaxTwo" style="width:100%; margin:0px auto; border:0;">
<tr class="emp">
<td style="width:18%;">Active:</td>
<td style="width:41%;">Inactive:</td>
<td style="width:41%;">Dead:</td>
</tr><tr>
<td>
<a href="#"><img src="http://i.imgur.com/4m3xX.jpg" title="Name" alt="Name" ></a>
<a href="#"><img src="http://i.imgur.com/4m3xX.jpg" title="Name" alt="Name" ></a>
</td>
<td>
<a href="#"><img src="http://i.imgur.com/4m3xX.jpg" title="Name" alt="Name" ></a>
<a href="#"><img src="http://i.imgur.com/4m3xX.jpg" title="Name" alt="Name" ></a>
<a href="#"><img src="http://i.imgur.com/4m3xX.jpg" title="Name" alt="Name" ></a>
</td>
<td>
<a href="#"><img src="http://i.imgur.com/4m3xX.jpg" title="Name" alt="Name" ></a>
<a href="#"><img src="http://i.imgur.com/4m3xX.jpg" title="Name" alt="Name" ></a>
<a href="#"><img src="http://i.imgur.com/4m3xX.jpg" title="Name" alt="Name" ></a>
</td>
</tr></table>
</td>
</tr><tr>
<td colspan="3" class="row3" id="navigation"><b>Navigate:
<a href="#basics">Basics</a> ·
<a href="#family">Family</a> ·
<a href="#physical">Physical</a> ·
<a href="#history">History</a> ·
<a href="#personality">Personality</a> ·
<a href="#npcs">NPCs</a> ·
<a href="#inventory">Inventory</a></b>
</td>
</tr><tr>
<td class="maintitle" colspan="3" id="basics">Basic Information</td></tr><tr>
<td class="row3" style="padding:0px;" colspan="3">
<table class="siehaxTwo" cellpadding="0" cellspacing="0">
<tr>
<td class="row3" colspan="3" style="padding:0px;">
<table class="siehaxTwo haxThree" cellpadding="0" cellspacing="0">
<tr>
<td class="row3" style="width:33%;">
<b>Post Log</b>: <a href="#">Link</a>
</td>
<td class="row3" style="width:33%;">
<b>More Info</b>: <a href="#" target="_blank">Detailed Profile</a>
</td>
<td class="row3" style="width:33%;">
<b>Wiki</b>: <a href="http://wiki.soulsrpg.com/index.php?n=Characters.NAME" target="_blank">'Souls Wiki</a>
</td>
</tr>
<tr>
<td class="row3"><b>Age</b>: 1 year</td>
<td class="row3"><b>Birthdate</b>: 10 September 2010</td>
<td class="row3"><b>Luperci</b>: Ortus</td>
</tr>
<tr>
<td class="row3"><b>Gender</b>: Female</td>
<td class="row3" colspan="2"><b>Pack</b>: <b class="if">PACK</b>, Rank</td></td>
</tr>
</table>
</td>
</tr><tr>
<td class="row3" colspan="3">
<b>Heritage</b>:
75% <i title="Gray wolf">Canis lupus</i>,
25% <i title="Northeastern coyote">Canis latrans thamnos</i>,
</td>
</tr><tr>
<td class="maintitle" colspan="3" id="family">Family
<div class="subtitle">
<a href="#">Relationships</a> ·
<a href="#">Detailed Info</a> ·
<a href="#">Family Wiki</a>
</div>
</td>
</tr><tr>
<td class="row3" valign="top" colspan="3">
<div class="scrollCell">
<div id="QUOTE" class="floatimg famtree">
<a href="#" rel="lyteframe" rev="width:600px; height: 600px; scrolling: yes;">
<img src="#" title="Family Tree">
</a>
</div>
<b>Immediate Family:</b>
<p><strong>Parents</strong>:
<a href="?showuser=1">Jim</a> &
<a href="?showuser=1">Kathy</a></p>
<p><strong>Children</strong>:
<small>(by <a href="?showuser=#">Character</a>)</small>
<a href="?showuser=1">Joe</a>
</p>
<b>Extended Family:</b>
<p><strong>Half-Siblings</strong>:
<a href="?showuser=1">Bob</a>
</p>
</div>
</td></tr><td class="maintitle" colspan="3" id="physical"> Physical Appearance
<div class="subtitle">
<a href="#" target="blank">Detailed Info</a> ·
<a href="#">Gallery</a>
</div>
</td>
</tr><tr>
<td class="row3" valign="top" colspan="3">
<table class="siehaxTwo sizingTwo" cellpadding="0" cellspacing="0" style="width:200px; border:1px solid #000000; float:left; margin:5px;">
<tr>
<td class="row3"><b>Form</b></td>
<td class="row3"><b>Weight</b></td>
<td class="row3"><b>Height</b></td>
<td class="row3"><b>Length</b></td>
</tr>
<tr>
<td class="row3" style="width:33%;">
<img src="http://i.imgur.com/4m3xX.jpg" />
</td>
<td class="row3">xxx lbs.</td>
<td class="row3">xx in.</td>
<td class="row3">xft xin</td>
</tr>
<tr>
<td class="row3" style="width:33%;">
<img src="http://i.imgur.com/Mr1df.jpg" />
</td>
<td class="row3">xxx lbs.</td>
<td class="row3">x in.</td>
<td class="row3">xft xin</td>
</tr>
<tr>
<td class="row3" style="width:33%;" rowspan="2">
<img src="http://i.imgur.com/kkdEE.jpg" />
</td>
<td class="row3" style="height:50px;">xxx lbs.</td>
<td class="row3">x ft x in.</td>
<td class="row3">--</td>
</tr>
<tr>
<td class="row3" colspan="3">
Prefers <strong>Optime</strong> form.
</td>
</tr>
</table>
<div id="QUOTE" class="floatimg" style="float:right;">
<a href="http://soulsrpg.com/images/trollface.png" rel="lyteframe" rev="width:750px; height: 600px; scrolling: yes;">
<img src="http://soulsrpg.com/images/trollface.png" style="height:75px;">
</a>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean accumsan pellentesque sem quis porttitor. Etiam orci dui, elementum non venenatis eu, tristique a nisl. Donec est mauris, viverra viverra sodales et, tempor a lectus. Nullam elit magna, tempor sed tristique eget, congue a eros.</p>
</td>
</tr><tr>
<td class="maintitle" colspan="3" id="history">History
<div class="subtitle">
<a href="#">Detailed History</a> ·
<a href="#">Thread Archive</a>
</div>
</td>
</tr><tr>
<td class="row3" valign="top" colspan="3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean accumsan pellentesque sem quis porttitor. Etiam orci dui, elementum non venenatis eu, tristique a nisl. Donec est mauris, viverra viverra sodales et, tempor a lectus. Nullam elit magna, tempor sed tristique eget, congue a eros.</p>
</td>
</tr><tr>
<td class="maintitle" colspan="3" style="width:50%;" id="personality">Personality
<span class="subtitle">
<a href="#">Detailed Info</a>
</span>
</td>
</tr><tr>
<td class="row3" valign="top" colspan="3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean accumsan pellentesque sem quis porttitor. Etiam orci dui, elementum non venenatis eu, tristique a nisl. Donec est mauris, viverra viverra sodales et, tempor a lectus. Nullam elit magna, tempor sed tristique eget, congue a eros.</p>
</td></tr><tr>
<td class="maintitle" colspan="3" id="npcs">NPC Characters
<span class="subtitle">
<a href="#npcOne">NPC</a>
</span>
</td>
</tr><tr>
<td class="row3 sieSmall" valign="top" colspan="3">
<ul>
<li><strong>These characters appear with CHARACTER only when specified.</strong></li><li><strong class="if">PACK members</strong> are free to reference seeing these characters around, but if you would like actual interaction with them, please send me a PM first. Thanks!</li>
</ul>
</td>
</tr><tr>
<td class="titlemedium2 noBorder emp" valign="top" colspan="3" id="npcOne">
<strong>NPC Name</strong>, species (gender, X years)
<span class="subtitle">
<a href="http://wiki.soulsrpg.com/index.php?n=Characters.CHARACTER">'Souls Wiki Profile</a>
</span>
</td>
</tr><tr>
<td class="row3" valign="top" colspan="3">
<div id="QUOTE" class="floatimg iconimg"><a href="#" rel="lyteframe" rev="width:600px; height: 300px; scrolling: yes;"><img src="http://i.imgur.com/4m3xX.jpg" title="Molca" alt="Molca"></a></div>
<div class="npcInfo">
<ul>
<li>Short point of info</li>
<li>Short point of info</li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean accumsan pellentesque sem quis porttitor. Etiam orci dui, elementum non venenatis eu, tristique a nisl. Donec est mauris, viverra viverra sodales et, tempor a lectus. Nullam elit magna, tempor sed tristique eget, congue a eros.</p>
</td>
</tr><tr>
<td class="maintitle" valign="top" colspan="3" id="inventory">Inventory & House
<span class="subtitle">
<a href="#itemsOne">Subheader</a> ·
<a href="#itemsTwo">Subheader Two</a>
</span>
</td>
</tr><tr>
<td class="row3" colspan="3" valign="top" style="padding:0px;">
<table class="siehaxTwo sieInventory" cellpadding="0" cellspacing="0">
<tr>
<td class="darkrow2 emp noBorder" valign="top" colspan="2" id="itemsOne">
Subheader
</td>
</tr>
<tr>
<td class="row3">
<img src="http://sleepyglow.net/souls/_inventory/spoon.gif" title="Spoon" alt="Spoon" />
<img src="http://i.imgur.com/YDsxu.png" title="Bowl" alt="Bowl" />
<img src="http://i.imgur.com/NpDqt.png" title="Knife" alt="Knife" />
</td><td class="row3 sieSmall">
<div id="QUOTE" class="floatimg" style="float:right;">
<a href="http://soulsrpg.com/images/trollface.png" rel="lyteframe" rev="width:750px; height: 600px; scrolling: yes;">
<img src="http://soulsrpg.com/images/trollface.png" style="height:75px;">
</a>
</div>
<ul>
<li>Hi, I am the first point about your inventory</li>
<li>Hi, I am the second point about your inventory</li>
</ul>
</td>
</tr>
</table>
</td></tr></table>