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

XF 1.2 How would I add a bullet point to the sub-forum links?

Discussion in 'Styling and Customization Questions' started by CyclingTribe, Aug 27, 2013.

  1. CyclingTribe

    CyclingTribe Well-Known Member

    I've previously used a template tweak to display sub-forums in rows on the home page (never liked the drop-down method) and they have a bullet point in from of them.

    1.2 supports this in the core now so I want to use the built-in option - but on my test site the sub-forum links have no bullet point.

    How would I add a bullet point to the 1.2.x sub-forum links please?

    Cheers,
    Shaun :D
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    I use this:
    Code:
    .node .subForumList {
    margin: -4px 0 1px 46px !important;
    }
    
    .node .subForumList li {
    margin: 4px 0 8px 0 !important;
    }
    
    .subForumList li .nodeTitle:before {
    background: @primaryLight url('@imagePath/images/node-icon-gradient.png') repeat-x top;
    border: 1px solid @primaryLight;
    content: "";
    margin-right: 4px;
    padding-left: 14px;
    }
    
    .subForumList li .unread .nodeTitle:before {
    background: @secondaryMedium url('@imagePath/images/node-icon-gradient.png') repeat-x top;
    border: 1px solid @secondaryMedium;
    content: "";
    margin-right: 4px;
    padding-left: 14px;
    }
    You can edit that to suit your needs.
     
    maszd and CyclingTribe like this.
  3. CyclingTribe

    CyclingTribe Well-Known Member

    Excellent - many thanks Paul. (y)
     
  4. CyclingTribe

    CyclingTribe Well-Known Member

    Just upgraded Entertainmentchat.net to XF 1.2.1 (responsive on) and used a 12px mini-node-sprite icon for read/unread status:

    Code:
    /* Add 12px mini-node icon to sub-forums */
    
    .node .subForumList {
    margin: -4px 0 7px 54px !important;
    }
    
    .node .subForumList li {
    margin: 2px 0 2px 0 !important;
    }
    
    .subForumList li .nodeTitle:before {
    background: @sectionMain.background-color url('@imagePath/xenforo/subforum-read.png');
    content: "";
    margin-right: 4px;
    padding-left: 12px;
    }
    
    .subForumList li .unread .nodeTitle:before {
    background: @sectionMain.background-color url('@imagePath/xenforo/subforum-unread.png');
    content: "";
    margin-right: 4px;
    padding-left: 12px;
    }
    
    ... and this is how it looks on the home page:

    upload_2013-8-27_22-33-33.png
     
    Brandon Sheley and Shelley like this.
  5. Shelley

    Shelley Well-Known Member

    That's looking sweet. I know who I'm coming for graphics to give my design brain a rest. :D seriously, nice work with that. (y)
     
    CyclingTribe likes this.
  6. CyclingTribe

    CyclingTribe Well-Known Member

    I can't take any credit - I wouldn't have known where to start ... :LOL:
     
  7. Andy.N

    Andy.N Well-Known Member

    How do I replace that background png image by some webfont icon?
     
  8. CyclingTribe

    CyclingTribe Well-Known Member

    This is just guess-work, but presumably you would define your custom web icon font family first, then reference it in the CSS and put the letter/number/symbol into the content: "x"; element?

    Code:
    @font-face
    {
    font-family: myWebFont;
    src: url('/fonts/myfontfile.ttf');
    }
    
    .subForumList li .nodeTitle:before {
    font-family: myWebFont;
    background: @sectionMain.background-color;
    content: "<insert symbol here for your icon>";
    margin-right: 4px;
    padding-left: 12px;
    }
    
    Hopefully someone with more CSS experience will be able to correct it if I've got it all wrong ... (y)
     
  9. Andy.N

    Andy.N Well-Known Member

    Actually, I was referring to this kind of web icons which hopefully is much simplier
    http://xenforo.com/community/resources/fontawesome-icons-in-visitor-tab-account-wrapper.1861/
     
    CyclingTribe likes this.
  10. Andre Daub

    Andre Daub Member

    What is wrong with this code:

    .node .subForumList {
    margin: -4px 0 7px 54px !important;
    }

    .node .subForumList li {
    margin: 2px 0 2px 0 !important;
    }

    .subForumList li .nodeTitle:before {
    background: @sectionMain.background-color url('@imagePath/styles/default/xenforo/subforum-read.png');
    content: "";
    margin-right: 4px;
    padding-left: 12px;
    }

    .subForumList li .unread .nodeTitle:before {
    background: @sectionMain.background-color url('@imagePath/styles/default/xenforo/subforum-unread.png');
    content: "";
    margin-right: 4px;
    padding-left: 12px;
    }

    I have added subforum-read.png and subforum-unread.png to the folder but nothing is showing up?
     
  11. Brogan

    Brogan XenForo Moderator Staff Member

    Probably an incorrect path or uploaded to the wrong location.

    Impossible to debug without a link.
     
  12. denisx04

    denisx04 Active Member


    Brogan I love this, I'm a novice when it comes to html and coding but could you please let me know how I can remove the images completely so that it looks like regular subforums without any images. I tried just getting rid of the image paths but no luck.
     
  13. Jeremy

    Jeremy Well-Known Member

    Get rid of everything from url to the semi colon at the end of the line, but leave the semi-colon.
     
    denisx04 likes this.
  14. I. C. Daniel

    I. C. Daniel Member

    Hi everyone,

    It shows okay code given by @Clickfinity with Internet Explorer but with Chrome don't show as it should.

    My forum is http://ypayz.com/ As you can see sub forums are Introductions, Suggestions, Announcements.

    I'm waiting your advice to fix these bullets. Thanks in advance.
     
  15. Martok

    Martok Well-Known Member

    You need to add

    background-repeat: no-repeat;

    to your code (before margin-right)
     
    I. C. Daniel likes this.
  16. I. C. Daniel

    I. C. Daniel Member

    Thank you. I added and does not show anymore, however on top is cutted. How to fix it?
    When I un-tick the "overflow: hidden;" via Inspect Element it shows correct.
     
  17. Martok

    Martok Well-Known Member

    I think you'll need to fiddle with the subforum list margins in the added code.
     
  18. I. C. Daniel

    I. C. Daniel Member

    I'm afraid I'm getting nowhere, I start playing with margins but none of them to make the image look as it should.

    An css expert is needed to tweak this. Anyone?
     

Share This Page