How do you control the space before Home?

Weston

Member
bsdiv.png

I'v been changing the default navbar a bit as you can see but I can't figure out how to control the space between the edge and the Home button. I want to drop a red border over the bottom to cover up the middle line... like so:

bsdiv2.png

But the only code in Navigation before Home is:

PHP:
<div class="bgnav">

<xen:edithint template="navigation.css" />

<div id="navigation" class="pageWidth">
    <div class="pageContent">
        <nav>

<div class="navTabs">
    <ul class="publicTabs">
 

Brogan

XenForo moderator
Staff member
I'm not sure you'll be able to achieve that as it's the bottom border of the upper navigation tabs div.
 

Weston

Member
Perhaps not, I'm sorta blindly stomping through this but I figured I could cover it up in the same way the Active Tab does it.

EDIT: Well I'd have to create a new empty button... that's why I want to remove that space so I can fill it with an empty tab then drop the border on it.
 

Brogan

XenForo moderator
Staff member
Well you can remove that gap altogether by getting rid of the 25px padding so the home tab will be right up against the edge then.
 

Weston

Member
Thanks, I totally missed that somehow. Anyway I got it to work, I put a...
PHP:
<li class="navTab" style="width: 25px; border-bottom: 1px solid @primaryDark; height: @headerTabHeight"></li>
Right above <!-- home --> in the Navigation template.

EDIT: Thanks for the move, I didn't realize I had posted in the wrong place.
 

Brogan

XenForo moderator
Staff member
I have a similar question, can I do this kind of padding for a div? :confused:
A div is just a section or block of content so you can style it how you like.
Just use <div class="my_style>My content</div> and create the css class .my_style with the attributes you want.
 

Weston

Member
If it's a specific div (i.e. you only need to alter one) you can just do on the spot alterations using a style="xxxx".

For example <div class="pageContent" style="padding: 10px;"> would override whatever padding .pageContent might have had but the rest of it's CSS attributes will still shine though.
 

Carlos

Well-known member
The reason why I asked about it is because even though that I got the div working, the distance between the line and the content is about as close as you can get to 'hugging.'

So, I wanted to make some space between the line and the content within the div.

I will try Weston's solution.
 

Brogan

XenForo moderator
Staff member
I'm not entirely sure what you mean.
Can you post a link and a mockup of what it is you're trying to achieve?
 

Brogan

XenForo moderator
Staff member
Change your css to this:
Code:
.mw2f_footer_links {
    border: 1px solid #295909;
    color: #FF9705;
    padding: 0 4px;
}
That will add 4px padding to the left and right of the div and no padding to top or bottom.

Padding is applied in this order: top, right, bottom left, so if you do padding: 2px 10px 5px 8px for example, that will be 2px top, 10px right, 5px bottom, 8px left.

If you do it as 2 values then it is top/bottom together and left/right together.
 

Carlos

Well-known member
Change your css to this:
Code:
.mw2f_footer_links {
    border: 1px solid #295909;
    color: #FF9705;
    padding: 0 4px;
}
That will add 4px padding to the left and right of the div and no padding to top or bottom.

Padding is applied in this order: top, right, bottom left, so if you do padding: 2px 10px 5px 8px for example, that will be 2px top, 10px right, 5px bottom, 8px left.

If you do it as 2 values then it is top/bottom together and left/right together.
Thank you sir! :)
 
Top