UNOFFICIAL CSS Profile Skinning Guide

[Kaena Lykoi]

[html]

[/html]Sizing Chart

This works with the .infotable class which is built into every skin, so it doesn't require much messing with colors or anything.

01. Here is your HTML. This would probably go in the Appearance box. :o

Code:

<table class="infotable" id="sizechart"><tr><td colspan="4"><strong>Precise Size</strong></td></tr><tr><td> <strong>Form</strong></td><td> <strong>Weight</strong></td><td> <strong>Height</strong></td><td> <strong>Length</strong></td></tr><tr><td><em>Lupus</em></td><td>xx lbs.</td><td>xx in.</td><td>xx in</td></tr><tr><td><em>Secui</em></td><td>xx lbs.</td><td>xx in</td><td>xx in</td></tr><tr><td><em>Optime</em></td><td>xx lbs</td><td>xft xin</td><td>--</td></tr><tr><td colspan="4"><strong>Preferred Form</strong>: xxx</td></tr></table>

02. Here is your CSS. Tack this onto your stylesheet. I find it's kind of helpful to separate what's the 'core' stylesheet and these special tricks with a CSS comment -- /*This is a CSS comment*/ -- so I know where one begins and the next ends. Then again, I skin profiles and mess with them a lot, so you may not care so much. 8D

Code:

#sizechart{float:right; width:200px;border-collapse:collapse; margin:10px;}#sizechart td{border:1px solid #000000; padding:3px;font-family:georgia, serif; font-size:12px;}

#sizechart tells it which side to align (float:right; or float:left, how wide it should be (200 px works just dandy for me, for the table to collapse borders to avoid double borders, and to have a 10px margin.
#sizechart td tells it to give each table cell a 1px border in black, 3px padding for each cell, and font stylings.

----
[html]

[/html]
Inventory Icons Table
VERSION I
Much like the above, this allows you to display your inventory icons in a neat little side-floating table. There is currently an example in Kaena's profile.

HTML

Code:

<table class="infotable" id="inventoryitems"><tr><td colspan="2" class="header">Inventory Items</td></tr><tr><td class="item"><img src="http://sleepyglow.net/souls/other/inventory/horse_white.gif"></td><td><strong>Item Name</strong></td></tr><tr><td colspan="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut velit enim, et sodales felis. Aenean turpis quam, eleifend varius porttitor sed, blandit quis felis. Sed sit amet lorem turpis, vitae vulputate diam. Integer imperdiet faucibus dapibus. Vestibulum volutpat pulvinar sodales.</td></tr></table>

CSS

Code:

.#inventoryitems{float:right; width:200px;border-collapse:collapse; margin:10px;}#inventoryitems td{border:1px solid #000000; padding:3px; font-size:75%;vertical-align:top;}#inventoryitems td.item{text-align:center;}

[html]

[/html]
Inventory Icons Table
VERSION II
UNLIKE the above version, this is a stand-alone inventory icons table, intended to have its own containing row. For a working example, you can check here.

HTML

Code:

</td></tr><tr><td class="row3" id="inventoryexamp"><b>Inventory Icons</b>: <table class="infotable" id="inventoryitems"><tr><td class="item"><img src="http://sleepyglow.net/souls/other/inventory/horse_white.gif"></td><td><strong>Item Name</strong></td></tr><tr><td colspan="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut velit enim, et sodales felis. Aenean turpis quam, eleifend varius porttitor sed, blandit quis felis. Sed sit amet lorem turpis, vitae vulputate diam. Integer imperdiet faucibus dapibus. Vestibulum volutpat pulvinar sodales.</td></tr></table>

CSS

Code:

#inventoryitems{width:95%;margin:0px auto;border-collapse:collapse; margin:10px;}#inventoryitems td{border:1px solid #000000; padding:3px;vertical-align:top;}#inventoryitems td.item{text-align:center; width:25%;}

----
[html]

[/html]
OOC row3?!
Okay, so it is pretty easy to add extra dividers to your profile in the IC area, but if you try the same code that works there in the OOC area, it gives you a frightening broken profile that makes the HTML spirits weep. Up until recently, it wasn't even possible to HTMLize OOC areas, so... how do we fix this?!

Code:

</td></tr><tr><td colspan="3" class="row3">

In the OOC areas, the one table row consists of the avatar, a column of OOC information, and a column of contact information, so we need for any added rows in the OOC area to span over those 3 columns in order to function properly. HOORAY!

----
[html]

[/html]
Age/DOB/Luperci on Same Line
I was gawking at my character profiles and I saw that Age, Date of Birth, and Luperci could easily be condensed to one line, and it was somewhat irritating to have each of them on a separate line, since it makes for a longer profile and as I am insane and my character profiles are already ridiculously long, I like to keep them as short as possible. Thus, there is this hax0ring:

HTML (I just put it right after Catacombs. This works like any other row3 class you'd insert, pretty much. 8D)

Code:

</td></tr><tr><td class="row3" style="padding:0px;"><table class="siehaxorz" cellpadding="0" cellspacing="0"><tr><td class="row3"><b>Age</b>: 10</td><td class="row3"><b>Birthdate</b>: November 7, 1999</td><td class="row3" style="border:0px;"><b>Luperci</b>: Ortus</td></tr></table></td></tr><tr><td class="row3"><b>Heritage</b>: 50% <i title="Northeastern coyote">Canis latrans thamnos</i>, 25% <i title="Red Wolf">Canis rufus rufus</i>, 25% <i title="Dog (mixed breeds)">Canis lupus familiaris</i>

CSS

Code:

.siehaxorz{width:100%;}.siehaxorz td{border-right:1px solid black; width:33%; padding:5px;}

You may have to adjust the value of padding, depending on whether or not you have custom CSS. SIMPLE AND EFFECTIVE. 8D