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

Different forum icons?

Discussion in 'Styling and Customization Questions' started by HenrikHansen, Jul 15, 2012.

  1. HenrikHansen

    HenrikHansen Well-Known Member

  2. Vincent

    Vincent Well-Known Member

  3. Arty

    Arty Well-Known Member

    Create icon sets for those forums, add CSS for each forum like this:
    .nodeList .node.node_1 .nodeIcon { background-image: url('@imagePath/xenforo/node-1.png');
    Change 1 to forum id
  4. Vincent

    Vincent Well-Known Member

    Not trying to be a douche, but I think addons are easier. Especially for beginners :)
  5. Arty

    Arty Well-Known Member

    Yes, addons are easier, but CSS does the same without adding more PHP code.
    Shyuan and Adam Howard like this.
  6. Vincent

    Vincent Well-Known Member

    And PHP does the same without adding more CSS code ;)
  7. Ingenious

    Ingenious Well-Known Member

    LOL, whatever way you do it, I think it makes a forum look really slick.
  8. HenrikHansen

    HenrikHansen Well-Known Member

    I think I will use the CSS option. The addon is not quite finished, and has no option to delete uploaded icons for forum and it seems to change to icons to standard size.
  9. MOZ

    MOZ Well-Known Member

    Personally, I prefer CSS.
  10. Adam Howard

    Adam Howard Well-Known Member

    I am not worth of your greatness. :notworthy:


    Do you have any idea how long I've been trying to customize the node icons for each forum, so that they could each have their own icon?!

    ........ Sure, there are TON of other examples on here, but none of them work or require you to make a new sprite, which needs to be coded to match up correctly. And the few others that work, only do so partly in that you end up with empty space when there are new replies.

    This one works and doesn't depend on the other add-on (which is very flawed I may add).

    Granted this ends up showing the default icon when there is a new reply and I much would prefer if it just "greyed out" or "brighten" the current icon without needing a 2nd photo .... But this one is good enough (and uses less code).

    Thank you for posting this :D
  11. Mr Lucky

    Mr Lucky Well-Known Member

    I tried this and it just removed the default icon (yes, I double checked the image path was correct and added a closing bracket } which is missing from the example code

    I must have the correct forum id as it only affected that forum, all it did was remove the image
  12. Shelley Hitz

    Shelley Hitz New Member

    Where exactly do you add the CSS?
  13. rafass

    rafass Well-Known Member

    ACP -> Appearance -> Templates -> and find EXTRA.css
    Shelley Hitz likes this.
  14. Shelley Hitz

    Shelley Hitz New Member

    Thank you!! It WORKED :)
    rafass likes this.
  15. Shelley Hitz

    Shelley Hitz New Member

    Attached Files:

  16. Arty

    Arty Well-Known Member

    Add !important to rule to prevent it from being overwritten:
    .nodeList .node.node_25 .nodeIcon
    background-image: url('http://www.shelleyhitz.com/access/wp-content/uploads/2015/05/take-action-workshops.png') !important;
    background-position: 0 0 !important;
    Also your icon is not a proper node sprite, it doesn't have unread image. Therefore I've reset background-position in code above.
    insomniacz and Shelley Hitz like this.
  17. Shelley Hitz

    Shelley Hitz New Member

    Thank you! That worked.
  18. X3nman

    X3nman Member


    I am using this but my image is messed up when adding it to a link forum...

    Any clues as to why this is?

  19. Arty

    Arty Well-Known Member

    Because that block has small height, smaller than your background image. I guess you are assigning it to .nodeText? If so, add min-height to it to prevent your background from being cut off.
  20. X3nman

    X3nman Member

    The code I used is just the same as for the other forums...

    .nodeList .node_75 .nodeText{ background: url("@imagePath/xenforo/icons/ClashRoyale30.png") no-repeat scroll left transparent;}

    Can you show me how i need to modify it please, im not too good with coding.

    Thanks for your help

Share This Page