**Since this is my newest blog, I don’t have many posts yet but blogging tips are always interesting to me so I wanted to use this post to participate in Tip Junkie’s Talk to Me Tuesday! If you have a favorite blog post, be sure to link up here.
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.
Step 1 – Removing Border from Header
- Go to your “Layout” tab and click on “Edit HTML”
- Find this block of code:
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;
}
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. š
XOXO
Diana
www.thegirlcreative.com
Found your site through Tip Junkie. Love this post! My off-center header has bugged me from the beginning. I followed your steps and it looks much better! What do you think?
http://livingthegreenslife.blogspot.com
I’ve been searching forever on how to do this!!! Thank you for posting this š
Thank you for posting this. I’m going to try it in the morning. I want to try your other tip too re: a top menu bar.
Well, I finally got around to trying this and it didn’t work for me. I left a comment on the original post from the other blog.
Thank you thank you, it works like a charm!!
I once banged my head on a wall (figuratively) for two hours trying to figure this out. I’d given up and lived with a leaning header. You solved it in five minutes. Thank you so much!
Your blog looks great, Amanda. Glad I could help. š
I know this is old, but I hope you get this through e-mail. Can you take a look at my site & tell me if you know of an easy way to make my header go more left to right, take up more of the room? I hope that makes sense. Let me know!
http://www.ladybayou.blogspot.com
CLR_LPC@yahoo.com
THANK YOU THANK YOU THANK YOU. I was almost in tears trying to fix my header. I couldn’t stand that gray box and the non-centered-ness of it all. THANK YOU FOR YOUR HELP!!!
Thank you so much for this info. I am just not getting into blogging and sources like this make it so much more fun. I know all this will help me to revamp my website as well.
Hi, just wondering if I can still centre my header with the new blogger templates. I did manage to get to Edit HTML by viewing in the old blogger format but could not find the code to change. Have they changed the code?? Or am I missing something?? My off centre header is bugging me and I would love to fix it if I can! Thanks