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

XF 1.2 How to get node icons to change on hover?

Discussion in 'XenForo Questions and Support' started by KamelJabber, Feb 4, 2014.

  1. KamelJabber

    KamelJabber Member

    I would like my forum node icon to change on hover (between 2 different images).

    I may be approaching this incorrectly, however, I noticed the "rss" icon highlights when you hover over the forum node row. I wanted to take advantage of this hover event and also change my forum node icon.

    It appears that template is in node_forum_level_2. I was looking for something like a jQuery .hover() method or something similar.

    Is there an easy way for me to piggy back off of the same hover event?

    TY
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    This can be done with CSS.

    Admin CP -> Appearance -> Templates -> EXTRA.css

    Add this code:

    Code:
    .node.node_2 .forumNodeInfo.unread .nodeIcon
    {
    	background-image: url("path/to/image.gif");
    	background-position: 0px 0px;
    }
    
    .node.node_2:hover .forumNodeInfo.unread .nodeIcon
    {
    	background-image: url("path/to/hoverimage.gif");
    	background-position: 0px 0px;
    }
    
     
    KamelJabber likes this.
  3. KamelJabber

    KamelJabber Member


    lol, talk about over thinking a solution!

    this worked great, thanks!!
     
  4. Hristo Avramov

    Hristo Avramov Active Member

    .node.node_2 .forumNodeInfo.unread .nodeIcon
    {
    background-image: url("path/to/image.gif");
    background-position: 0px 0px;
    }

    With this code. can I use sprite image and put different icon for every forum ?
    By the way I want to use the same icon for read and unread.
     
  5. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Yes. Just specify appropriate background positions for your sprite.
     

Share This Page