Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

TypePad: How to remove navbar border?

P

p0intblank

macrumors 68030
Original poster
Sep 20, 2005
2,548
2
New Jersey
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?
 
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.
 
angelwatt said:
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.
Click to expand...

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;
}
 
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.
 
angelwatt said:
Did you change it in both locations in the file though?
Click to expand...

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;
}
 
p0intblank said:
This is with TypePad though. I don't think you can directly edit the style.css file. Unless I'm missing something?
Click to expand...

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;
}
 
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!
 
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.
 
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. :)
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back