UNOFFICIAL CSS Profile Skinning Guide

POSTED: Wed Aug 12, 2009 9:48 pm

UNOFFICIAL CSS Profile Customization Guide
Warnings
  1. This guide is not a basic CSS guide. If you don't know basic CSS, I would highly recommend requesting a profile skin rather than trying to make your own. The skinning has gotten complicated, and you will need to know Cascading Style Sheet basics. This guide merely explains which attributes of the skin control what, in the hopes that people will be able to customize for themselves if they know CSS.
  2. This guide is not an official resource of 'Souls. The staff will not provide support for profile customization (excepting if you utterly break your profile and can no longer edit it -- even then, though, your code will simply be removed, not fixed for you). Any questions you have should be posted here, to this thread, or in the larger Talents forum.
Basic Tips
  1. Spaces break your CSS. The only place spaces are acceptable outside of the curly brackets would be for declaring an element within an element, such as .row3 b{} which controls all bold within the .row3 class (but no other bold). Be careful about this one. So yes, your stuff should be like: .row3{}.row3 b{} without spaces around the brackets at all.
  2. Put your CSS anywhere in the IC or OOC boxes. Remember, auto-line break is on for most of the profile boxes, so you'll have to make sure not to enter a new line when you put your CSS in.
  3. Don't delete any of the classes or their attributes, even if the attribute is something like background-image:none. Different skins have different properties, and even if it doesn't seem to change anything in your present skin, other skins may have an image or something there that needs to be disabled in order for the profile to work properly across all of the skins.
  4. When the board releases a new skin, generally you need to make adjustments to the CSS because the admins are crazy and they like to make us work. ;~; It is very rare for a custom CSS to transfer seamlessly when the forum skin changes--now that there is a detailed how-to skinning guide, I will attempt to update here and let people know what the fixes are when new layouts roll out. :D
  5. Remember, .row3 b{ } controls the subheaders of the separate dividers--e.g., "Catacombs" and "Appearance." There is no way to change this, so instead of the (b) tag to bold things in your profile information itself, you should probably use the strong tag. What I mean by this is, if you want to list your character's mother, father, siblings, etc. with Mother, Father, Siblings bold, use (strong)Mother:(/strong) rather than (b)Mother:(/b) (replace the parenthesis with < and > instead of ( and )) because the latter renders Mother in the same font as "Relations" and in my opinion this looks messy. >_> You do you, though.
  6. It's supremely hard to straight up look through CSS, especially text-block unformatted CSS like the kind that *must* be inputted into the board, trying to find a section of code or something. CTRL + F is your friend, remember. Don't spend 20 minutes trying to find #userlinks yourself, just search for it. It will save you a lot of time in the long run.
  7. Find and Replace (CTRL + H in notepad) is also awesome for when you are working with an already-created skin (which I recommend doing after you've created your first skin based on this template). What I generally do is replace the images on a profile I am working on, and then screenshot (ALT + Print Screen/SysRq buttons) the image, and bring it into my image editor. Then I duplicate the layer so the original is beneath the layer I am working on, and then I use the paint bucket tool to fill in colors and play around on the text boxes. When finished, I delete a square section in the center of the upper layer so the original with the original colors is visible beneath it. I then use the eyedropper tool to pull the original color out, and paste it into the "Find" box in Notepad. I then go back to photoshop and pull the color I want to replace that one with into the "Replace" box. This is a HUGE time-saver, too!
  8. The packs have different classes for their colors--depending on what pack you're in and the background of your row3 class, your pack's name may or may not be readable. You can, however, manually adjust the colors--e.g., if I am in Inferni and I want to lighten or darken the red used for my title as it's embedded in the profile, I can change the color attribute of .if {}. Please try to retain the original pack color as much as possible--just lighten or darken it up if need be, don't turn it wild and wacky colors. :3 It's usually the pack's acronym (e.g., Cour des Miracles is .cdm {}).
  9. Remember, you can create your own custom CSS classes! This is extremely useful for post logs and so forth for specific text effects. Custom classes should be started with a period. Also remember to name these custom classes in a unique manner so they do not overlap with the board's css. You should probably have your character's name prefixing the class name, so it'd be .kaena-postlog rather than just .postlog unless you refer to the source code to make sure .postlog is not already a class in use, and most people aren't down for that. Up to you. :P
Board Skin Updates

If you have already customized your profile or received a custom skin from someone, you can edit these changes in yourself to keep your profile skin up to date with all the forum skins (e.g., not like Rurik's busted-ass skin).

  • Dark Side (June 2010) - #navstrip{} needs font-style:normal; to keep the font from italicizing.
  • Ninety Days and One Night (July 2010) - userlinks{} text-transform:none; - profilename{} font-style:normal;
  • The Scientist (July 2010) - .maintitle{}, .maintitle a:link, .maintitle a:visited, .maintitle a:hover, .maintitle a:active {} need text-shadow:none; - userlinks{} needs -moz-border-radius:0px; -webkit-border-radius: 0px;
  • Afraid of the Dark (October 2010) - titlemedium2 classes all need text-shadow:none;
  • Hallelujah (Light/Dark) (December 2010) - #annbox class needs background-image:none;
  • Nowhere to Hide/Grace & Flowers (March 2011) - #annann needs text-shadow:none; - .infotable needs outline:0px; - #droplinks{...} and #droplinks select {...} control the off-site links in the header; should match all of .titlemedium2 properties
Profile Skin Shell

Here is your basic profile skin, with all adjustments and updates to account for different forum skins as of January 2010. For an example of wtf this looks like, please see Sicarus de Ericeto's profile.

Code: Select all
<style type="text/css">body{background-color:#000000; background-image:url(IMAGEURL); background-repeat:repeat; background-attachment:fixed;margin:0px;}a:link,a:visited {color:#9DAEC7;font-weight:normal; text-decoration:none;}a:hover,a:active{color:#A0B9DD;font-weight:normal; text-decoration:none;}#userlinks a:link,#userlinks a:visited{font-family: verdana, sans-serif; font-size:11px; line-height:11px; letter-spacing:0pt; color:#9DAEC7;font-weight:normal; text-decoration:none; text-transform:none; border:0px;}#userlinks a:hover,#userlinks a:active{font-family: verdana, sans-serif; font-size:11px; line-height:11px; letter-spacing:0pt; color:#A0B9DD;font-weight:normal; text-decoration:none; text-transform:none;border:0px;}#navstrip a:link,#navstrip a:visited{font-family:verdana, sans-serif; color:#DBDBDB;font-weight:normal;}#navstrip a:hover,#navstrip a:active{color:#FFFFFF;font-weight:bold;font-family:verdana, sans-serif;}.copyright a:link,.copyright a:visited{color:#000000; font-weight:bold;}.copyright a:hover,.copyright a:active{color:#DBCFC6; font-weight:bold; border-bottom:1px dotted #FFFFFF;}.maintitle{background-color:#FFFFFF; background-image:none; background-position:top right background-repeat:no-repeat; color:#000000;font-family: arial, helvetica, sans-serif; font-size:14px; letter-spacing:.5px; word-spacing:3px; text-align:left; padding-left:50px;text-transform:normal; font-variant:normal; border:0px; padding-top:5px; padding-bottom:5px; font-weight:bold; line-height:20px;text-shadow:none;}.maintitle a:link,.maintitle a:visited{color:#BAC8DD; font-family: arial, helvetica, sans-serif; font-size:13px; border:0px; font-variant:none; text-transform:uppercase; text-decoration:none; font-weight:bold; letter-spacing:0px;text-shadow:none;}.maintitle a:active,.maintitle a:hover{color:#D3E2F9; font-family: arial, helvetica, sans-serif; font-variant:none; text-transform:uppercase; text-decoration:none; font-weight:bold; border: 0px; font-size:13px; letter-spacing:0px;text-shadow:none;}.row2{background-color:#353E4B; color:#000000; font-family: arial, helvetica, sans-serif;  font-size:11px; border:1px solid #000000;}.row2 b{font-family: arial, helvetica, sans-serif;  color:#000000; font-size:11px; text-transform:none; font-variant:normal; font-weight:bold; padding:0px; letter-spacing:.1pt;}.row3{background-color:#FFFFFF; font-family: arial, helvetica, sans-serif; font-size:11px; line-height:13px; letter-spacing:.2px; color:#000000; padding:5px 10px; }.row3 b{font-family: arial, helvetica, sans-serif; text-transform:none; font-variant:none; font-weight:none; font-size:12px; color:#000000; letter-spacing:-.3px; word-spacing:1px;}#userlinks{-moz-border-radius:0px; -webkit-border-radius:0px; background-image:none; background-color:#FFFFFF; font-family: verdana, sans-serif; font-size:11px; line-height:11px; letter-spacing:0pt; color:#000000; text-transform:none; border:1px solid #000000;}#userlinks strong{font-family:verdana, sans-serif;}#annbox{border:1px solid #000000; background-color:#FFFFFF;background-image:none;}#annbox2{border:1px solid #000000; background-color:#FFFFFF;}#annann{background-color:#FFFFFF;background-image:none;border:0px;color:#8FB4BE; font-family:georgia; font-size:15px; margin:0px; padding:0px;text-shadow:none;}.infotable{-moz-border-radius:0px; -webkit-border-radius:0px; background-color:#FFFFFF; background-image:none; border:1px solid #000000; color:#FFFFFF;outline:0px;}#extrawrapper{background-color:#DBDBDB;border:1px solid #000000; margin-top:4px; margin-bottom:4px; color:#000000; background-image:none;background-position:top center;background-repeat:repeat; background-attachment:scroll; padding:0px;}#logostrip{background-color:#FFFFFF;background-image:url(IMAGEURL);height:271px; margin-top:5px; margin-bottom:15px;border:1px solid #000000;}#profilename{font-family:georgia, serif; font-size:30px; text-align:right; padding-right:20px; color:#DBDBDB;font-style:none;}strong{font-family: arial, helvetica, sans-serif;  color:#000000; font-weight:bold;}#navstrip{-moz-border-radius:0px; -webkit-border-radius:0px;background-color:transparent; color:#DBDBDB; font-style:normal; font-family:verdana, sans-serif; font-size:11px; text-transform:none; text-align:right; border-bottom:0px; border-right:0px; border-left:0px; border-top:0px; padding-right:20px; font-weight:normal;}.titlemedium2{background-image:none; border-right:1px solid #000000; border-left:1px solid #000000; border-bottom:0px; border-top:0px; background-color:#FFFFFF; font-family:'trebuchet ms', arial, helvetica, sans-serif; font-size:10px; letter-spacing:-1px; word-spacing:1px; text-transform:uppercase; font-variant:none; font-weight:normal; color:#6F89AB; padding:4px 5px 4px 5px; text-shadow:none;}.titlemedium2 a:link,.titlemedium2 a:visited{color:#6F89AB; font-family: 'trebuchet ms', arial, helvetica, sans-serif;font-size:10px; letter-spacing:-.2px; word-spacing:1px; text-transform:uppercase; font-variant:none; text-decoration:none; text-shadow:none;}.titlemedium2 a:hover,.titlemedium2 a:active{color:#6899D9; font-family: 'trebuchet ms', arial, helvetica, sans-serif; font-size:10px; letter-spacing:-.2px; word-spacing:1px; text-transform:uppercase; font-variant:none; text-decoration:none; text-shadow:none;}.desc{color:#000000; font-family: arial, helvetica, sans-serif;  font-size:11px;}.subheader{color:#000000; font-weight:bold; font-family:arial, sans-serif; font-size:11px;}.header{color:#000000;font-family: 'bookman old style', georgia, serif; word-spacing:-1px; letter-spacing:-.2px; text-transform:none;font-variant:none;border:0px; text-shadow:none;}.copyright{color:#000000; font-weight:normal; text-transform:uppercase; font-size:10px; font-family:verdana, sans-serif;}.tableborder{background-color:#000000;}.plainborder{border:0px; background-color:#000000;}#ucpcontent{border:1px solid #000000;}.pformstrip{background-color:#FFFFFF; color:#000000;}.darkrow2{border:0px;background-color:#FFFFFF;}#droplinks{font-family:arial, helvetica, sans-serif;font-weight:bold; font-size:12px;text-transform:lowercase; padding:0px 2px; background-color:#FFFFFF;}#droplinks select{font-family:arial, helvetica, sans-serif;font-weight:bold; font-size:12px;text-transform:lowercase;background-color:#FFFFFF;}</style>

POSTED: Sat May 08, 2010 8:44 pm

Controls

There are a lot of suggestions on what I do in profiles -- feel free to play around, though! By no means do you have to make your profiles look like mine. XD You should definitely keep your profiles generally in line with the rest of the forum as far as the basic layout, though -- though you can make them align to the left and right (and even add sidebars if you're that awesome with CSS) it may be very jarring to view a profile that is so different from the rest of the forum layout. You should not use display properties to hide elements.

body{ }
This basically just controls the outermost background of your page. Images, colors, whatever. I generally do some kind of repeating background -- there are craptons of useful resources for very simple backgrounds, and if you have Adobe Photoshop, it's ridiculously easy to make your own seamless tiled background.

a:link,a:visited { }
The body links, this controls all general links. Some links are controlled by separate classes -- those are explained later. This controls all links within the profile save for the specialized ones. Even if you want all of your links in the same color, you must then change all of the specialized links to these colors -- deleting the classes won't work, since the skins use different link colors in different places.

#userlinks a:link,#userlinks a:visited{ }
This controls the user links--e.g., "You are logged in as [Profile Name]" and "My Controls - New Messsages" etc. I generally set these to the same color as the body links, but you may wish to change them to a different color.

#navstrip a:link,#navstrip a:visited { }
This controls the navigation strip links--essentially just the "'Souls - Viewing Profile" part. I usually match this with the #navstrip text, but sometimes I make the #navstrip transparent, then I match it to the copyright link color.

.copyright a:link,.copyright a:visited{ }
Controls the copyright link colors and attributes. This is only used at the very bottom of the forum, but as the background color where it sits is generally different enough from the rest of the document that it requires a different shade or a different color altogether

.maintitle { }
This controls most elements of both the help menu bar at the top (Plot, Rules, etc) as well as the In Character and Out of Character headers. Please note that the text of the In Character and Out of Character headers are controlled here, whereas the Help Menu Bar's text is controled by the .maintitle a { } elements except for the little dots between each word. It usually looks wonky if the dots are really, really different from the rest of the text, so keep that in mind.

.maintitle a:link,.maintitle a:visited{ }
This controls the help menu bar's links--the Plot, Rules, etc. Note again that the little separator dots are controlled by the previous class.

.row2{ }
This controls the Announcements box and other elements about that particular box. Sometimes I make this text a shade smaller than the rest of the profile forum. The text of the announcements themselves are controlled by .desc{}

.row2 b{ }
This controls the bolded dates within the Announcements box. I usually don't set this to a different color, but you might want to. It looks best if you keep the other elements (e.g., font, size, spacing) the same as the announcements box text, but you may feel differently.

.row3 { }
This is the primary box control of the profile--this controls all of the text boxes other than the Announcements box, the ones that appear beneath the character's name and the "Out of Character" header. This is what most of your information will be displayed as; make very sure this text is readable. Don't use super-tiny or super-huge fonts, and it's best not to stretch or diminish the letter spacing or line height to ridiculous proportions.

.row3 b{}
This controls the separate category heading text--e.g., "Catacombs", "Appearance" etc. Remember that if you want to use bolded text within your information, you should use the (strong) tag instead, as all (b) tags you'd type for your information are affected.

#userlinks{ }
This controls the userlinks bar--this is the uppermost bar beneath the header image, where it says "You are [Username]" and so forth. Some text is controlled by the strong class, probably as a fix for old layouts. I usually just make sure that the #userlinks and #userlinks strong match as far as font, size, and color, and leave them alone otherwise.

#userlinks strong{ }
This controls the bolded text of the userlinks bar which is just "You are". I think one of the skins had something different about this, so it's included? >_>

#annbox{ }
This essentially controls the outer border of the announcements box. The background color is also used to control the uppermost help menu bar (Plot, Rules, etc.) -- if you want a different color or even an image on the uppermost menu bar, use different colors for this class and the background color of .maintitle{}. I usually just leave this the same as .maintitle{} though.

#annbox2 { }
This controls the border around the help menu bar (Plot, Rules, etc).

#annann { }
This controls the stuff around the "Announcements" box, like background, font color, etc.

.infotable{}
This controls some attributes about the [s]weather[/s] pack ranks box -- the background, removing the curved CSS3 borders in the "Cold Outside" skin, etc. Some of the different texts are controlled by different classes: e.g., [s]the "Current Weather" and[/s] "Pack Ranks" are controlled by the .header{} class, [s]and the date as well as the High/Low text are controlled by the .subheader{} class[/s]. Note, 11 Aug 2010: Since the weather has been shifted over to the Area help topic, I think that the relevant parts are unnecessary anymore? :O Leaving them in struck out just in case.

#extrawrapper{ }
This is the rearmost wrapper around the profile, behind the header and the other text boxes. You can add a background here or set the background-color to transparent and remove the border to remove it altogether and have the profile boxes floating over the profile background (e.g., Harlowe's skin. You can also control the top and bottom margins for the page and give more or less of a margin there, if you'd like.

#logostrip{ }
This is where your header image goes! Pretty much the only thing you have to adjust here is the image and the height of the image. Just put in how tall your image is and you're good here.

Your profile image should be 750 pixels wide. I generally do not venture over roughly 350 pixels for my header images--if I have to scroll past the image to see any text at all, I feel that it's too tall. You can change the background color if you want, but generally as you want your image to fully cover the background here, it is not necessary. If you have an image where the text hangs over a transparent part of the image, you will went the background of this to be the same as the #extrawrapper{} background, and you will also want to disable the bottom border.

A note about profile images -- you should try to find pictures that are stock images, Creative Commons, or otherwise public domain. You should also credit your photographers. You can do this either with embedded comments, or you can throw a link out to them in your profile. :3

#profilename{ }
This controls the character's name as it appears above the "In Character" header.

#navstrip{ }
This basically controls the box where it says "Souls - Viewing Profile." Sometimes I make this transparent, you can do that by editing background-color: and replacing the hex code with transparent. You'll also want to set the border to 0px if you do that.

.titlemedium2{ }
This controls the attributes of the sub-menu of links where it says "Procedures, Packs, etc"

.titlemedium2 a:link,.titlemedium2 a:visited{ }
This controls the submenu of links where it says "Procedures, Packs, etc." This controls the actual link functions.

.desc{ }
This controls the font stylings of the announcements text.

[s].subheader{ }
This controls the color of the weather's date and High/Low text. You can usually leave this the same as your primary text color.[/s] -- Not necessary now, due to the removal of the weather box. However, you could probably keep this the same as the header text or similar -- that way if the meanie admins decide to include it in another class later on, you'll be prepared. XD

.header{ }
This controls the [s]"Current Weather" and[/s] "Pack Ranks" text in the pack ranks box. Please note that the sizes of these cannot be changed for whatever reason; take that into account when selecting a font. Negative letter and word spacing are a good assist on this one if you want to use a funky font.

.copyright{ }
This controls the copyright text.

.tableborder{ }
This is your primary border control for most profile area. Some borders -- e.g., the ones wrapping the announcement box -- are different colors in some skins, and thus you do have the ability to change those and make them unique. The In Character text areas are controlled by the next class, so you can also make those different.

.plainborder{ }
This controls the border in the in character text areas.

#ucpcontent{ }
I am pretty sure this is a fix for a layout.~

.pformstrip { }
Not sure, again I think this is a fix for an older skin.

strong{ }
Once more, I believe this is a fix for an older skin. I generally set this to the same properties as the row3 {} text but with the font-weight set to bold.

.darkrow2{ }
I really don't know. I think this is a fix for an older skin~. :O

POSTED: Thu Sep 02, 2010 3:07 pm

<span style='font-size:12pt;line-height:100%'>Sizing Chart</span>

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

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

Code: Select all
<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: Select all
#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.

----

<span style='font-size:12pt;line-height:100%'>Inventory Icons Table</span>
<span style='font-size:11pt;line-height:100%'>VERSION I</span>
Much like the above, this allows you to display your <a href='http://soulsrpg.com/ipb/viewtopic.php?t=11721' target='_blank'>inventory icons</a> in a neat little side-floating table. There is currently an example in Kaena's profile.

HTML
Code: Select all
<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: Select all
.#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;}



<span style='font-size:12pt;line-height:100%'>Inventory Icons Table</span>
<span style='font-size:11pt;line-height:100%'>VERSION II</span>
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 <a href='http://www.soulsrpg.com/ipb/memberlist.php?mode=viewprofile&u=4134495#inventoryexamp' target='_blank'>here</a>.

HTML
Code: Select all
</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: Select all
#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%;}


----

<span style='font-size:12pt;line-height:100%'>OOC row3?!</span>
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: Select all
</td></tr><tr><td colspan="3" class="row3">


:D 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!

----

<span style='font-size:12pt;line-height:100%'>Age/DOB/Luperci on Same Line</span>
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: Select all
</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: Select all
.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

POSTED: Sat Sep 04, 2010 2:11 am


Ooh, the three-column fix is lovely! I edited it a bit two get two columns on <a href='http://www.soulsrpg.com/ipb/memberlist.php?mode=viewprofile&u=41342' target='_blank'>my profile</a> near the bottom! :D

Code: Select all
</td></tr><tr><td class="row3" style="padding:0px;"><table class="siehaxorz" cellpadding="0" cellspacing="0"><tr><td class="row3"> <b>Archives</b>: <a href="?viewtopic.php?t=138#entry427" style="font-weight:bold;">I WANT YOUR LOVE,</a></td><td class="row3" style="border:0px;"> <b>Inferni Game Points</b>: <a href="?viewtopic.php?t=138#entry80697"  style="font-weight:bold;">AND ALL YOUR LOVE IS REVENGE</a></td></tr></table></td></tr>


I also had to mod the CSS a bit to fit:
Code: Select all
.siehaxorz td{border-right:1px solid black; width:50%;padding:5px;}

POSTED: Mon Jun 25, 2012 12:51 am

[s]how can you change text color when you wanna put like eye color ..?

ex:

Has <span style='color:gray'>gray</span> eyes ... etc.

It's just showing up black for me.[/s]


[s]EDIT: neeeevermind, I figured it out. I had the words 'stronged', and so they were turning up bold and black .[/s]

EDIT x2: NEW QUESTION: WHY is the bottom part of my profile black !? I thought I changed everything to white... what am I missing here ?

POSTED: Mon Jun 25, 2012 4:01 am

Your table is not closed properly. Try sticking </td></tr></table> at the very end of your profile. If a single thing doesn't work, try </td></tr></table></td></tr></table>. If neither works, come back here and lemme know. <3

POSTED: Mon Jun 25, 2012 6:27 am

Didnt work >.<

I already have all that on the bottom of the actual profile code thingy... the shell is whats screwing up... I think. O.O


ANOTHER QUESTION for you Sie, my dear -- What did I do wrong to make the avatar space stretch out like that? i looked for the problem and I couldnt find anything wrong O.o

POSTED: Mon Jun 25, 2012 6:39 am

lol, three's the charm -- I just stuck another </td></tr></table> in there and it looks to all be fixed now. c;

POSTED: Mon Jun 25, 2012 8:51 pm

Thank you beautiful <3

POSTED: Tue Jul 03, 2012 6:23 pm

Help, I have fallen into coding and I can't get up!

I have three problems--[s]one, I cannot change the background color of the bar where it says Plot, Rules, Joining, etc. You can see I tried to do something... but it only colored the text around it.[/s] Found that. :P

[s]Two, I cannot find where to edit the "Offsite Links" background and font color. I could swear I saw is somewhere above, explaining where it was, but now I cannot find it. |:<[/s] Okay, I was stupid for missing this...

[s]Three, again, cannot find where to edit the background color for the inner Announcements box.[/s] LOL, FOUND THAT TOO. I'm getting good at finding stuff. xD

Yay, I figured all this by myself! xD You can delete this post now.

POSTED: Sun Jul 15, 2012 1:19 am

On my profile I'm making a skin for Toby and can't figure out what I'm missing to make the white box at the top change colors including the text colors ;-;

Also if anyone could resize the top picture I would love you :3 I can't make a picture properly until I get my laptop sometime in mid august:(

Thankya<3

POSTED: Sun Sep 02, 2012 8:28 am

I got another 2 questions :

First : I think we need another fix for these new layouts because I was trying to make my boxes float like in Harlowe's layout and they were 2 days ago -- but not there's an ugly border around them again >.<
How do I get rid of that?

Second: How do I close the last boxes of my height chart (in the profile) ? I've had it like that for the longest, and never asked o.o

Thanks :)

EDIT: Alsooooo, for my NPC title header things... I would like them to be the same color green as all the other titles.... but I can't seem to get that to work >.<

AND my banner picture won't show ! I know there was a catch to make it show... but I don't remember what it wass ...


I have a lot of problems.

POSTED: Sun Sep 16, 2012 4:29 am

bump. I totally still have a question ^^^^

POSTED: Sun Sep 16, 2012 6:40 am

I remember something...not sure if it would work, but it's worth a try.
If you're using the coding for the OOC layout there is a little tidbit in the coding that is


#logostrip { display: none; }

Just get rid of that one ^
[s] It's either get rid of the "none" or the whole little sentence....
Pretty sure that's the fix.
As for the other thing, I don't know.

I advise you try deleting the "none" first because sometimes the placement of the coding depends greatly. But if it still doesn't show, just remove that whole tidbit.[/s]

I found out, it shows your banner!

POSTED: Mon Sep 17, 2012 5:50 am

Thanks :3

I actually figured it out before I read this heehe

Dead Templates