• 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?

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

Jake Bunce

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

lol, talk about over thinking a solution!

this worked great, thanks!!
 
#4
.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.
 

Jake Bunce

XenForo moderator
Staff member
#5
.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.
Yes. Just specify appropriate background positions for your sprite.