1. 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

Discussion in 'Styling and Customization Questions' started by DRE, Oct 25, 2011.

  1. DRE

    DRE Well-Known Member

    DomainArchitect.com likes this.
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Admin CP -> Appearance -> Style Properties -> General -> Link, Hover State
     
  3. DRE

    DRE Well-Known Member

    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.
     
  4. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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.
     
    The8thLegion likes this.
  5. Brogan

    Brogan XenForo Moderator Staff Member

    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;
    }
     
    Adam Howard and DRE like this.
  6. DRE

    DRE Well-Known Member

    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.
     
  7. DRE

    DRE Well-Known Member

    Thanks for trying man I really appreciate it! This is one of my favorite template modifications!
     
  8. Trover

    Trover Member

    Does anyone know how to implement this into search results?
     
  9. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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;
    }
    
     
    Adam Howard, DRE and Trover like this.
  10. Trover

    Trover Member

    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.
     
  11. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Add this to the end:

    Code:
    , .profileContent .searchResult:hover
    
     
    Trover likes this.
  12. Trover

    Trover Member

    Thanks Jake!
     
  13. mrGTB

    mrGTB Well-Known Member

    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;
    }
     
  14. mrGTB

    mrGTB Well-Known Member


    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.
     
  15. Brogan

    Brogan XenForo Moderator Staff Member

    Background allows you to set other attributes, such as an image.
     
  16. mrGTB

    mrGTB Well-Known Member

    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.
     
  17. mrGTB

    mrGTB Well-Known Member

    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)
     
    kipkip and DRE like this.
  18. kipkip

    kipkip Member

    Thank you!
     

Share This Page