UNOFFICIAL CSS Profile Skinning Guide

[Charon Amrithai]

[html]

Table of Contents UNOFFICIAL CSS Guide Basic Tips Skin Updates CSS Shell Controls Profile Hacks Sizing Chart Inventory Icons (1) Inventory Icons (2) OOC Categories 3 Column Fix 2 Column Fix UNOFFICIAL CSS Profile Customization Guide Warnings 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. 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 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. 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. 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. 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. 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. 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. 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! 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 {}). 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. 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. [/html] Code: <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> [html]

[/html]