1. 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?

Discussion in 'Styling and Customization Questions' started by DRE, May 4, 2012.

  1. DRE

    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.jpg
     
  2. Floris

    Floris Guest

    Screen Shot 2012-05-04 at 11.15.16 AM.png Screen Shot 2012-05-04 at 11.15.09 AM.png


    this is the only thing by head that i know helps you control the height.
     
  3. DRE

    DRE Well-Known Member

    Thanks but I tried that and it did not work.
     
  4. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

  5. DRE

    DRE Well-Known Member

  6. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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
     
  7. DRE

    DRE Well-Known Member

    Fuuuddge.
     
  8. DRE

    DRE Well-Known Member

    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?
     
  9. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    You can. It's still a template edit and is really no better than using EXTRA.css
     
  10. DRE

    DRE Well-Known Member

    Ugh. I guess I'll start creating TMS only skins.
     
  11. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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.
     
  12. DRE

    DRE Well-Known Member

    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.
     
  13. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    ^this^

    EXTRA.css is already included by default.
     
    The8thLegion likes this.
  14. DRE

    DRE Well-Known Member

    Darn. TMS it is then.
     
  15. Shelley

    Shelley Well-Known Member

    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. :)
     
  16. DRE

    DRE Well-Known Member

    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.
     
  17. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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.
     
    The8thLegion likes this.
  18. DRE

    DRE Well-Known Member

    Aiiight
     
  19. Floris

    Floris Guest

    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.
     
    The8thLegion likes this.
  20. DRE

    DRE Well-Known Member

    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?
     

Share This Page