• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

CSS Highlight When Hovering Mouse Over Forum or Thread

DRE

Well-known member
#3
Did not work. If you look at my examples you'll see what I was referring to.

It highlights the whole row. Check it out.
 

Jake Bunce

XenForo moderator
Staff member
#4
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.
 

Brogan

XenForo moderator
Staff member
#5
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;
}
 

DRE

Well-known member
#6
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.
 

DRE

Well-known member
#7
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!
 

Jake Bunce

XenForo moderator
Staff member
#9
Add this to the list of classes:

Code:
, .searchResults .searchResult:hover
Like so:

Code:
.nodeList .nodeInfo:hover, .discussionList .discussionListItem:hover, .discussionListItem:hover .posterAvatar, .discussionListItem:hover .stats, .searchResults .searchResult:hover
{
	background: red;
}
 
#10
Add this to the list of classes:

Code:
, .searchResults .searchResult:hover
Like so:

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.
 

mrGTB

Well-known member
#13
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.png

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;
}
 

mrGTB

Well-known member
#14
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.
 

mrGTB

Well-known member
#16
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.
 

mrGTB

Well-known member
#17
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.png

Forum Listings:
b.png

Pretty snazzy! (y)
 
#18
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!