XF 1.2 Node Icon GIF

[JonM]

Hey guys,

I just bought Xenforo and one of the first things I tried to do was customize the node icons. I used the following code in EXTRA.css

/* custom status icons */
.node .node_2 .forumNodeInfo .nodeIcon, .node .node_2 .categoryForumNodeInfo .nodeIcon {
background-image: url("@imagePath/xenforo/widgets/teatime_icon_read.png");
}
.node .node_2 .forumNodeInfo.unread .nodeIcon, .node .node_2 .categoryForumNodeInfo.unread .nodeIcon {
background-image: url("@imagePath/xenforo/widgets/teatime_icon_unread.gif");
}​

The read.png seams to be working great, but the unread.gif is getting cut off down the middle. I tried adjusting the height, width, padding, margins, positioning etc, but no matter where it is located, it is cut off.

the forum under construction
http://teatimeanimation.elitecadre.com/community/index.php

the troubling GIF
http://teatimeanimation.elitecadre....fault/xenforo/widgets/teatime_icon_unread.gif


Any tips?

 

[Shelley]

Hey guys,

I just bought Xenforo and one of the first things I tried to do was customize the node icons. I used the following code in EXTRA.css





The read.png seams to be working great, but the unread.gif is getting cut off down the middle. I tried adjusting the height, width, padding, margins, positioning etc, but no matter where it is located, it is cut off.

the forum under construction
http://teatimeanimation.elitecadre.com/community/index.php

the troubling GIF
http://teatimeanimation.elitecadre....fault/xenforo/widgets/teatime_icon_unread.gif


Any tips?

You can either go into style properties or apply the following in extra css but you have to set the coordinates for that specific icon to the following. You may not need to apply the !important but it's probably best adjust the coordinates in the style properties.

.node .forumNodeInfo.unread .nodeIcon, .node .categoryForumNodeInfo.unread .nodeIcon {
background-position: 0 0 !important;

 

[JonM]

You can either go into style properties or apply the following in extra css but you have to set the coordinates for that specific icon to the following. You may not need to apply the !important but it's probably best adjust the coordinates in the style properties.

background-position: 0 0 !important;

Adding it to the Node Icon style properties worked perfectly! Thanks!