Monday, December 28, 2009

Blog design tip of the day: Removing the border from around your header image

I know. I haven't done a blog design tip in a while. It's not because I don't want to share... it's more of an "I'm lazy" kind of thing.

So I'm going to (re)start small.

You know those double borders that a lot of blog templates automatically have? The ones that look kind of like this (from my review blog)?



 I like to remove those when I upload a header image, to make it look like this:



See the difference?

Anyway, here's the code for your header. Yours may look a little different, but what you're looking for is highlighted in red:

/* Header
-----------------------------------------------
*/


#header-wrapper {
width:780px;
margin:auto -5px;
border:1px solid $bordercolor;
}


#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}


#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

When you see the parts that say border: 1px solid $bordercolor; either remove that whole line, or simply change the "1px" to "0px" if you may want to add the border back in later. Then, that line around the header will disappear.

Also, for what it's worth, do you see the first line that says "width: 780px;" in my code above? This is how wide my header is set to be. I can find that number to know how wide I need to design my header image in my editing program (I use Photoshop Elements) when I'm creating one from scratch.


Happy blog designing! And as always, you're welcome to ask specific questions about blog design in the comments of this post and I'll do my best to answer them.
blog comments powered by Disqus