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

Need css help.

Discussion in 'Troubleshooting and Problems' started by steven s, Oct 27, 2010.

  1. steven s

    steven s Well-Known Member

    Since I see all the cool kids are using css rather than editing templates, I want to learn how to do this to.

    screen.png
    #1 I figured out by editing the navigation.css template but it looks funny without the border above forums.
    #2 I don't know why it's a pixel off.
    #3 I can't figure where to add the code to make the left, right and bottom borders white.
     
  2. Shelley

    Shelley Well-Known Member

    For number 3 you could go into the footer.css template and find the following code and add border: 1px solid #ffffff;

    or add

    Border-left: 1px solid #ffffff;
    Border-right: 1px solid #ffffff;
    Border-bottom: 1px solid #ffffff;

    You may be able to do this via the style properties so it may be worth checking.


    Code:
    .footer .pageContent
    {
        background: @primaryMedium;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        overflow: hidden; zoom: 1;
        font-size: 11px;
    }
    
     
    steven s likes this.
  3. steven s

    steven s Well-Known Member

    Thanks. I guess the part that was fooling me was that I was looking at .pagecontent in the wrong place.
    How do you know it's footer? I used Firebug and I didn't see anything that said footer, or I was just looking in the wrong place?
     
  4. Shelley

    Shelley Well-Known Member

    I've modified this area so many times I knew exactly where to go. Also, because I have that area a specific colour firebug highlighted that colour so I knew exactly where to go. Did you get #1 & #2 resolved?
     
  5. steven s

    steven s Well-Known Member

    I need Firebug for Dummies. :)
    No, I haven't looked at problems 1 and 2 again.
     
  6. Shelley

    Shelley Well-Known Member

    Bare with me.

    Your issue #1

    go into the navigation.css template and locate the following code:

    You'll notice that this is my modded version and instead of border: I altered it to border-top: I also changed the margin-top from -2 to -1 though to me the white border looks off but this will give you a white border flush with the top.

    Code:
        .navTabs .navTab.selected .navLink
        {
            border-top-left-radius: 2px;
            border-top-right-radius: 2px;
            border-top: 1px solid #ffffff;
            border-bottom: none;
    
            margin-top: -1px;
            padding-top: 2px;
    
            background: @primaryLightish url('@imagePath/xenforo/gradients/navigation-tab.png') repeat-x top;
            color: @primaryDarker;
            font-weight: bold;
            text-shadow: 0px 0px 3px @primaryLightest;
        }
     
  7. steven s

    steven s Well-Known Member

    Cool. By changing the margin-top from -2 to -1, I kind of open a gap. Then use border-top to fill in the gap.
    But since I already have a border-top #ffffff in the navlink code, why doesn't the border go all the way across? Sorry for the questions.
     
  8. Shelley

    Shelley Well-Known Member

    Did you alter the correct one? Whilst I was testing I mistakenly adjusted the wrong one that left a 1px gap the margin is the the one you alter not the padding.
     

    Attached Files:

    D37 likes this.
  9. steven s

    steven s Well-Known Member

    Yes. I made it so there are no borders on the left and right of the tab.
    Everything is looking correct except for my 2px gap on the right border.

    THANK YOU! You are a treat! :)
    ZZZZzzzz time.
     
  10. Shelley

    Shelley Well-Known Member

    I'm just looking into that now (time for my bed also) I'm getting that gap to the right also so hopefully I'll have something for you tomorrow if not if someone could post a solution that would be helpful.
     
  11. steven s

    steven s Well-Known Member

    Time to revisit this.
    It appears my right border is 2px off.
    I think something is missing.

    sample.png
    Code:
    .navTabs .navTab.selected .tabLinks
    {
        height: @headerTabHeight;
        width: 100%;
    
        padding: 0;
        border-left:  1px solid #ffffff;
        border-right: 1px solid #ffffff;
    
        background: @primaryLightish url('@imagePath/xenforo/gradients/navigation-tab.png') repeat-x 0px -@headerTabHeight;
    
        *clear:expression(style.width = document.getElementById('navigation').offsetWidth + 'px', style.clear = "none", 0);
        overflow: hidden; zoom: 1;
    
        position: absolute;
        top: {xen:calc '@headerTabHeight + 2'}px;
        left: 0px;
    }
     
  12. Erik

    Erik Well-Known Member

    It's because of the way the CSS box model works. Technically the padding, border, and margin are not included in the "width" of an object. So if you add a 1px border, the object will actually appear to be 2px longer, including the borders (1px on each side). I don't know how to fix it off of the top of my head right now but I can at least explain what is happening. :)
     
  13. steven s

    steven s Well-Known Member

    Can I add 2px to the other sections so the right side lines up?
    If I remove the width of the borders, it looks like they are 2px wide.
    Is it possible something is being inherited?
     
  14. steven s

    steven s Well-Known Member

    OK, this is getting downright frustrating.
    If it's impossible I'll just abandon the idea of a white border.
     
  15. Erik

    Erik Well-Known Member

    For reasons that are hard to explain it's impossible to do with the current CSS because of the way relative widths (100%) and the box model work. While you could do something like:
    Code:
    width: {xen:calc '@pageWidth.width -2'}
    in the templates, that will only work for fixed-width styles. Try applying a border to the .pageContent container higher in the tree. If you apply a border to the left, right, and top sides, and remove the other borders and make the corners rounded, you could get a border that is consistent across both the top and bottom bars.

    As far as I know it's impossible to do it directly like you want. Kier may know of a better way to do it, though. :)
     
  16. steven s

    steven s Well-Known Member

    I'll play around with it. Thanks.

    Should the code be?
    Code:
    width: {xen:calc '@pageWidth.width -2'}px;
     
  17. steven s

    steven s Well-Known Member

    I almost had it but there was a few pixels missing on the radius.
    But using your tip to code under pageContent, I got something that I can live with.
     
  18. Erik

    Erik Well-Known Member

    Well, that's good at least. Maybe Kier can shed some light on a better way to do this. :)
     
  19. steven s

    steven s Well-Known Member

    Damnit! In IE7 the right border doesn't line up.
     

Share This Page