{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

about diana

About Diana

Here at The Girl Creative I mostly share FREE printables and FREE SVG Cut files for Silhouette and Cricut. Every now and then you’ll see a simple craft or delicious recipe. From time to time I will blog about every day life and that includes my family and my relationship with Jesus. Read more…

Leave a Reply

Your email address will not be published. Required fields are marked *

11 Comments

  1. Kady Bug Photography says:

    I’ve been searching forever on how to do this!!! Thank you for posting this 🙂

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

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

  4. Thank you thank you, it works like a charm!!

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

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

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

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

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