{Blogging Tip #1 – How to Center Your Header}


**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.

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. šŸ™‚



Due to the amount of content that is used without permission and proper credit, I am no longer allowing a full RSS feed. I value each and every reader so I hope you will click through and come visit!

XOXO
Diana
www.thegirlcreative.com

Similar Posts

11 Comments

  1. 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!

  2. 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

Leave a Reply to Restorative Living Cancel reply

Your email address will not be published.