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 XenForo Moderator Staff 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