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

tabLinks width confusion

Trombones13

Well-known member
#1
XF Navbar Width.png
Is the tabLinks portion of the navbar two pixels too wide? Adding a border shows it poking it out beyond the end of the page container and the navbar on the right side, and I don't want that, lol. Whether that's by design or not, how can I make a border that doesn't hang over like that? :confused:

Thanks as always! :D
 

Jake Bunce

XenForo moderator
Staff member
#2
The border is throwing off the width. I played with this for a while and came up with a solution.

Set a fixed width for the forum:

Admin CP -> Appearance -> Style Properties -> General -> Page Width Controller

Screen shot 2011-02-06 at 9.30.50 AM.png

Then edit this template:

Admin CP -> Appearance -> Templates -> navigation.css

I have modified the width and border in this code. Notice how you can use xen:calc to subtract double the border size from the page width:

Code:
.navTabs .navTab.selected .tabLinks
{
	@property "navTabSelected.background";
	background: @primaryLightish url('@imagePath/xenforo/gradients/navigation-tab.png') repeat-x top;
	@property "/navTabSelected.background";
	
	width: {xen:calc '@pageWidth.width - 4'}px;	
	padding: 0;
	border: 2px solid;
	overflow: hidden; zoom: 1;	
	position: absolute;
	left: 0px;	
	top: {xen:calc '@headerTabHeight + 2'}px;
	height: @headerTabHeight;
	background-position: 0px -@headerTabHeight;
	*clear:expression(style.width = document.getElementById('navigation').offsetWidth + 'px', style.clear = "none", 0);
}
This fixed the problem in my testing:

Screen shot 2011-02-06 at 9.38.55 AM.png
 

skhms

Active member
#5
If anyone solves this for a liquid style, I'd be very grateful - it's driving me mad! :D
Hi Vil, I think this something that you haven't solved yet. I checked a few styles on AD. ;)

Don't know much about CSS so I hope this is okay. I use it on my site and I haven't noticed any problems anyway.

In the template navigation.css
Code:
.navTabs .navTab.selected .tabLinks
{
    @property "navTabSelected.background";
    background: @primaryLightish url('@imagePath/xenforo/gradients/navigation-tab.png') repeat-x top;
    @property "/navTabSelected.background";

/*    width: 100%;    */          /* Skip width */
    right: 0px;                  /* Add right */
    padding: 0;
/*    border: none;  */          /* Skip old border */
    border: 1px solid #FF0000;  /* New border */
    overflow: hidden; zoom: 1;
    position: absolute;
    left: 0px;
    top: {xen:calc '@headerTabHeight + 2'}px;
    height: @headerTabHeight;
    background-position: 0px -@headerTabHeight;
    *clear:expression(style.width = document.getElementById('navigation').offsetWidth + 'px', style.clear = "none", 0);
}