XF 1.2 Custom Forum Icons

[Chi Bearhawks]

So I want to add custom forum icons for each specific forum. The problem is, every css option that's bene posted here has no effect in FF and IE. I can accomplish this goal by putting a direct image tag into the template itself that will load over the original forum icon (luckily, I'm using jpg's to cover the whole thing), however, I don't want to have to do it that way. Are there any methods out there that I just haven't been able to find that can allow for custom forum icons for different forums?

 

[Shelley]

So I want to add custom forum icons for each specific forum. The problem is, every css option that's bene posted here has no effect in FF and IE. I can accomplish this goal by putting a direct image tag into the template itself that will load over the original forum icon (luckily, I'm using jpg's to cover the whole thing), however, I don't want to have to do it that way. Are there any methods out there that I just haven't been able to find that can allow for custom forum icons for different forums?

This should work for you since i'm using it on my own forum. http://xenforo.com/community/threads/rc-1-custom-node-status-icons-read-unread.10886/

 

[Chi Bearhawks]

This should work for you since i'm using it on my own forum. http://xenforo.com/community/threads/rc-1-custom-node-status-icons-read-unread.10886/

I actually tried that one, but it only works for Chrome. If I go to FF or IE, the default icons are still there, even if I clear out everything in the browser. I also discovered that none of my subforum icons appear in those browsers either, which I had done quite some time ago.

 

[Shelley]

I actually tried that one, but it only works for Chrome. If I go to FF or IE, the default icons are still there, even if I clear out everything in the browser. I also discovered that none of my subforum icons appear in those browsers either, which I had done quite some time ago.

It definitely works in all browsers as you can see on my own site. Did you clear the cache which could be the issue? But I can assure you it does work. I'll go grab a snippet of code I am using and will post it in a second.

 

[Chi Bearhawks]

It definitely works in all browsers as you can see on my own site. Did you clear the cache which could be the issue? But I can assure you it does work. I'll go grab a snippet of code I am using and will post it in a second.

Here's how I have each forum icon:

.node.node_28 .forumNodeInfo .nodeIcon, .node.node_28 .categoryForumNodeInfo .nodeIcon {
    background-image: url("../theme/images/forum/28.jpg");
    background-position: 0px 0px;}
.node.node_28 .forumNodeInfo.unread .nodeIcon, .node.node_28 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("../theme/images/forum/28.jpg");
    background-position: 0px 0px;}

I've talked to about 20 users on my forums and it's all the same thing: Chrome users see them, IE and FF users see blanks for subforums and default icons for forums.

 

[Shelley]

this will sort out your subforums in the forum_view pages you'll have to change the ID and imagepath to your preference and keep adding the css for all your forum_view subforum nodes.

.node.node_15 .forumNodeInfo.unread .nodeIcon, .node.node_15 .categoryForumNodeInfo.unread .nodeIcon {
  background-image: url("@imagePath/xenforo/icons/admin_markup.png");
  background-position: 0 0;

}
.node.node_15 .forumNodeInfo .nodeIcon, .node.node_15 .categoryForumNodeInfo .nodeIcon {
  background-image: url("@imagePath/xenforo/icons/admin_markup.png");
  background-position: 0 0;

}

and this is the code I'm using for the standard forum_list page. Again add in your own ID and imagepaths

.node .node_18 .forumNodeInfo .nodeIcon, .node .node_18 .categoryForumNodeInfo .nodeIcon {
  background-image: url("@imagePath/xenforo/icons/node18-read.png");
  background-position: 0;
  background-repeat: no-repeat;
  opacity: 0.5;
}
.node .node_18 .forumNodeInfo.unread .nodeIcon, .node .node_18 .categoryForumNodeInfo.unread .nodeIcon {
  background-image: url("@imagePath/xenforo/icons/node18-unread.png") ;
  background-position: 0;
  background-repeat: no-repeat;
  opacity: 1;
}

 

[Chi Bearhawks]

I used your code for both subforums and regular forums, and I have the same issue: Works fine in Chrome, but displays the default icons in FF and IE. Other users are confirming this. Hmmm, this doesn't make sense...

 

[Shelley]

I used your code for both subforums and regular forums, and I have the same issue: Works fine in Chrome, but displays the default icons in FF and IE. Other users are confirming this. Hmmm, this doesn't make sense...

That is unusual. Perhaps there's something in your code that is stopping this from displaying in other browsers as it definitely works. Perhaps @Brogan might be able to step in and shed some light on the matter. A link to your forum would also be helpful

 

[Paul B]

Yes, would need a link to check.

 

[Chi Bearhawks]

Well, I tried adding a forum and subforum icon to a forum in my default, vanilla xenForo skin, and it works fine in all browsers, so it looks like it's a customization to the template/css that I've done with my custom skin that's interfering. I'll take a look through it and see if I can figure it out.

 

[Shelley]

Well, I tried adding a forum and subforum icon to a forum in my default, vanilla xenForo skin, and it works fine in all browsers, so it looks like it's a customization to the template/css that I've done with my custom skin that's interfering. I'll take a look through it and see if I can figure it out.

Which custom skin is it that your experiencing these issues on?

 

[Chi Bearhawks]

FIXED IT!

The custom skin is one that I created entirely myself, based on the default xenForo skin.

By the process of elimination (from commenting out different parts of the css), I determined that it's this bit of code that I am using for a piece of an article layout, that I added for a template I created myself.

span.comment-time a {color:#888;"}

I accidentally left a quotation from when I was creating the css inside the template itself to test it out. I'm still really confused as to why that would cause the problem I had though.

 

[Paul B]

That error would affect all other CSS after it, preventing it from being applied.