About   All Tips   Tips by Category   Tips by Ability   Help!

How To Center Your Header (New Templates)

Last week, I showed you how to easily widen your columns on the newer Blogger templates. Making modifications to widen your template might make you want to center your header. Fortunately, the Blogger folks have made it easy to do this, too! 

How to center your header: 

1. Visit your blog. Click on design in the top right corner.

2. Click on Customize (below the picture of your blog).

3. Click on Advanced. Scroll down and click on Add CSS.

4. Copy and paste this code into the bog box. Copy it exactly. Don't forget the period at the very beginning! If you leave out a character, it will not work.

.header-outer {

5. Check out the preview below the box. If the header is centered, you're done! If not, increase or decrease the number 85 until the header looks the way you want it. Lower numbers move the header to the left. Higher numbers move it to the right.When you're finished, click on Apply to Blog (orange box in top right corner).

Enjoy your beautifully centered header! :) :) :) 

Related posts: 
Have you been helped by my tips? Consider sharing them with your readers by adding Sneaky Momma Blog Design to your blog list or by grabbing a button to display in your sidebar! 
Want to share this tip with others? I would be honored for you to do so by linking back to this post. Please do not copy and paste my words and images onto your blog/website. I work hard on my tips and want everything to remain here. Thank you for your cooperation! :)


the cape on the corner said...

yessss...thank you! is there a way to make my header bigger so that it takes up the whole space? like if you had an image and dragged the corners out, do you know what i mean?

Jill @ Sneaky Momma said...

I don't think there's an easy way to do this on Blogger. Your best bet is to resize the image in a photo editing program, such as Photoshop Elements or GIMP (free!). Then upload the bigger image. :)

Charm Bracelet Diva said...

Wow, your instructions are always so clear! Thanks for this header info, it will come in handy. I still have a three-column minima template but I can't figure out how to change it to the new Simple template (which I LOVE). Do you think I can master it myself or should I enlist a professional? :)

Jill @ Sneaky Momma said...

It's super easy to transfer to the new templates, but you will lose every single modification you've made to your current template. This includes signatures, post divider, Pin It buttons, anything that you've added to the html of your template will be lost when you make the switch. The good news is that it's a lot easier to reinstall these items, but you have to know how to do it. The templates look very different on the inside. What's nice is that you can make lots of changes without having to dive into the html of the new templates.

My advice is to create a test blog with the Simple template. Play around with it and see if you can get it to look the way you want it to. See if you can install the design elements that were built into your current template. If you cannot get it to work, I'd then weigh whether those things are important. If they are, I'd hire a professional. :)

***Warning: Before you switch templates, I would back up every single one of your sidebar elements/gadgets/etc. Save the photos in your gadgets, copy the html codes and paste them in a document on your computer. You may not lose anything, but better safe than sorry.

ThreeSheepStudio said...

Thanks so much for sharing about centering your header !!
Excellent. Your tips are so detailed and very easy to follow.
I appreciate all of the hard work you put into these tutorials. ;)