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 weather 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., the "Current Weather" and "Pack Ranks" are controlled by the .header{} class, and the date as well as the High/Low text are controlled by the .subheader{} class. 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.
.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. -- 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 "Current Weather" and "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
| 
