Main Menu
Home
Open a Ticket
My Ticket History
Browse Knowledgebase
My Account

Login
 E-mail:
 Password:
Register | Forgot Password?

Knowledgebase
Ask a question using natural language. Try to include as much information as possible:

Boardnation recommends Firefox. You may see unpredictable results if you modify your message board template when viewing with other browsers.


Knowledgebase
Explaining Your Template CSS
Top : Administration

Article ID: 000061
Rating: 3.7 / 5.0 (12 votes)
Views: 22552

Problem
How do I change the look of my board? What is with all the CSS?

Solution

We recommend that you read this guide with a basic knowledge of HTML. There is an article that explains HTML and its basics.

CSS is a strong asset on any web page, as it makes it easier to change and customize different parts of your message board by just changing a few lines of text instead of finding each part of the board you want to change respectively.

Rules to place a Style Sheet:

  • It must be between the <head> and </head> tags.
  • The text must be sorrounded by <STYLE type=text/css> and </style> tags.
  • The Style sheets are text so it will show up on the page. To prevent this, surround the style sheets with <!-- and -->. Those commands will make the text not show up on the page.

The basic format of CSS is:

class {definition; definition; definition}

Ok, let's analize this:

  • Notice that the definitions are inside two "{" and "}", not "(" or "[".
  • Each definition is separated by ";". Notice the spaces. They are not required but its easier to read them with spaces.

Style Sheets are most generally used for control over text color and font, background color or image, among other things.

The most common definitions that are used on web pages are:

Color: value;
This changes the color of the text that is assigned under this class.

Background-color: value;
This changes the color of the background in the appropriate section.

Background-image: url(path to image);
This puts a background image in the appropriate section.

Text-weight: bold, italic, etc.
This changes the format of the text

Text-Decoration: underline, overline, line-through, blink
This also changes the decoration of the text.

*The following are for changing the font of your text*

Font-family: family-name or generic-family
Font-size: in pixels
Font-weight: normal, bold, bolder, lighter
Font-style: normal, italic, oblique




The following is a part-by-part explanation of the entire Style Sheet of a default message board:

A:link {COLOR: #005177; BACKGROUND-COLOR: transparent; TEXT-DECORATION: none}

This first tag will change the format of all the links in your message board.

A:visited {COLOR: #005177; BACKGROUND-COLOR: transparent; TEXT-DECORATION: none}

Here you can change the format of the visited links to let your members know what topics they have visited, or other parts of your board, etc.

A:hover {COLOR: #cc3333; BACKGROUND-COLOR: transparent; TEXT-DECORATION: none}

You can change the format of the link when the mouse is hovering over it with this tag.

.nav {color: #000000; text-decoration: none; background-color: transparent}

Nav are the links that appear at the top of your message board showing your current position in a tree-like manner (although you can change it to be in a single line in Feature Settings and Options). In this case, this will change the format of the nav links when they are displayed as text, which can be done on Forum Preferences and Settings.

.nav:link {COLOR: #000000; BACKGROUND-COLOR: transparent; TEXT-DECORATION: none}

This can change the format of the Nav links only, which are apart from the normal links in your message board.

.nav:visited {COLOR: #000000; BACKGROUND-COLOR: transparent; TEXT-DECORATION: none}

As the normal links as well, this can change the format of the nav links when they are already visited.

.nav:hover {FONT-WEIGHT: bold; COLOR: #cc3333; BACKGROUND-COLOR: transparent; TEXT-DECORATION: underline}

This will change the format of the Nav links when the mouse hovers over them.



BODY {FONT-SIZE: 12px; FONT-FAMILY: Verdana, arial, helvetica, serif}

Instead of defining the look of the body of your message board on the HTML tag , you can assign better attributes here, like the global font size and font, color, background color or image, etc.

TABLE {empty-cells: show}

This class isn’t helpful for anything other than showing empty cells as the definition states. I recommend you leave this tag alone.

TD {FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: Verdana, arial, helvetica, serif}

This class is very important. You can make your message board display all of the cells in tables a certain color and with a certain font color and style with this class, instead of assigning them individually.

INPUT {FONT-SIZE: 9pt; COLOR: #000000; FONT-FAMILY: Verdana,arial, helvetica, serif; BACKGROUND-COLOR: #afc6db}

Input buttons (for example, the Save button in your Edit Template page) are all over your message board and are used frequently. This class lets you change its background color and font.

TEXTAREA {FONT-SIZE: 9pt; COLOR: #000000; FONT-FAMILY: Verdana,arial, helvetica, serif}

Text areas are the input areas where you write info to submit, like your posts or even the Template. This allows you to change its look also.

SELECT {FONT-SIZE: 7pt; COLOR: #000000; FONT-FAMILY: Verdana,arial, helvetica, serif}

The drop boxes found in different parts of the message board, like the Jump To feature, can be changed with this class.

.windowbg {background-color: blue; font-size: 12px; font-family: Verdana, arial, helvetica, serif; color: #000000;}

.windowbg2 {background-color: red; font-size: 12px; font-family: Verdana, arial, helvetica, serif; color: #000000;}

.windowbg3 {background-color: yellow; font-size: 12px; font-family: Verdana, arial, helvetica, serif; color: #000000;}

The best way to show you what exactly these classes do on your forum, we've made this mock up as a visual guide.

As you can see, windowbg background-color is set to 'blue' and windowbg2 is set to 'red'. I still do not know what exactly windowbg3 does on your message board, so if any of you know, please notify me and I'll update this article.

NOTE: It is very important to note that these classes only change the colors in the Forum Index itself. The rest of the message board, like the top table with the logo and menu, is handled through the TD class or plain HTML.



.titlebg {COLOR: #000000; BACKGROUND-COLOR: #ffffff}

Titlebg defines all the tables in your message board that show the title of the section you are viewing. In the Forum Index, the top part “Forum Name, Topics, Posts, Last Post”, then the bottom part with “New Posts / No New Posts” can be changed with this class. Also the Info Center top bar with the name of your board is also defined with this class.

Inside the forums the top bar with “Subject, Started By, Replies, Views, Last Post” is another part that is defined by this class.

.hr {COLOR: #000000; BACKGROUND-COLOR: transparent}

In posts, one of the BNBB code tags is [hr] which shows a single line and is often used to divide the post in different parts. The color of these lines is defined with this class.

.text1 {FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #000000; FONT-STYLE: normal; BACKGROUND-COLOR: #ffffff}

This specific text isn’t shown on the part of the message board that members use frequently. It only defines the text on the titles of the different sections in your Admin Center.

.catbg {FONT-WEIGHT: bold; FONT-SIZE: 13px; COLOR: #000000; BACKGROUND-IMAGE: url()}

Catbg is the class that defines the category cells in your Forum Index and inside a forum. The category bars have an image as a background, set by the definition BACKGROUND-IMAGE: url().

If you want to change the background image, simply erase the bn tag and replace it with the path to the image you want as a background. If you want to simply use a simple color, erase the definition ‘BACKGROUND-IMAGE: url()’ and add ‘BACKGROUND-COLOR: #color you want’ like the other definitions we have seen.

.bordercolor {FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: Verdana, arial, helvetica, serif; BACKGROUND-COLOR: #000000}

Bordercolor is indeed the color of all the borders of your message board.

.quote {FONT-SIZE: 10px; COLOR: #000000; FONT-FAMILY: Arial, verdana, helvetica, serif; BACKGROUND-COLOR: #dee7ef; BORDER:solid black 1px}

In posts, you have the ability to quote what another member has said and use it in your own post. This box that wraps the quote is defined by this class. The border of the quote box can also be changed with the definition BORDER: solid black 1px. The solid part is recommended to stay that way, but you can change the color by changing ‘black’ to the color you want and the width of the border by increasing the pixels to 2px, etc.

.code {FONT-SIZE: 10px; COLOR: #000000; FONT-FAMILY: Courier New, helvetica, Times New Roman, serif; BACKGROUND-COLOR: #cccccc}

You can also show BNBB codes inside the [code][/code] tags and the code will remain as text and not be interpreted by the forum. The box that wraps the code text is defined by this class and works similarly to the quote box.

.help {CURSOR: help; BACKGROUND-COLOR: transparent}

This class makes the cursor change when your mouse hovers over a “?” button in your Admin Center. It isn’t crucial for your forum’s look, it’s just there as an extra.

.meaction {COLOR: red; BACKGROUND-COLOR: transparent}

This class defines the color and style of the text inside the [me] [/me] tags in your posts.

.admin_color {COLOR: red;}

.gmod_color {COLOR: blue;}

.mem_color {COLOR: black;}

These classes change the color of the names of your members depending on which membergroup they are in. This can be seen on the Users Online section of your Info Center.

.adcolor {BACKGROUND-COLOR: #ffffff}

This obviously refers to the Ad Boards which have a Google Ad at the top of every page. The background color behind this ad can be changed with this class.


Rating
Did you find this article helpful?

Related Articles
Oldest to Newest
Logging In/Out
How Do I Change My Credit Card Details?
How do I register?
Searching a Board

Get a Board! | Contact Us | Link to Us | About Us | Terms of Service | Privacy Policy | Report a TOS Violation
Copyright © Boardnation LLC 2002-2008. All Rights Reserved.