[INFORMATION] Use CSS instead of Skin Modifier

[Shadow Wolf]

LOCATION: ANY APPLICABLE HEADER

Courtesy and Partial Credit goes to: SubDevo, Wormopolis, Charles Stover, and Randie for some of the information provided.

NOTE: This Guide does not teach CSS. To learn CSS go HERE

NOTE 2: This is most likely not a complete list of what each function does (though I definitely covered a majority of what each does), this only covers what I have found out about each specific class myself. To truly see everything that a class does, you will most likely need to try it out for yourself.

Make sure to wrap your CSS code in this format

<style type="text/css">
PLACE ALL CSS CODE HERE
</style>

body {} /*Customizes the general body look */ (Notice there is no period before the word "body" like in the classes.)


font {} /*Customizes all font not already specified*/ (Notice there is no period before the word "font" like in the classes.)


td {} /*changes nav tree dividers and text as well as Admin Panel title texts. Also lets you customize borders as well. */ (Notice there is no period before the word "td" like in the classes.)


#forumjump {} /*Lets you customize the appearance of Forum Jump */ (Notice there is a '#' before the word forumjump rather than a period. This indicates that the object you are referring to is an 'id' instead of a 'class.'


#ta1 {} /*Lets you customize 'expand' link under message reply. Examples: Make it visible or hidden, change alignment, etc */


a:link {} /*ALL Unvisited links on the site (Does not override any specific link classes, unless specific link classes have not been defined*/


a:visited: {} /*All visited links on the site (Does not override any specific link classes, unless specific link classes have not been defined)*/


a:hover: {} /*All mouse over links on the site (Does not override any specific link classes, unless specific link classes have not been defined ) */


a:active {} /*All selected links on the site (Does not override any specific link classes, unless specific link classes have not been defined) */


a.nav:link {} /*Customize Unvisited navigation bar link*/


a.nav:visited {} /*Customize visited navigation bar link */


a.nav:hover {} /*Customize mouse over navigation bar link */


a.nav:active {} /*Customize selected navigation bar link */


.nav {} /*Customizes appearance of navigation links as well. You can give a highlight to the text, etc */ (I recommend just using the link customizing located above.)


.bordercolor {} /*Customize the border of the forums*/


hr, .hr /* Customize Horizontal Rules in Posts. You can specify the color, background-color, width, and height of the horizontal rule */


.text1 {} /*Customize the text that says Info Center specifically*/


.cattext {} /* Customize the Category Text in the First Category Thread Cells; Examples: Forum Statistics, Users Online, the names of the Categories you create, etc*/


.catbg {} /*Customize the background of the First Category Thread cells. Examples: Forum Statistics, Users Online */


.titletext {} /*Customize text area only, of topics cell, last post cell, and all other relevant cells in that table in the first row excluding the category name cell. Also customizes the text area on the top and bottom bar in each of the specific boards*/


.titlebg {} /*Customize the text and background areas not categorized in other areas. Examples: Modify Headers and Footers, Quick Reply, Etc| Also customize background only, of those cells that apply to the titletext class.*/


.welcomebg {} /*Customize Welcome Table text and background*/


.windowbg {} /*Customize Admin Window Section, the cell to the left of the boards, the cells below Number of Topics and Number of Posts, along with a few other random areas. */


.windowbg2 {} /*Customize the background of the info cells and the cells underneath the Last Post cell. NOTE: You can customize text under Last post, but not the text in the info center boxes with this class edit.*/


Group Mods [.group0 {}, .group1 {}, .group2 {}, etc] /*Customize Appearance of Group Name Links (group0=members, group1=admin, etc)*/


____________________________________________________


Benefits: Using CSS to change the graphics on your site will give you much much more options than what the skin modifier allows. Included in this is changing backgrounds of certain areas to images, along with a bunch of other useful things like using different font styles, etc.

Cons: The only con with using CSS that I know about (kudos to SubDevo for this info) is that until your CSS code loads (especially with slower computers), the page will reflect what the skin modifier is set to. Once the computer loads everything though, then it is all CSS based as the CSS code overrides the skin modifier.


Anyone who is more educated than me in this area of what specific classes do, feel free to either add a post correcting me, or if you have the ability to modify my post, please do so!

Thanks, Hope you all enjoy

Shadow

[Magic Mist]

Why write code to something that can be modified without it? I can understand, if you want to recode the way forum looks but why do that for such things as background colour, etc?

[Shadow Wolf]

Mainly, like I said above. The skin modifier allows colors to be changed and only colors. With CSS, you have a lot more options on how you want each individual part of the forum to look. Instead of changing background to another color you can link to images and animated images, along with a bunch of other fun things CSS allows you to do. As far as customizing text in CSS, you can change the style of each individual font instead of just the color. Some nice things you can do with font styles are changing the font type, font size, font background color, font color, font family, etc. CSS just gives you a bunch more options instead of just being limited to colors only from the skin modifier.

[Magic Mist]

Mainly, like I said above. The skin modifier allows colors to be changed and only colors. With CSS, you have a lot more options on how you want each individual part of the forum to look. Instead of changing background to another color you can link to images and animated images, along with a bunch of other fun things CSS allows you to do. As far as customizing text in CSS, you can change the style of each individual font instead of just the color. Some nice things you can do with font styles are changing the font type, font size, font background color, font color, font family, etc. CSS just gives you a bunch more options instead of just being limited to colors only from the skin modifier.

I know what CSS does and that is exactly why I'm saying that there isn't any point using a code to overwrite something that is already done. If a person wants solid window 1 and 2 colours, they don't need a code for that as it can be easily done via skin modification page. Extra coding is only needed, if you want something special and super customised and as far as I've noticed, a lot of people are happy with what the skin modifier does. Don't get me wrong, CSS is a brilliant thing, I'm just saying there there's no need to overdo things where they aren't needed. It's a bit like saying that instead of using the bread you already have at home for a toast, you'll bake a new loaf yourself for the same purpose of having a toast.

[Tumbleweed]

I have to agree with Magic Mist as far as if you are just changing colors but as Shadow Wolf said, you can use images for a couple of those things and some specialized things like dashed lines instead of solid, etc. As far as changing font sizes, there is a nice code for that in the code index.

It is a little bit of a pet peeve of mine that I see people who have a whole set of CSS codes in their headers and they are only changing exactly what they can via their skins.

I do think a good place for something like this would be here for when people want to customize just one board since that code generator is defunct - except with more details on how to write css correctly or a link to W3Schools page with that info. If you don't know how to write it right, it won't work. As Shadow Wolf wrote it, people would still be clueless on how to add what they want.

I appreciate Shadow Wolf for taking the time to try to put together something although some of that is all ready in the FAQ's. Just my 2 cents.

[Charles Stover]

.hr is the class of <hr /> elements when you use the [hr] BB code tag. I think the link above the signature is also defined by hr.hr.
You can specify the color, background-color, width, and height of the horizontal rule via .hr.

[Shadow Wolf]

Updated Code with most current information
Also Organized it a bit to make it easier to read and decipher
Enjoy!

[Shadow Wolf]

Added #ta1, .groups, and #forumjump to the guide.

[Shadow Wolf]

Made the guide easier to use by taking it out of code tags, also added a general format to use in order to apply the code properly.

[Troxy]

One should note that when using the .group# parts, they cannot have colors set to the groups in the modify groups page. This will make the css just not work at all :]

[Michael]

Jul 16, 2010 16:03:15 GMT -8 Troxy said:

One should note that when using the .group# parts, they cannot have colors set to the groups in the modify groups page. This will make the css just not work at all :]

That's where you should use:

.group# font {
    color: #FFFFFF !important;
}

If you really wanted.

[Troxy]

if you're going to use color with that css, why even bother with having the hex in the modify group page ayyway? XD it's just more work man!

[seymourtubes]

Jul 16, 2010 16:25:00 GMT -8 Troxy said:

if you're going to use color with that css, why even bother with having the hex in the modify group page ayyway? XD it's just more work man!

Some use style sheets, some don't. It is a personal preference thing I would think. Maybe not for everyone? Maybe just what some need?

At least you have a choice.

[Troxy]

Yes, there is that ;D I was just saying, if you want to style the font, you'd need to use the .group# css because having and colors set in the modify groups page will make not only the color not work, but all of the styling. If you want JUST colors however, it's entirely up to you which way you go.

[Jordan]

They have just made a class that is applied to all hr elements so you can modify it if you want. Also, HTML and CSS are not software, they are just markup and style sheet languages.

.hr { color: #000000; background-color: #000000;}

Edit: Trill deleted his post.