Where Can I Change navTabs Height in Style Properties?

DRE

Well-known member
I would like to change the height of a navtab because it is too short and creating a gap in between the navtab and sub menu. How do I do this in Style Properties?

When I edit the navtab in Firebug, this is what I see.

Code:
.navTabs {
    background: url("styles/qapla/menub.png") repeat-x scroll 0 0 #1A024B;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    color: #0083D5;
    font-size: 11px;
    height: 25px;
    padding: 0 25px;
}

When I change the height in that code to 28px in Firebug the gap is closed.

How do I change the height in style properties so that the gap is closed?


Gap.webp
 
I don't remember what caused that problem to begin with. I encountered it on my own forum after making some changes. If you can discover what caused it then maybe you can avoid the problem rather than having to use the CSS fix.

The original CSS definition doesn't have a style property you can use. This is the original from 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%;	
	padding: 0;
	border: none;
	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);
}

There is no property that you can modify in order to avoid editing EXTRA.css
 
I don't remember what caused that problem to begin with. I encountered it on my own forum after making some changes. If you can discover what caused it then maybe you can avoid the problem rather than having to use the CSS fix.

The original CSS definition doesn't have a style property you can use. This is the original from 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%;
padding: 0;
border: none;
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);
}

There is no property that you can modify in order to avoid editing EXTRA.css
Can't I just edit the navigation.css instead by replacing the top and height code with the one in the code you posted instead of editing extra.css?
 
Honestly, an EXTRA.css edit in a custom style is very acceptable. More so than editing navigation.css. EXTRA.css is very common in custom styles. And because that template is empty by default it doesn't suffer from upgrade issues where you would normally be required to revert custom templates.
 
Honestly, an EXTRA.css edit in a custom style is very acceptable. More so than editing navigation.css. EXTRA.css is very common in custom styles. And because that template is empty by default it doesn't suffer from upgrade issues where you would normally be required to revert custom templates.
When the other style designers release styles, they don't use extra.css. I think they create their own css file.
So I could basically just create a new template, name it EXTRA2.css and apply the css there?

*creates new template, names it Purp.css

Okay it didn't work. Is it because I have to do the include: template code for this new css template?

That means I would have to edit a template after all. Dang.
 
Thanks Jake! This worked but I'm trying to release this as a style for the Resource section and am trying to avoid making any template edits.

You can modify your whole navbar significantly without making 1 template edit. More of a you can modify without making template edits rather than here's how you do it post.

The custom navbar at bbsmiley is done only using the extra.css so letting you know it can be done. :)
 
You can modify your whole navbar significantly without making 1 template edit. More of a you can modify without making template edits rather than here's how you do it post.

The custom navbar at bbsmiley is done only using the extra.css so letting you know it can be done. :)
but modifying the css is a template edit.

Maybe I'm misunderstanding but when a noob imports one of my styles and that style has the navbar edit that Jake provided saved in that style's EXTRA.css but they have already modified their .EXTRA.css, that navbar edit would not apply would it? The EXTRA.css would need to be reverted. That's what I'm trying to avoid.
 
but modifying the css is a template edit.

Maybe I'm misunderstanding but when a noob imports one of my styles and that style has the navbar edit that Jake provided saved in that style's EXTRA.css but they have already modified their .EXTRA.css, that navbar edit would not apply would it? The EXTRA.css would need to be reverted. That's what I'm trying to avoid.

That problem does not exist.

If you import a new style on top of an existing style then it overwrites the existing style. There is no merge option when importing a style. The target style is overwritten regardless of template customizations. The status of your EXTRA.css template doesn't warrant any special consideration here. If the template is empty it will overwrite the existing. If it's full it will still overwrite the existing.
 
EXTRA.css if not included can be created and won't be reverted.
It's purpose is exactly what is stands for, extra css, on top of everything else.
For the purpose of making upgrading a lot easier.
They're going to leave it alone and don't delete, overwrite, or revert it.
 
EXTRA.css if not included can be created and won't be reverted.
It's purpose is exactly what is stands for, extra css, on top of everything else.
For the purpose of making upgrading a lot easier.
They're going to leave it alone and don't delete, overwrite, or revert it.
Okay so if I create the special css edits for my style and create a template called purp.css for example, which template do I include tge css?
 
Top Bottom