TypePad: How to remove navbar border?

Discussion in 'Web Design and Development' started by p0intblank, Jan 15, 2010.

  1. p0intblank macrumors 68030

    Joined:
    Sep 20, 2005
    Location:
    New Jersey
    #1
    As you can see, the navbar on this site that I am working on has a light gray border around it: http://www.thestorybehindthemusic.com/

    I've been messing around with Firebug and I eventually got rid of the border. However that change only reflected within Firebug and not the actual Custom CSS window within TypePad. I applied the changes, refreshed the page and the border is still there. I've been trying for the past hour to get this code just right. I'm trying to have a border-less page.

    What's the best way of going about this?
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    Border seems to be created by a background color rather than a border property. It's being applied to #nav on line 126 and 950. I think the fact that it's in 2 spots is what may have messed you up. You can also get rid of the left/right padding on #nav.
     
  3. p0intblank thread starter macrumors 68030

    Joined:
    Sep 20, 2005
    Location:
    New Jersey
    #3
    That's what I thought it was at first too. I changed all the background color values to #FFFFFF just in case. This worked within Firebug, but when actually applied in TypePad's Custom CSS window, it doesn't work.

    Here's the code I have for these sections right now:

    Code:
    #pagebody {
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background:#FFFFFF none repeat scroll 0 0;
    padding:0 5px;
    
    #nav-inner {
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    }
    
    #nav {
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    }
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    Did you change it in both locations in the file though?

    Even if you just remove the "padding: 0 5px" on line 126 that will remove the border look.
     
  5. p0intblank thread starter macrumors 68030

    Joined:
    Sep 20, 2005
    Location:
    New Jersey
    #5
    I believe so. Here's all the custom CSS code I have thus far:

    Code:
    body {
        background-image: none;
        }
    
    #banner { height: 122px; background-image: url(http://www.thestorybehindthemusic.com/images/header_02.png);
    background-position: 0px 0px; background-repeat: no-repeat; }
    
    #banner-inner {
        background-image: none !important; 
    }
    
    #banner-header a { display: block; left: 0; top: 0; height: 338px; text-indent: -1000em; } #banner-description { overflow: hidden; width: 0; height: 0; margin: 0; padding: 0; text-indent: -1000em; }
    
    /* three-column tweaks */
    
    	.layout-three-column #container
    	{
    		width: 980px;
    	}
    
    	.layout-three-column #alpha
    	{
    		width: 150px;
    		
    	}
    
    	.layout-three-column #alpha-inner
    	{
    		border: 0;
    		padding: 15px 15px 15px 15px;
    		background: #FFFFFF;
    	}
    
    	.layout-three-column #beta
    	{
    					width: 600px;
    		
    		
    	}
    
    	.layout-three-column #beta-inner
    	{
    		border-left: 1px solid #000000;
    		padding: 15px 15px 15px 14px;
    		background: #FFFFFF;
    	}
    
    	.layout-three-column #gamma
    	{
    		width: 160px;
    		
    	}
    
    	.layout-three-column #gamma-inner
    	{
    		border: 0;
    		padding: 15px 15px 15px 15px;
    		background: #FFFFFF;
    	}
    
    #pagebody {
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background:#FFFFFF none repeat scroll 0 0;
    padding:0 5px;
    
    #nav-inner {
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background:#FFFFFF;
    }
    
    #nav {
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background:#FFFFFF;
    padding:0 0;
    }
    
    
     
  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    You need to edit the style.css, not try to create a custom CSS file.
     
  7. p0intblank thread starter macrumors 68030

    Joined:
    Sep 20, 2005
    Location:
    New Jersey
    #7
    This is with TypePad though. I don't think you can directly edit the style.css file. Unless I'm missing something?
     
  8. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #8
    Well, if it doesn't allow editing that file then you'll need to add !important to the CSS you have.

    Code:
    #nav {
     background-color: transparent !important
     padding: 0 !important;
    }
     
  9. p0intblank thread starter macrumors 68030

    Joined:
    Sep 20, 2005
    Location:
    New Jersey
    #9
    I'm getting there! I fixed the border around the navbar, but now the footer refuses to change. My current code:

    Code:
    body {
        background-image: none;
        }
    
    #banner { height: 122px; background-image: url(http://www.thestorybehindthemusic.com/images/header_02.png);
    background-position: 0px 0px; background-repeat: no-repeat; }
    
    #banner-inner {
        background-image: none !important; 
    }
    
    #banner-header a { display: block; left: 0; top: 0; height: 338px; text-indent: -1000em; } #banner-description { overflow: hidden; width: 0; height: 0; margin: 0; padding: 0; text-indent: -1000em; }
    
    /* three-column tweaks */
    
    	.layout-three-column #container
    	{
    		width: 980px;
    	}
    
    	.layout-three-column #alpha
    	{
    		width: 150px;
    		
    	}
    
    	.layout-three-column #alpha-inner
    	{
    		border: 0;
    		padding: 15px 15px 15px 15px;
    		background: #FFFFFF;
    	}
    
    	.layout-three-column #beta
    	{
    					width: 600px;
    		
    		
    	}
    
    	.layout-three-column #beta-inner
    	{
    		border-left: 1px solid #000000;
    		padding: 15px 15px 15px 14px;
    		background: #FFFFFF;
    	}
    
    	.layout-three-column #gamma
    	{
    		width: 160px;
    		
    	}
    
    	.layout-three-column #gamma-inner
    	{
    		border: 0;
    		padding: 15px 15px 15px 15px;
    		background: #FFFFFF;
    	}
    
    #pagebody {
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background:#FFFFFF none repeat scroll 0 0;
    padding:0 5px;
    }
    
    #nav-inner {
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background:#EEEEEE;
    }
    
    #nav {
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background:#EEEEEE url(nav-ide-bg.gif) repeat-x scroll left bottom;
    
    #footer {
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background:#EEEEEE;
    border-color:#EEEEE;
    border-style:none;
    border-width:1px 1px 1px;
    font-size:1.2em;
    padding:30px 20px; !important
    }
    Sorry about all the posts... CSS and I don't usually get along. I appreciate your help though!
     
  10. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #10
    Looks like it's related to border-width on #footer. You may need to add the important part for it as well.

    I've never used TypePad, but it seems a pain to customize. I'm not sure why it needs the important part because it looks like your customized CSS should be getting loaded after the other parts so it should override it.
     
  11. p0intblank thread starter macrumors 68030

    Joined:
    Sep 20, 2005
    Location:
    New Jersey
    #11
    Oddly enough, the #footer variables suddenly work, but only because I placed it at the top of the style sheet. I've never seen that before... but okay, it works now. And yes, TypePad is a pain to work with. I've been using Squarespace for my website for over a year now and am very impressed with the service.

    Anyway, thanks for your help! I appreciate it. :)
     

Share This Page