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

XF 1.2 Surround Category Section Listing with Left and Right Borders

Discussion in 'Styling and Customization Questions' started by Amaury, Jan 7, 2014.

  1. Amaury

    Amaury Well-Known Member

    How can I accomplish what vBulletin has by default? Where I put the red lines is where I want the borders.

    Style property?

    [​IMG]
     
  2. Tracy Perry

    Tracy Perry Well-Known Member

    EXTRA.css
    Code:
    .node .nodeInfo.primaryContent{
    border-left: 5px solid red;
    border-right: 5px solid red;
    }
    should work for forums. Page nodes will not show with that and you have to add
    Code:
    .nodeList .linkNodeInfo {
    border-left: 5px solid red;
    border-right: 5px solid red;
    }
    
    You will have go play with the sizes some and the border for the forum lists overlay it but that should get you started.
     
    Amaury likes this.
  3. Amaury

    Amaury Well-Known Member

    First one worked on the forum list. Thanks!

    As for the second one, I'm not sure what you're talking about.
     
  4. Tracy Perry

    Tracy Perry Well-Known Member

    The "Frequently Asked Questions" in the attached image. ;)
    screenshot.png
     
  5. Amaury

    Amaury Well-Known Member

    Ah, well, we don't use node links. :)
     
  6. Amaury

    Amaury Well-Known Member

    @Tracy Perry

    Now, how can I get left and right borders on the discussion list? I forgot about that.
     
  7. Steve F

    Steve F Well-Known Member

    Amaury likes this.
  8. Amaury

    Amaury Well-Known Member

  9. Tracy Perry

    Tracy Perry Well-Known Member

    This should work (courtesy of Chrome Inspector)
    Code:
    .discussionListItems {
    border-left: 5px solid red;
    border-right: 5px solid red;
    }
     
    Amaury likes this.
  10. Amaury

    Amaury Well-Known Member

    That worked, but it looks like I need some margin here now. I'm just not sure if it should be left or right:

    [​IMG]
     
  11. Amaury

    Amaury Well-Known Member

    Got this resolved last night by adding margin-right: -2px to @Tracy Perry's code for the discussion list.
     
    Tracy Perry likes this.
  12. Tracy Perry

    Tracy Perry Well-Known Member

    What... you wanted me to do it all for ya'? ;)
    Good deal. I didn't have a lot of spare time when I posted that. Iwas setting up another VPS, installing OpenLiteSpeed on it and moving the WP site over from my older VPS along with installing another support software for some clients to use to contact me with.
     
  13. Amaury

    Amaury Well-Known Member

    @Tracy Perry: Just discovered that my fix messed up the section footer on profiles (notice how the borders don't line up on the right?). If I added .discussionList, would that make it affect only the discussion list area?

    This is my code:
    Code:
    .sectionFooter {
        margin-right: -2px;
    }
    upload_2014-1-27_18-39-21.png
     
  14. Amaury

    Amaury Well-Known Member

    Fixed!

    Resolution was to change this:

    Code:
    .sectionFooter {
         margin-right: -2px !important;
    }
    to this:

    Code:
    .sectionFooter.InlineMod.SelectionCountContainer {
        margin-right: -2px !important;
    }
     
    Tracy Perry likes this.
  15. Tracy Perry

    Tracy Perry Well-Known Member

    Good deal... sorry I missed this. I've been a tad busy lately and haven't gotten to mess with the Forum related stuff (here or mine) much lately.
     
    Amaury likes this.

Share This Page