1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.2 Custom Forum Icons

Discussion in 'Styling and Customization Questions' started by Chi Bearhawks, Aug 22, 2013.

  1. Chi Bearhawks

    Chi Bearhawks Member

    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?
     
  2. Shelley

    Shelley Well-Known Member

    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/
     
    RoldanLT likes this.
  3. Chi Bearhawks

    Chi Bearhawks Member

    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.
     
  4. Shelley

    Shelley Well-Known Member

    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.
     
  5. Chi Bearhawks

    Chi Bearhawks Member

    Here's how I have each forum icon:
    Code:
    .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.
     
  6. Shelley

    Shelley Well-Known Member

    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.

    Code:
    .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

    Code:
    .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;
    }
    
     
  7. Chi Bearhawks

    Chi Bearhawks Member

    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...
     
  8. Shelley

    Shelley Well-Known Member

    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
     
  9. Brogan

    Brogan XenForo Moderator Staff Member

    Yes, would need a link to check.
     
  10. Chi Bearhawks

    Chi Bearhawks Member

    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.
     
  11. Shelley

    Shelley Well-Known Member

    Which custom skin is it that your experiencing these issues on?
     
  12. Chi Bearhawks

    Chi Bearhawks Member

    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.

    Code:
    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.
     
  13. Brogan

    Brogan XenForo Moderator Staff Member

    That error would affect all other CSS after it, preventing it from being applied.
     
    Steve F and Shelley like this.

Share This Page