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

XF 1.2 Separate icon for each sub-forum

Discussion in 'Styling and Customization Questions' started by JayX, Aug 6, 2013.

  1. JayX

    JayX Active Member

    I wanted separate icons for each individual node, so was using the following in extra.css;

    Code:
    .node .node_1 .forumNodeInfo .nodeIcon, .node .node_7 .categoryForumNodeInfo .nodeIcon,
    .node .node_1 .forumNodeInfo.unread .nodeIcon, .node .node_7 .categoryForumNodeInfo.unread .nodeIcon {
        background-image: url("..."); background-position: 0px 0px;
    }
    
    However, this doesn't work for sub-forums / the children of a node. Is there a simple tweak to the code I can make when adding an icon for the children of a node, or is that something a lot more complex?
     
  2. JayX

    JayX Active Member

    Surely this is a relatively simple thing to do?
     
  3. Shelley

    Shelley Well-Known Member

    here is some example code that works on the default 1.2 subforum column. You'll have to add more IDs and adjust the css to your preference.

    Code:
    .subForumList li.node_4 .nodeTitle:before {
    background: url("@imagePath/xenforo/icons/member_markup.png") no-repeat scroll 0 0 transparent;
    height: 13px;
      width: 15px;
      content: "";
      padding-left: 20px;}
    Screenshot_6.png

    Edit: If your not referring to subforum columns then Mikos guide will allow different imagery on subforums in discussion listings you have to find the ID and adjust to preference. http://xenforo.com/community/threads/rc-1-custom-node-status-icons-read-unread.10886/
     
    Last edited: Aug 7, 2013
    Taxi likes this.
  4. JayX

    JayX Active Member

    Thanks, but:

    k.jpg

    When you're in a node (see above), I want to be able to change the icons for where the arrow is pointing.

    On the main index page, the guide you linked me to works fine for changing the icons for nodes, but NOT forum the node's children (the sub-forums).
     
  5. Shelley

    Shelley Well-Known Member

    The following works for me though when I used @imagePath it wouldn't. you'll have to adjust and add to your preference.

    Code:
    .node.node_15 .forumNodeInfo.unread .nodeIcon, .node.node_15 .categoryForumNodeInfo.unread .nodeIcon {
      background-image: url("styles/bbsmileyrevamped/xenforo/icons/admin_markup.png");
      background-position: 0 0;
      background-repeat: no-repeat;
    
    }
    .node.node_15 .forumNodeInfo .nodeIcon, .node.node_15 .categoryForumNodeInfo .nodeIcon {
      background-image: url("styles/bbsmileyrevamped/xenforo/icons/admin_markup.png");
      background-position: 0 0;
      background-repeat: no-repeat;
    }
    Screenshot_7.png
     
  6. Shelley

    Shelley Well-Known Member

    Not with it today. Just to say "@imagePath" will work. I had the particular icon in the example on another style while i was testing on default which at the time didn't have that example icon to that styles icon directory. :facepalm: so just adjust the ID accordingly and image path for both read and unread icons on the subforums you want to apply to. You also don't have to add background-repeat either.

    Code:
    .node.node_15 .forumNodeInfo.unread .nodeIcon, .node.node_15 .categoryForumNodeInfo.unread .nodeIcon {
      background-image: url("@imagePath/xenforo/icons/admin_markup.png");
      background-position: 0 0;
    
    }
    .node.node_15 .forumNodeInfo .nodeIcon, .node.node_15 .categoryForumNodeInfo .nodeIcon {
      background-image: url("@imagePath/xenforo/icons/admin_markup.png");
      background-position: 0 0;
    
    }
    
     
    JayX likes this.
  7. Tracy Perry

    Tracy Perry Well-Known Member

    And if you want add a little transparency in there for the read ones to highlight it from the unread you can add the opacity statements that I put in @Shelley's code.
     
    JayX and Shelley like this.
  8. Shelley

    Shelley Well-Known Member

    Good catch @Tracy Perry :) Another thing I do as well as lower the opacity slightly is make the read node icon greyscale. Thought i'd throw that out there on the chance you/OP/anyone may want to do the same though it'll entail some graphic editor work.
     
  9. Tracy Perry

    Tracy Perry Well-Known Member

    Yep - but just using the opacity allows you to be "lazy" and have one icon for read and unread. With 308 nodes (some of them the same manufacturer) it would have entailed a lot of editing that I was not comfortable (at the time) doing. :whistle:
     
    Shelley likes this.
  10. Shelley

    Shelley Well-Known Member

    True. I haven't got many forums and it did take a bit of time doing the icons for each forum in the read/unread state. Sites with more it would entail a huge undertaking and a time consuming task so agree opacity would be the better option.
     
  11. Chi Bearhawks

    Chi Bearhawks Member

    I entered the css, but all I can do is get the forum to show the extra 20px of padding. it doesn't pull any image at all.
     
  12. Shelley

    Shelley Well-Known Member

    it sounds like a path issue. You've most likely inserted a incorrect path or uploaded the image into the incorrect folder/style folder.
     
  13. Chi Bearhawks

    Chi Bearhawks Member

    That was it. I had a brain fart and thought that since I wasn't seeing the broken image icon or pull any image at all, it wasn't working right, as if it was being pulled from html and not css. But now I have another issue. How do I get those dimensions to resize my icon to those specifications (15x13). Right now it just keeps taking the first 15x13px of the image and hiding the rest.
     
  14. Shelley

    Shelley Well-Known Member

    Adjust the width, height and padding to suit will fix this if your using the subforum column code. A more thorough guide can be found here you just need to adjust the elements to your desired size pending on what sizes you are using for icons. http://xenforo.com/community/resources/1-2-subforum-unread-read-icons-indicators.1988/
     
  15. Chi Bearhawks

    Chi Bearhawks Member

    I tried changing the dimensions in the css, but no matter what size I put in there, it always keeps the images stuck at the same small size (which is the height of the subforum text). So it seems that the size of these icons are simply determined by something that controls the lines for the subforums. Any ideas on that?
     
  16. Shelley

    Shelley Well-Known Member

    Ah yeah, your absolutely right. I now remember this issue and I tried changing the line-height (tried many things infact) and it only seems they will change or not get cropped if you change the subforum title size (which is a right PIA). I should have remembered since it was an issue that kept be baffled for an hour or so.
     
  17. RobParker

    RobParker Well-Known Member

    If I was using a sprite sheet, how would the above be changed?
     
  18. Tracy Perry

    Tracy Perry Well-Known Member

    Change the image to the sprite sheet image, and after the closing ) add the sprite location
    Code:
    background-image: url("path/to/sprites_sheet.png") 10 50;
    where the 10 50 is the image location in the sprite sheet.
     
    RobParker likes this.

Share This Page