Tip: Background change on hover (board index)

[_Jojo_]

Add this little modification to the Curve theme to have a nice and pleasant highlight hover effect on your boards. This can be very helpful especially when using the quick moderation checkboxes: As the whole row is highlighted, you can quickly see if you picked the correct checkbox. Won't work on old versions of IE, but I don't care about those. Maybe this could also be incorported into the default Curve theme?

Code Select Expand

/* message index row hover highlight */

/* Alternating backgrounds for posts, and several other sections of the forum. */
#messageindex tr:hover .windowbg
{
background-color: #f0f4fa;
}
#messageindex tr:hover .windowbg2
{
background-color: #f7fcff;
}
#messageindex tr:hover .windowbg3
{
background-color: #d5d8de;
}

/* Sticky topics get a different background */
#messageindex tr:hover .stickybg
{
background-color: #f2e1d7;
}
#messageindex tr:hover .stickybg2
{
background-color: #fcede3;
}

/* Locked posts get a different shade, too! */
#messageindex tr:hover .lockedbg
{
background-color: #dfe7ed;
}
#messageindex tr:hover .lockedbg2
{
background-color: #e1ebf2;
}


[Antechinus]

It could, but it's a matter of personal preference like a lot of things in theming.

[_Jojo_]

Sure many things are a matter of personal preferences, but I think highlighted table rows are something that increases usability a lot. It's probably the only built-in feature of phpBB3 that I want but SMF doesn't have, though the hovering in phpBB3 is also a whole lot uglier.

[moguns]

I went over to phpbb3 site and I have to say this is a neat trick. Where do you put the code in 2.0?

[_Jojo_]

For example in Themes/default/css/index.css - Too keep things clean and making upgrading easy, though, I always put my own modifications in a separate CSS file (called custom.css) and add this line at the very top of index.css:

Code Select Expand

@import url("custom.css");

[moguns]

JOJO works well when you roll over posts. Is there a way to do it for the board?

Pretty smart on the custom.css

[_Jojo_]

Is there a way to do it for the board?

Yes, most probably by applying similar CSS attributes to  .table_list .windowbg and .table_list .windowbg2 I guess, but I haven't done that, you'd have to find that out for yourself.

[moguns]

Well that's ok. Thanks for the neat trick!