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

How to add forum status icons to XF

Discussion in 'Styling and Customization Questions' started by Alfa1, Mar 18, 2013.

  1. Alfa1

    Alfa1 Well-Known Member

    My vb big board has unique forum status icons for each forum and subforum. These partly make up the forum / brand identity. I would like to add these to my xenforo installation.

    Does XenForo have forum icon functionality?
    If not, then are there any addons? I have searched, but did not find any in the RM.
     
  2. Jeremy

    Jeremy XenForo Moderator Staff Member

  3. Digital Doctor

    Digital Doctor Well-Known Member

  4. Brogan

    Brogan XenForo Moderator Staff Member

  5. Alfa1

    Alfa1 Well-Known Member

    Please note that I want to replace the stock node icons, with custom node icons. I do not want double node icons.
    So no separate icons, but complete replacement.
    I'm not touching any templates, so if there is no addon, then I will need to create one.
     
  6. Brogan

    Brogan XenForo Moderator Staff Member

  7. erich37

    erich37 Well-Known Member

  8. Steve F

    Steve F Well-Known Member

    There is a style property to change the node icons from default to your own if that is what you are saying.

    Style Properties -> Node Icons: In there you can change/adjust your icons.
     
  9. Alfa1

    Alfa1 Well-Known Member

    Each forum and subforum has an unique icon and a variant for new posts, locked, link, etc.
    Mind that I have 450+ nodes/forums. So that would be a massive extra.css
     
  10. presidentYT

    presidentYT Member

    Im curious.. how do you add a custom node icon to a link-forum... a node thats just a link?
     
  11. Shelley

    Shelley Well-Known Member

    You can either add the custom icon (redirect to the spritesheet or upload an indivudual icon by going into Appearance >> Style properties >> node icons >> Node Icon: link and insert path to image or spritesheet
     
    Alfa1 likes this.
  12. presidentYT

    presidentYT Member

    ok cool.. that makes sense.. but i was wondering along the lines of something that you would put in your extra.css file.. just in case you had several links .. This method would make them all the same..
     
  13. Shelley

    Shelley Well-Known Member

    You are wanting to make each link forum node icon different?

    You could use ID to make them different

    The following is an example, your ids would differ and you would need to adjust the node id accordingly along with the path of the image. keep adding the code for each link forum and change the id and path to image accordingly.

    Code:
    .node .node_31 .linkNodeInfo  .nodeIcon, .node .node_31 .linkNodeInfo .nodeIcon {
        background-image: url("@imagePath/xenforo/icons/node17-read.png");
        background-position: 0;
        background-repeat: no-repeat;
     
    }
     
     
    
     
  14. presidentYT

    presidentYT Member

    ha.. thank you.. i was really close... it was that .linkNodeInfo .. that i was getting wrong... I'm learning.... lol.. thanks
     
    Shelley likes this.
  15. erich37

    erich37 Well-Known Member

    Is there an easy way to make each custom Forum-icon click-able ? So adding some "a href" to it so that it links to the correct Forum-Node when the image is clicked ?

    I mean: is it possible to add the node-number to the "a href" somehow ?
    How to do this, please ?


    I have this code for one of my Forum-Nodes:

    Code:
    .categoryForumNodeInfo, .nodeList .node_185 .forumNodeInfo .nodeIcon, .node .node_185 .categoryForumNodeInfo .nodeIcon {
    background-image: url("/marketplace/b2b_lounge.jpg") !important;
    }
    .categoryForumNodeInfo, .nodeList .node_185 .forumNodeInfo.unread .nodeIcon, .node .node_185 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("/marketplace/b2b_lounge.jpg") !important;
    }

    :)
     
  16. Steve F

    Steve F Well-Known Member

    Template node_forum_level_2

    Find:
    Code:
    <span class="nodeIcon" title="{xen:if $forum.hasNew, '{xen:phrase unread_messages}', ''}"></span>
    Replace with:
    Code:
    <a href="{xen:link forums, $forum}"><span class="nodeIcon" title="{xen:if $forum.hasNew, '{xen:phrase unread_messages}', ''}"></span></a>
    Should work everywhere I think..
     
    Shelley and erich37 like this.
  17. erich37

    erich37 Well-Known Member

    you are a genius, works like a charm (y)(y)(y)

    Thanks a lot!!!!!!!

    :)
     
    Steve F likes this.

Share This Page