Need css help.

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.webp
#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.
 
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;
}
 
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?
 
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?

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?
 
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?
I need Firebug for Dummies. :)
No, I haven't looked at problems 1 and 2 again.
 
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;
    }
 
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.
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.
 
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.
 

Attachments

  • tab_selected.webp
    tab_selected.webp
    6.1 KB · Views: 10
  • Like
Reactions: D37
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.
 
Time to revisit this.
It appears my right border is 2px off.
I think something is missing.

sample.webp
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;
}
 
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. :)
 
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?
 
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. :)
 
Top Bottom