On my many many travels to various blogs here and there I've been seeing a recurring
problem on many blog headers. I know that when I was figuring out all the ins and outs of blog design
enough to get me by it would drive me nuts when things just didn't look right on my blog: not enough space between sidebars, my header being off-centered, borders in places that I didn't want them, etc. I imagine that I'm not the only one that is bothered by that stuff so here's a quick fix for one major blog design problem:
centering the header.I'm not sure if you can see it but the arrow on the left is pointing to a light gray border and the arrow on the right is to show you how the header is outside that border. Not good. Fixing this problem is actually pretty simple. The first thing I do is remove the border altogether. That's just a matter of preference really but since this is my blog, we'll do it my way. lol
Step 1 - Removing Border from Header
- Go to your "Layout" tab and click on "Edit HTML"
- Find this block of code:
#header-wrapper {
width:660px;
margin:0 auto 10px;
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;
Anywhere you see
border: 1px in this section, change it to
0px (that's a zero, not an "oh"). That will remove the border from around the entire header.
Step 2 - Centering Header (I got this information from this
blog)
- While still in "Edit HTML" mode, find this block of code:
#header img {
margin-$startSide: auto;
margin-$endSide: auto;}
ADD THESE 2 LINES RIGHT BELOW margin-$endSide: auto;
position: relative;
left: -25px;
So now your code should look like this:
#header img {
margin-$startSide: auto;
margin-$endSide: auto;
position: relative;
left: -25px;
}
Here's the only somewhat tricky part and by tricky I mean you may have to play around
with the numbers a bit. See where it says -25px;? You may have to adjust the numbers
less than -25 or maybe more than -25 to get it closest to the center on your
particular blog. Make sure you "PREVIEW" before you save. Wallah - you're done. :)
Hopes this helps. If you use this tutorial, please be sure to let me know by leaving me a comment. :)
