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

XF 1.2 Need Help Understanding Custom Node/Forum Icons

Discussion in 'Styling and Customization Questions' started by UKD, Oct 25, 2013.

  1. UKD

    UKD Active Member

    I understand that you can change the custom node icons for all forums by changing the image here:

    [​IMG]

    The images changed however they were not centred. Here is what they looked like after changing the default image:

    [​IMG]

    As you can see the icons are not quite right, even though they are 40x40 which is the image size of the default speech bubbles.

    I then used this code (below) to correct the background position:

    Code:
    .node.node_7 .forumNodeInfo .nodeIcon, .node.node_7 .categoryForumNodeInfo .nodeIcon { 
        background-position: -2px -2px;
      
    }
    .node.node_7 .forumNodeInfo.unread .nodeIcon, .node.node_7 .categoryForumNodeInfo.unread .nodeIcon {
        background-position: -2px -2px;
        opacity: 0.4;
    }
    
    It now looks perfect:

    [​IMG]

    My question is, do I now have to use that code for every single node, or is there just a way of writing one line of code for my EXTRA.css to apply a background position to all forum icons?

    Any help would be much appreciated. Thanks.
     
  2. Jeremy

    Jeremy XenForo Moderator Staff Member

    Remove .node_7 and it should "globalize" your code.
     
    wickedstangs and Amaury like this.
  3. UKD

    UKD Active Member

    That was my first impression however when I remove node_7 the code simply doesn't apply to any nodes :(.
     
  4. Jeremy

    Jeremy XenForo Moderator Staff Member

    What was the exact CSS you used without the node_7 in it?
     
  5. UKD

    UKD Active Member

    A combination of:

    Code:
    .node .forumNodeInfo .nodeIcon, .node .categoryForumNodeInfo .nodeIcon {
        background-position: -2px -2px;
     
    }
    .node .forumNodeInfo.unread .nodeIcon, .node .categoryForumNodeInfo.unread .nodeIcon {
        background-position: -2px -2px;
        opacity: 0.4;
    }
    Code:
    .node.node_7 .forumNodeInfo .nodeIcon, .node .categoryForumNodeInfo .nodeIcon {
        background-position: -2px -2px;
     
    }
    .node.node_7 .forumNodeInfo.unread .nodeIcon, .node .categoryForumNodeInfo.unread .nodeIcon {
        background-position: -2px -2px;
        opacity: 0.4;
    }
    Code:
    .node .forumNodeInfo .nodeIcon, .node.node_7 .categoryForumNodeInfo .nodeIcon {
        background-position: -2px -2px;
     
    }
    .node .forumNodeInfo.unread .nodeIcon, .node.node_7 .categoryForumNodeInfo.unread .nodeIcon {
        background-position: -2px -2px;
        opacity: 0.4;
    }
    Neither of them seemed to have any effect. They just all reverted to their current default position. Any ideas? Thanks.
    I could go ahead and do every forum manually however I just thought I would ask just in case there was a simple thing I was missing to apply to all. My forum has around 400 separate forums so the code is going to be HUGE.
     
  6. UKD

    UKD Active Member

    No worries. I'm an idiot. I missed the very obvious option to move the logo here:

    [​IMG]

    Hopefully this info may help others if they are stuck in this situation and search the forums.

    I'm not sure why there has not been a method describing this in the past, and I did search the forums a lot in regards to this and all that came up was placing custom individual code in your extra.css. There was also an add-on however that didn't work in certain browsers, and to be honest, the less add-ons a person has the better. Less chance of things breaking on an update or different browsers.
     

Share This Page