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

Different og:image for each forum category (again)

Discussion in 'Styling and Customization Questions' started by eivindsimensen, Jan 9, 2012.

  1. 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
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    It's not clear to me which images you want to remove. I don't see "baloons" on that page. Can you be more specific?
     
  3. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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:

    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;
    }
    
     
  4. 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
     
  5. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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.
     
  6. 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:
     
  7. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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:

     
  8. Finaly i find the problem, i put the images in the wrong directory..... Now its working fine. Thank you for the good support
     
  9. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

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

    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.
     

Share This Page