MyBB Community Forums

I've found a way to get the whole trow to have a different background color when hovered. Instead of having one table cell having a hover effect at a time, the whole row will have an effect no matter where your cursor is. Here's the code that gets it done:

tbody[id*='cat'] tr:hover td.trow1, 
tbody[id*='cat'] tr:hover td.trow2 {
    background: #dedede;
}

That might be confusing so I'll explain it. Each category's tbody has it's own id which corresponds the the category number you see in the URL. So, for example, the Miscellaneous forum's URL is http://community.mybb.com/forum-12.html and 12 would be part of its id (cat_12_e). And even though each category has its own id, they all start with "cat". That's what the first part is doing. It's calling every tbody where the id has "cat" in its name.

The second and third parts are where all the magic happens. The second part (tr:hover) is setting up for the third and final part so that when a tr (the whole row) is hovered, each table cell with a class of trow1 and trow2 is set with a different background.

This works in IE7+, Firefox, Chrome, Safari, and Opera so you're safe to use it without any browser compatibility issues. And, if you're worrying about IE6, remember that this is a side effect and IE6 users don't need it to use the forum.

Awesome tutorial, Always love css tutorials

Very nice! Thanks.

To have this working with IE6, I recommend http://www.xs4all.nl/~peterned/csshover.html

Darn it right when I thought I found it first... lol..

Good work ferron .

Very good, thanks.

nice tutorial,

but how to change one column in in the trow1 and trow2

nice,...thank you !

thanks man..repped.

Where do we put the code at?

And do we need to subsitute our forum id's in the code?

You don't need to change anything with it, and you can just stick it in the bottom of your global.css file for any theme (Well, not any, but most).