Different og:image for each forum category (again)

I have now manage to to put a custom image in one of my forum categories. I put the new image code in the file Extras.css. How and where can i remove the original image (the baloons) on the left of my new forum image. Take a look here: http://ktdata.org

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

Add this code:

Code:
.nodeList .node_2 .nodeIcon
{
	display: none;
}

.nodeList .node_2 .nodeText
{
	margin-left: 0px !important;
}

That should do it.

This guide may also be useful:

http://xenforo.com/community/threads/rc-1-custom-node-status-icons-read-unread.10886/

But in 1.1 you must also set the background-position unless you are using sprites that mirror the default node icons. Here is the code from that thread with the background-position added:

Rich (BB code):
/* custom status icons */
.node .node_7 .forumNodeInfo .nodeIcon, .node .node_7 .categoryForumNodeInfo .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-read-7.png");
    background-position: 0px 0px;
}
.node .node_7 .forumNodeInfo.unread .nodeIcon, .node .node_7 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-unread-7.png");
    background-position: 0px 0px;
}
 
I have put this code in to Extra.css
.nodeList .node_2 .nodeText:before
{
content: url('icons/chat_48.png');
float: left;
margin-right: 5px;
}

Do i have to put the both of this codes in to EXTRA.css
 
Yes. Add my code in addition to yours. Your code adds the extra icon. My code hides the original icon like you wanted. But that link I posted shows a better way, and that is to use CSS to replace the original icon. It also allows you to specify a read / unread image.
 
You can take a look now, i have a new icon there, is there a way to move this icon longer to the left. If you want i give you admin access so you can put in the right code for me....
This is my first day with xenforo so i hope i dont yelllll to mutch...:whistle:
 
The code from my previous post will fix the spacing. But you added code for the other solution instead. You are mixing two different methods of changing the node icons.

I recommend you remove your current code and follow these instructions instead:

This guide may also be useful:

http://xenforo.com/community/threads/rc-1-custom-node-status-icons-read-unread.10886/

But in 1.1 you must also set the background-position unless you are using sprites that mirror the default node icons. Here is the code from that thread with the background-position added:

Rich (BB code):
/* custom status icons */
.node .node_7 .forumNodeInfo .nodeIcon, .node .node_7 .categoryForumNodeInfo .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-read-7.png");
    background-position: 0px 0px;
}
.node .node_7 .forumNodeInfo.unread .nodeIcon, .node .node_7 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-unread-7.png");
    background-position: 0px 0px;
}
 
Finaly i find the problem, i put the images in the wrong directory..... Now its working fine. Thank you for the good support

It's only partially working. The unread icon is showing as blank. You need to set the background-position like I said:

Rich (BB code):
/* custom status icons */
.node .node_7 .forumNodeInfo .nodeIcon, .node .node_7 .categoryForumNodeInfo .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-read-7.png");
    background-position: 0px 0px;
}
.node .node_7 .forumNodeInfo.unread .nodeIcon, .node .node_7 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-unread-7.png");
    background-position: 0px 0px;
}

The underlined parts are currently missing on your forum. You need to add them.
 
Top Bottom