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

Where Can I Change navTabs Height in Style Properties?

DRE

Well-known member
#1
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.jpg
 

Jake Bunce

XenForo moderator
Staff member
#6
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
 

DRE

Well-known member
#8
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?
 

Jake Bunce

XenForo moderator
Staff member
#11
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.
 

DRE

Well-known member
#12
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.
 

Shelley

Well-known member
#15
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. :)
 

DRE

Well-known member
#16
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.
 

Jake Bunce

XenForo moderator
Staff member
#17
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.
 
F

Floris

Guest
#19
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.
 

DRE

Well-known member
#20
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?