CSS Highlight When Hovering Mouse Over Forum or Thread

Oh I misunderstood. Use this in EXTRA.css:

Code:
.nodeList .nodeInfo:hover, .discussionList .discussionListItem:hover
{
	background-color: red;
}

It works except some of the columns in the thread list aren't changing and I'm not sure why.
 
Try this:
Code:
.nodeList .nodeInfo:hover, .discussionList .discussionListItem:hover, .discussionListItem:hover .posterAvatar, .discussionListItem:hover .stats
{
    background-color: red;
}

You will however have to remove the gradient background from the avatar and stats columns.

To do that use background instead of background-color:
Code:
.nodeList .nodeInfo:hover, .discussionList .discussionListItem:hover, .discussionListItem:hover .posterAvatar, .discussionListItem:hover .stats
{
    background: red;
}
 
Try this:
Code:
.nodeList .nodeInfo:hover, .discussionList .discussionListItem:hover, .discussionListItem:hover .posterAvatar, .discussionListItem:hover .stats
{
    background-color: red;
}
This makes highlighting topics easier for nearly blind peeps like me. I used a light gray color. Works great!

Perfect! It's way better than the one I use for vbulletin because it even lights up conversations.

You should release this as a template modification. I know others would really enjoy this.
 
Oh I misunderstood. Use this in EXTRA.css:

Code:
.nodeList .nodeInfo:hover, .discussionList .discussionListItem:hover
{
background-color: red;
}

It works except some of the columns in the thread list aren't changing and I'm not sure why.
Thanks for trying man I really appreciate it! This is one of my favorite template modifications!
 
Add this to the list of classes:

Code:
, .searchResults .searchResult:hover

Like so:

Rich (BB code):
.nodeList .nodeInfo:hover, .discussionList .discussionListItem:hover, .discussionListItem:hover .posterAvatar, .discussionListItem:hover .stats, .searchResults .searchResult:hover
{
	background: red;
}
 
Add this to the list of classes:

Code:
, .searchResults .searchResult:hover

Like so:

Rich (BB code):
.nodeList .nodeInfo:hover, .discussionList .discussionListItem:hover, .discussionListItem:hover .posterAvatar, .discussionListItem:hover .stats, .searchResults .searchResult:hover
{
background: red;
}
Thanks a lot Jake!

Would you know what would make this display in the postings area under a user's profile?
I thought search results would do it, but I guess not.
 
Just been testing this using default style and this below:

Code:
.nodeList .nodeInfo:hover, .discussionList .discussionListItem:hover
{
    background-color: @primaryLightest;
}

Have a question? I see that the node category heading bar also changes colour on forumhome, which goes orange to light blue, not looking right really. Is it not possible to exclude that orange category heading bar from changing hover colour, so only forums listed below it change hover colour.

image.webp

I guess you could always just change that category bar to another colour, other than orange to suit things much better on hovering.

Been messing around more and this colour seems to work well if you use the default theme and matches the orange category bar.

Code:
.nodeList .nodeInfo:hover, .discussionList .discussionListItem:hover
{
    background-color: @secondaryLightest;
}
 
Try this:
Code:
.nodeList .nodeInfo:hover, .discussionList .discussionListItem:hover, .discussionListItem:hover .posterAvatar, .discussionListItem:hover .stats
{
    background-color: red;
}

You will however have to remove the gradient background from the avatar and stats columns.

To do that use background instead of background-color:
Code:
.nodeList .nodeInfo:hover, .discussionList .discussionListItem:hover, .discussionListItem:hover .posterAvatar, .discussionListItem:hover .stats
{
    background: red;
}


What difference does using "background-color or background" make? Just tried both and can spot no difference at all, the background behind avatar and stats column both change colour no matter which I test.
 
Ah, right I get you. Both show same colour effect on hover. But using background would allow you to add an image for more styling options unlike background-color. I was trying to spot the difference using just hover colour then, of course there is none.

This pretty good, like the effect it adds with forums.
 
I've ended up using this myself, leaving out the "stats box" getting recoloured. It matches better, that the blue box on forumhome doesn't get recoloured showing post information.

Code:
.nodeList .nodeInfo:hover, .discussionList .discussionListItem:hover, .discussionListItem:hover .posterAvatar
{
    background-color: @secondaryLightest;
}

Forum Home:
a.webp

Forum Listings:
b.webp

Pretty snazzy! (y)
 
I've ended up using this myself, leaving out the "stats box" getting recoloured. It matches better, that the blue box on forumhome doesn't get recoloured showing post information.

Code:
.nodeList .nodeInfo:hover, .discussionList .discussionListItem:hover, .discussionListItem:hover .posterAvatar
{
    background-color: @secondaryLightest;
}

Forum Home:
View attachment 27766

Forum Listings:
View attachment 27767

Pretty snazzy! (y)
Thank you!
 
i used to have this for Xf 1.x but it is not working for Xf 2.x

/* discussionList Hover effect */
.nodeList .nodeInfo:hover, .discussionList .discussionListItem:hover, .discussionListItem:hover .posterAvatar, .discussionListItem:hover .stats {
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
.nodeList .nodeInfo:hover, .discussionList .discussionListItem:hover, .discussionListItem:hover .posterAvatar, .discussionListItem:hover .stats:hover {
-moz-transform: scale(1.05);
-webkit-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
-webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05);transform: scale(1.05);
}
.nodeList .nodeInfo:hover, .discussionList .discussionListItem:hover, .discussionListItem:hover .posterAvatar, .discussionListItem:hover .stats
{
background-color: Dark gray;
}
 
Top Bottom