How to have different background color for each Category in Index page

owladmin · 04-05-2018, 03:01 PM

I mean this:

[Image: thead_bg_color.png]

It is a bit similar to my previous Tutorial:
How to use background image in forumbit_depth2_forum

Only we will now editing:
Home Template Sets Default Templates Edit Template: forumbit_depth1_cat

And to my humble opinion this is more effective with background color rather than images.

1. Open:
Home Template Sets Default Templates Edit Template: forumbit_depth1_cat

Now you have this:

Code:
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
 <thead>
 <tr>
 <td class="thead{$expthead}" colspan="5">
 <div class="expcolimage"><img src="{$theme['imgdir']}/{$expcolimage}" id="cat_{$forum['fid']}_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div>
 <div><strong><a href="{$forum_url}">{$forum['name']}</a></strong><br /><div class="smalltext">{$forum['description']}</div></div>
 </td>
 </tr>
 </thead>
 <tbody style="{$expdisplay}" id="cat_{$forum['fid']}_e">
 <tr>
 <td class="tcat" colspan="2"><span class="smalltext"><strong>{$lang->forumbit_forum}</strong></span></td>
 <td class="tcat" width="85" align="center" style="white-space: nowrap"><span class="smalltext"><strong>{$lang->forumbit_threads}</strong></span></td>
 <td class="tcat" width="85" align="center" style="white-space: nowrap"><span class="smalltext"><strong>{$lang->forumbit_posts}</strong></span></td>
 <td class="tcat" width="200" align="center"><span class="smalltext"><strong>{$lang->forumbit_lastpost}</strong></span></td>
 </tr>
 {$sub_forums}
 </tbody>
 </table>
 <br />

Add:

Code:
id="thead_{$forum['fid']}"

like this:

Code:
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
 <thead>
 <tr>
 <td id="thead_{$forum['fid']}" class="thead{$expthead}" colspan="5">
 <div class="expcolimage"><img src="{$theme['imgdir']}/{$expcolimage}" id="cat_{$forum['fid']}_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div>
 <div><strong><a href="{$forum_url}">{$forum['name']}</a></strong><br /><div class="smalltext">{$forum['description']}</div></div>
 </td>
 </tr>
 </thead>
 <tbody style="{$expdisplay}" id="cat_{$forum['fid']}_e">
 <tr>
 <td class="tcat" colspan="2"><span class="smalltext"><strong>{$lang->forumbit_forum}</strong></span></td>
 <td class="tcat" width="85" align="center" style="white-space: nowrap"><span class="smalltext"><strong>{$lang->forumbit_threads}</strong></span></td>
 <td class="tcat" width="85" align="center" style="white-space: nowrap"><span class="smalltext"><strong>{$lang->forumbit_posts}</strong></span></td>
 <td class="tcat" width="200" align="center"><span class="smalltext"><strong>{$lang->forumbit_lastpost}</strong></span></td>
 </tr>
 {$sub_forums}
 </tbody>
 </table>
 <br />

Now you have this:
[Image: thead_id.png]

2. Now open global.css or any other css file and add this code:

Code:
#thead_1 {
   background: #FC1212; /* or any other color */
 }

3. Do this for every thead ID you have with different background color.

-------------------------------------------------------------------------------------------------

HOPE YOU WILL FIND THIS USEFUL!

How to have different background color for each Category in Index page

Submitted by owladmin, 04-05-2018, 03:01 PM, Thread ID: 87169