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:

Rich (BB 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:

Rich (BB 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.
 
Top