How to make each category a diff colour ?

[nudu]

Like here

http://www.favits.com/foros/

How each category is a unique style.

 

[Filez]

most code it in manually and I believe if you google you will find several good references to your endevor.

 

[Hoxxy]

Thanks and credit go to DEViANT for this great tut

First of goto your FORUMHOME template and find the following phrase:

<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<thead>
	<tr align="center">
	  <td class="thead">&nbsp;</td>
	  <td class="thead" width="100%" align="$stylevar[align=left]">$vbphrase[forum]</td>
	  <td class="thead">$vbphrase[last_post]</td>
	  <td class="thead">$vbphrase[threads]</td>
	  <td class="thead">$vbphrase[posts]</td>
	  <if condition="$vboptions['showmoderatorcolumn']">
	  <td class="thead">$vbphrase[moderator]</td>
	  </if>
	</tr>
</thead>

Replace the entire code with the following:

<table cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">

If your FORUMHOME template does not have the above mentioned phrase you may skip this step.

Next, goto your forumhome_forumbit_level1_nopost template and find:

<tbody>

Bellow this add:

<table class="tborder" cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
 <br />

If your forumhome_forumbit_level1_nopost template already includes these codes you may skip this step.

What we did now was change the default vBulletin display to Have all the categories linked together and made spaces in between them.

Now lets get down to changing the head colors.

In your forumhome_forumbit_level1_nopost template find:

<td class="tcat" colspan="<if condition="$vboptions[showmoderatorcolumn]">6<else />5</if>">

Replace this code with:

<td style="border-bottom: 1px solid #000000;" class="$forum[title]" colspan="<if condition="$vboptions[showmoderatorcolumn]">6<else />5</if>">

Now if you were paying attention, you'd know what happens next. But I'll explain it to you anyway. The table's class will now be the same as the categorie's Name. Therefore you will need to Go and create a new class for every main category you've got. This will also mean that you will need to change the main category names not to include ANY spaces, slashes, etc. The only allowed characters other than the normal alphabet letters is an underscore "_".

After you've altered your category names, goto your style's Main CSS page and start creating classes. Go to the Additional CSS Definitions box and add the classes to the bottom box. A typical class would look something like this:

 .categoryname {
background: #color url(path_to_image_used_to_fill_the_table) repeat-x top left;
color: #textcolor_to_use;
}

Demo:

.Announcements
{
     background: #bc1818 url(images/DL/misc/ann_fill.gif) repeat-x top left;
     color: #FFFFFF;
}

Finally, you can also create category name images and replace the Category name variable in the forumhome_forumbit_level1_nopost template with <img> tags that points to the Created images on your server.

 

[nudu]

Thanks and credit go to DEViANT for this great tut

First of goto your FORUMHOME template and find the following phrase:

<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<thead>
	<tr align="center">
	  <td class="thead">&nbsp;</td>
	  <td class="thead" width="100%" align="$stylevar[align=left]">$vbphrase[forum]</td>
	  <td class="thead">$vbphrase[last_post]</td>
	  <td class="thead">$vbphrase[threads]</td>
	  <td class="thead">$vbphrase[posts]</td>
	  <if condition="$vboptions['showmoderatorcolumn']">
	  <td class="thead">$vbphrase[moderator]</td>
	  </if>
	</tr>
</thead>

Replace the entire code with the following:

<table cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">

If your FORUMHOME template does not have the above mentioned phrase you may skip this step.

Next, goto your forumhome_forumbit_level1_nopost template and find:

<tbody>

Bellow this add:

<table class="tborder" cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
 <br />

If your forumhome_forumbit_level1_nopost template already includes these codes you may skip this step.

What we did now was change the default vBulletin display to Have all the categories linked together and made spaces in between them.

Now lets get down to changing the head colors.

In your forumhome_forumbit_level1_nopost template find:

<td class="tcat" colspan="<if condition="$vboptions[showmoderatorcolumn]">6<else />5</if>">

Replace this code with:

<td style="border-bottom: 1px solid #000000;" class="$forum[title]" colspan="<if condition="$vboptions[showmoderatorcolumn]">6<else />5</if>">

Now if you were paying attention, you'd know what happens next. But I'll explain it to you anyway. The table's class will now be the same as the categorie's Name. Therefore you will need to Go and create a new class for every main category you've got. This will also mean that you will need to change the main category names not to include ANY spaces, slashes, etc. The only allowed characters other than the normal alphabet letters is an underscore "_".

After you've altered your category names, goto your style's Main CSS page and start creating classes. Go to the Additional CSS Definitions box and add the classes to the bottom box. A typical class would look something like this:

 .categoryname {
background: #color url(path_to_image_used_to_fill_the_table) repeat-x top left;
color: #textcolor_to_use;
}

Demo:

.Announcements
{
     background: #bc1818 url(images/DL/misc/ann_fill.gif) repeat-x top left;
     color: #FFFFFF;
}

Finally, you can also create category name images and replace the Category name variable in the forumhome_forumbit_level1_nopost template with <img> tags that points to the Created images on your server.

Does this mean that I can't have spaces in my category names?

 

[Hoxxy]

No spaces are fine but as it does however look for the cat' names if you were to have 2 or more similar cat'...eg:

Games chat
Games downloads

it will find and use the word "Games" and so those cats' will have the same color/background, this is the only floor I can find in this tut atm but is easily ammended by renaming your cats'