[How To?] Change Category Row Color per Category ID

[FooFighter]

How would we change the Category Row Color for each category?

Like here on the community forums the category row color is that deep blue.

But I want to choose a different color for each category row...its "trow" I guess?

Thanks

[Yaldaram]

You've to use class="trow_{$forum['fid']}" in "forumbit_depth2_forum" template and then assign its class in global.css like this;

.trow_X{
background: #969696;
}

Replace X with the Category ID where you want that particular bg color to use.

[Jack Clarke]

Obviously Yaldaram's code wouldn't provide you with alternating colours. If you want to do that then use this class:

class="{$bgcolor}_{$forum['fid']}"

You'll need to edit trow1 and trow2 for each category then.

Templates: forumbit_depth2_cat and forumbit_depth2_forum

[Yaldaram]

{$bgcolor} will alternate the trow1 and trow2. In this case OP has to create both styles in global.css. However if he uses the class I posted then he just have to create single class.

[FooFighter]

You've to use class="trow_{$forum['fid']}" in "forumbit_depth2_forum" template and then assign its class in global.css like this;

.trow_X{
background: #969696;
}

Replace X with the Category ID where you want that particular bg color to use.

So after I put the class in the forumbit depth 2 forum template, would I add multiple copies of this;

.trow_X{
background: #969696;
}

in my global css per category id, such as this for example in my global css;

.trow_3{
background: #969696;
}

.trow_4{
background: #482658;
}

.trow_8{
background: #376587;
}

Would I just keep adding and changing the "X" per category ID in my global.css and changing the colors?

Thanks

[Yaldaram]

Yes, that's right.

[FooFighter]

Thanks Guys!
...
One more question on this one;

Using that code, it will change the row color where the "title" / "name" of the category is...that row color, right?

Thanks, I love the mybb

[FooFighter]

This is my "forumbit_depth2_forum"

<li><table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}">
<tr onclick="window.location.href='forumdisplay.php?fid={$forum['fid']}';" style="cursor: pointer;">
<td align="center" valign="middle" width="1px" rowspan="2"><img src="{$theme['imgdir']}/{$lightbulb['folder']}.gif" alt="{$lightbulb['altonoff']}" title="{$lightbulb['altonoff']}" class="ajax_mark_read" id="mark_read_{$forum['fid']}"/></td>
<td valign="top">
<strong><a href="{$forum_url}">{$forum['name']}</a></strong>{$forum_viewers_text}
<div>{$forum['description']}{$modlist}{$subforums}</div>
</td>
</tr>
<tr onclick="window.location.href='forumdisplay.php?fid={$forum['fid']}';" style="cursor: pointer;">
<td valign="top">
{$lastpost}
</td>
</tr>
</table></li>

How would I add the

class="trow_{$forum['fid']}"