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

XF 1.2 Changing forum icons?

Discussion in 'Styling and Customization Questions' started by C.Stanley, Jan 7, 2014.

  1. C.Stanley

    C.Stanley Active Member

    I am trying to figure out how to change my forum icons on this style. In the past i have just tracked the path to the server and replaced but it seems these have the same name? site is globalhax and here is a screen shot
    icons.PNG
     
  2. Tracy Perry

    Tracy Perry Well-Known Member

    ACP -> Appearance -> Style Properties -> Node Icons
    if they are defined there. You can also do multiple ones via the EXTRA.css.
     
    C.Stanley likes this.
  3. C.Stanley

    C.Stanley Active Member

    thank you Tracy, it just took some tweaking on the alignment to make them show.
     
  4. touch

    touch Member

  5. Tracy Perry

    Tracy Perry Well-Known Member

    There are some quirks with that add on last I heard (one had to do with if you removed it, your node icons got trashed?). Simpler (if you are just using one) to do it in the ACP Style Properties manually. If you want to do different ones for different nodes then the EXTRA.css edits are extremely easy to do.
     
  6. Alfa1

    Alfa1 Well-Known Member

    That addon adds slow queries to every page of your website, shows very small, low quality jpg icons. As its jpg no transparency is possible.
    The problem with adding it to extra.css is that it becomes very hard to manage with a large number of nodes. I have 500 nodes or something.
     
  7. Tracy Perry

    Tracy Perry Well-Known Member

    I've got 358 on one of my forums. I just include the extra twd_node.css template in my EXTRA.css and keep them there. They are divided by categories/brands and those are then broken down in numerical order. Once you get the knack of it it's not that hard to keep up with (as long as you've laid it out in a logical format).
     
  8. Hristo Avramov

    Hristo Avramov Active Member

    Are you sure they are easy, I tried every method written by people, but it couldn't work. I add it in extra.css. I tried to remove the original node icons too, it doesn't work then too. I tried the longest method too with this code and it doesn't work, I use default xenforo. Didn't do any changes.

    .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;
    }
     
  9. Tracy Perry

    Tracy Perry Well-Known Member

    This works from my motorcycle forum (I use a custom image directory for all my forums for this type of stuff or use a spritesheet in the case of the last code segment example)
    One thing I noticed.. if that is a cut/paste of your example.. you have a space between .node and .node_18. You can't have that. Just copy/paste one from the below lines and change the number up and see if it works.

    Code:
    
    /* General Other category icons */
    /* Cruisers */
    .node.node_341 .forumNodeInfo .nodeIcon, .node.node_341 .categoryForumNodeInfo .nodeIcon {
        background-image: url("images/nodes/bike.png");
        background-position: 0px 0px;
        opacity: 0.4;
    }
    .node.node_341 .forumNodeInfo.unread .nodeIcon, .node.node_341 .categoryForumNodeInfo.unread .nodeIcon {
        background-image: url("images/nodes/bike.png");
        background-position: 0px 0px;
    }
    /* Rat Bike */
    .node.node_343 .forumNodeInfo .nodeIcon, .node.node_343 .categoryForumNodeInfo .nodeIcon {
        background-image: url("images/nodes/ratbike.png");
        background-position: 0px 0px;
        opacity: 0.4;
    }
    Code:
    .node.node_2 .forumNodeInfo .nodeIcon, .node.node_2 .categoryForumNodeInfo .nodeIcon {
        background-image: url("images/nodes/node-sprite.png");
        background-position: 0px -88px;
        background-color: transparent;
        opacity: 0.4;
    }
    .node.node_2 .forumNodeInfo.unread .nodeIcon, .node.node_2 .categoryForumNodeInfo.unread .nodeIcon {
        background-image: url("images/nodes/node-sprite.png");
        background-position: 0px -88px;
        opacity: 1.0;
        background-color: transparent;
    }
    
    .node.node_99 .forumNodeInfo .nodeIcon, .node.node_99 .categoryForumNodeInfo .nodeIcon {
        background-image: url("images/nodes/node-sprite.png");
        background-position: 0px 0px;
        background-color: transparent;
        opacity: 0.4;
    }
    .node.node_99 .forumNodeInfo.unread .nodeIcon, .node.node_99 .categoryForumNodeInfo.unread .nodeIcon {
        background-image: url("images/nodes/node-sprite.png");
        background-position: 0px 0px;
        background-color: transparent;
        opacity: 1.0;
    }
     

Share This Page