Changing the icons in front of the forums in the forumlist

SchmitzIT

Well-known member
Hi,

Is it possible to change the graphical icon in front of the forums when checking the list of forums? For vB4, we found a modification that allows us to actually control this in the admincp, and set it to display specific icons.

It would be awesome if somthing like that could be added by default to XF.

If you're unsure of what I mean, please check www.entropiaplanets.com/forums/forums.php. As you can see, we have a Generic section with one specific icon, and then a variety of sections for different planets, each of which has been assigned an icon matching the company producing these planets.

It's also a great way to draw attention to sponsored forums.

Thanks :)

Peter
 
Anyone? Pleazse? *puppy eyes*

Agggh I just finally managed to find where to change it, but I've looked at so many templates today I'm not sure which one it was now. I THINK it was in xenforo.css, or in one of the xenforo.css files, and I wound up changing the file type to .gif* on there and uploaded something else.

Try the xenforo.css file and search for .png?

* because I simply could not overwrite that png file. It was the strangest thing, I'd delete the contents of the image, flatten it, color it something else, kick it down the stairs, club it with a frying pan, hurl it out a window, and STILL it would pop right back to life on the forum, like a magic trick.
 
If anyone have any news about how to change these small icons it would be super duper?

I would strongly prefer a add-on to avoid changing any code manually.
- Or surgest the option to upload an icon when you add a new root-note
 

In 1.1 you need to add a background-position to use nonsprite images with that CSS, like this:

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;
}
 
That works great:)

One little challenge:
When I log in as admin everything is perfect.
When I log in as user, the name-unread icons are placed totally wrong - I fixed that with Jakes background-position: 0px 0px

The problem is, when I visit the board as a guest the unread-icons are still wrong - se the KAMERAER at the photo:

icons.webp

Hope someone has a solution.

All the best
Morten
 
It's still using the sprite background position for the unread icon. Try adding !important to Jakes css above like so...

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 !important;
}

Also, I noticed you're using icons that are 40x40px, and your settings are for 36x36px icons. You can make it 40px for width and height in the Node Icon style property to display them properly.

ACP > Styles > Your Style > Style Properties > Node Icons
 
Looks very nice now. I'll write a response to your question in the other thread detailing how I find the css to modify so you can do these things for yourself when I have more time today.
 
Thanks a lot. Oh that would be so nice if you have the time for that. Then I will use your method to try to find the white background color in the text/comment area so I can make it a little less bright.
 
Just got another strange error: Everything is perfect now, when I am not logged in but when I log in as a user og admin, the standard icons apear under one of the categories - the Køb og Salg ??? Thats strange because the picture is fine and the css is a copy of the other ones just with the image name changed.
I have checked the image, tried with other images, tried to remove the Ø in the name and everything but again - it works perfect when I am not logged in and it is only the forum-icons in this one category?
Any ideas:)
the link: www.hilmer-koch.dk/forum

And the EXTRA.css: (only a part of it - the 24 works but not the 40 )

/* custom status icons */
.node .node_24 .forumNodeInfo .nodeIcon, .node .node_24 .categoryForumNodeInfo .nodeIcon {
background-image: url("@imagePath/xenforo/widgets/forum-ikoner/billedbehandling-read.png");
background-position: 0px 0px; !important;
}
.node .node_24 .forumNodeInfo.unread .nodeIcon, .node .node_24 .categoryForumNodeInfo.unread .nodeIcon {
background-image: url("@imagePath/xenforo/widgets/forum-ikoner/billedbehandling-unread.png");
background-position: 0px 0px; !important;
}
.node .node_40 .forumNodeInfo.unread .nodeIcon, .node .node_40 .categoryForumNodeInfo.unread .nodeIcon {
background-image: url("@imagePath/xenforo/widgets/forum-ikoner/salg-read.png");
background-position: 0px 0px; !important;
}
.node .node_40 .forumNodeInfo.unread .nodeIcon, .node .node_40 .categoryForumNodeInfo.unread .nodeIcon {
background-image: url("@imagePath/xenforo/widgets/forum-ikoner/salg-unread.png");
background-position: 0px 0px; !important;
}
 
Your css for the read icon is incorrect and you also have an extra ; in background position. I've colored the incorrect portion in red below.

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

It should look like this:
Code:
.node .node_24 .forumNodeInfo .nodeIcon, .node .node_24 .categoryForumNodeInfo .nodeIcon {
background-image: url("@imagePath/xenforo/widgets/forum-ikoner/billedbehandling-read.png");
background-position: 0px 0px !important;
}
.node .node_24 .forumNodeInfo.unread .nodeIcon, .node .node_24 .categoryForumNodeInfo.unread .nodeIcon {
background-image: url("@imagePath/xenforo/widgets/forum-ikoner/billedbehandling-unread.png");
background-position: 0px 0px !important;
 
.node .node_40 .forumNodeInfo .nodeIcon, .node .node_40 .categoryForumNodeInfo .nodeIcon {
background-image: url("@imagePath/xenforo/widgets/forum-ikoner/salg-read.png");
background-position: 0px 0px !important;
}
.node .node_40 .forumNodeInfo.unread .nodeIcon, .node .node_40 .categoryForumNodeInfo.unread .nodeIcon {
background-image: url("@imagePath/xenforo/widgets/forum-ikoner/salg-unread.png");
background-position: 0px 0px !important;
 
In 1.1 you need to add a background-position to use nonsprite images with that CSS, like this:

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;
}
Jake,
Is there a way to replace those background image with a web font icon such as how we do it here
http://xenforo.com/community/resources/fontawesome-icons-in-visitor-tab-account-wrapper.1861/
 
Top Bottom