How to center blog banner with Template Designer (updated Aug. 2012)

Is your blogger banner off centered with the new Template Designer?  Once your blog has the ‘simple layout’ or the ‘picture window layout’ it will move your banner over to the left.  Does it look like this image below?   This will make your blog look unprofessional and it is kind of annoying!!  Well, you are at the right place!  This is an easy step by step tutorial that will show you how to center your blog banner with the new Template Designer.

You should already have your banner on your blog. If you do not have a banner on your blog follow this tutorial on How to put a banner on your blog.

1.) Go to your ‘Layout’ page and then click on the blue ‘Template Designer’.

2.)   Next you will click on ‘Advanced’.  Scroll down to the bottom of the black box and click on ‘Add CSS’.  Remove the wording that is in the white box.

3.)  Paste the following code in the white box:  #Header1 {width:650px;margin:0 auto}
You may need to adjust the number 650 to the width of the banner you designed.   If you used one of our free banners the code will be anywhere from 650 to 750.  If it still looks a little off, play around with the number until the banner is centered in the preview box below.

In my sample below I changed the number to 750 and it centered the blogger banner.

 Next you will click ‘Apply To Blog’  in the upper right hand corner. Then click ‘View Blog’.  You now have a cute banner on your blog that is centered!!  Leave a comment and let us know how your blog turned out:)!

91 Comments

    • Hi Heather,
      Are you using the picture window template? I know it won’t center if you miss any part of the code when you copy it….let me know! –Becky

    • HI Cahaya, it looks like you might have the minima template? Do you know? This tutorial only works for the picture window template. Let me know what you have so I can help:) –Becky

    • Suzy, this tutorial will still center your banner when you are using the simple template. Send me a link to your blog if you are still having problems and I will take a look:) —Becky

  14. Hi, my banner centered but my blog title is still too high and to the left. can you help me? also, i tried the tut for removing transparent background and it didnt work for me… i am using picture window

  15. Holy cow thank you so much. This has been driving me crazy!! I have tried everything to get the darn banner centered and could not get it to work. Thank you, you have made my day ; )

  16. This tutorial really helped. I played with the numbers and got it centered. Great tutorial. Thank you!!! Quick question…I am using the “Swell and Good” background and banner. I got the banner centered and was able to put my title in it. Only thing is, there’s a black box around the banner. Is that how it’s supposed to be?
    Thanks!
    Shana

  17. Hey, Becky. I think it’s happening when I’m trying to edit it and putting the title of my blog in there. It is saved with in a white box. I’m using an online photo editing site. I can can put my title in, but when I save it, there is then the black box around it.
    The photo editing software on my computer won’t allow me to add text to the picture, that’s why I was trying an online site. Hmmm. Any suggestions? I’ll keep looking into it as well.
    Thank you!
    Shana

    • Hi Darlene, are you using this code on the blog you linked prairieranchchick.com? If so this tutorial won’t work because you are using the minima template. Although the white center area on your background looks off…let me check on the code and I’ll get back to you! –Becky

  21. We uploaded my friend’s new blog (SPICE 3 COl BG) from TCB shop and we have lost the banner across teh top that gives us permission to or not to “sign in”………….what did we do wrong?

    • Hello!

      I just looked at your blog, I see a missing banner, but I don’t quite know what you mean by ‘permission to sign in’. Let me know how I can help.
      I’d suggest using This banner to match.

      Thanks! ashley

  22. Thank you so much for this tip. I have had lots of friends encouraging me to start blogging. I didn’t have the slightest idea how to start until I stumbled across your website. THANK YOU!

  23. Thank you for the tutorials. I have used several and they all work great!!
    I am new to the blog world and have been frustrated at to how to set it up…
    then I found you… such a pleasure… thanks again you made my day!!

    • Hi Devri…send me a link to the blog you are talking about so I can take a look. The blog linked to this comment does not have a banner on it. Thanks! –Becky

  29. Hello, I’m loving your site. I’m new to blogging and I’m trying to download one of your cute halloween backgrounds and it’s downloading but it’s not showing me the cute picture at the top. Can you please help me? Thanks so much

  30. Hi fab tutorial and worked brilliant at first but now can’t centre it. I think I did it originally at 700.It may be because blogger has been playing up for me and each time I add something to blog or edit it I have to go to template designer and change fonts etc again. Any idea?

    Thanks for a great tutorial.

    Kate

  33. I have a 3 column blog using the picture window, I centered my picture on top but the rest of the blog seems to be shifted to the left. How do I fix this and how do I get rid of the thing gray line that goes around my entire blog below the banner. I got rid of the one tht goes around each post. Thanks for all the help! My blog keeps getting better and better!

    • Amanda, if you want to remove the black image behind your banner be sure to right click the banner on our site and click save image as. Then save it to your computer. It won’t be able to stretch out to reach the sides of your background because that banner was not designed to be that wide. Sorry! —Becky

  36. Thanks for this help! another quick question. I just used one of your Christmas layouts so I’m trying to change all my font colors and such..but when I go to template>advanced>…no matter what I try to edit, it’s not applying to my blog even when I click ‘apply to blog’. It’s just not letting me change anything except it did let me center my banner. help??

    • Hi Kelsey, I’m not sure why it won’t let you change the colors….I’m not too familiar with the Simple template that is on your blog. Maybe try to switch to a different template and see if it will let you change the font color. Keep me posted if it works! –Becky

  39. Hi Becky,

    I have centered the banner but my Blog Title is not centered on the banner. I saw that someone else wrote about this but I’ve tried everything and the letters just won’t budge. What am I doing wrong? Help!

  40. I am brand new at this and trying to center my banner…..it is still to right and down way low….
    Any ideas on what I am doing wrong.
    I just found your site and think it will save my blog!!!
    Thank you for your time,
    Jodi

    • HI Jodi! It looks like the banner was uploaded in the wrong spot. Make sue when you are on your layout page to add it to the gadget at the top center of your page. It will say configure header when the box comes up. Let me know if this helps:) –Becky

  44. so I’ve tried this and can’t seem to get it to work. I love my new blog and banner but can’t figure out why it’s off centered. I’ve done everything your tutorial mentioned and still no luck…anyway someone can “help” me with this…I want my blog to look as “professional” as possible! Thanks!

    • Hi Michelle! You have the minima template, so this tutorial won’t work on your blog. If you go to your HTML code and find this part:

      #header-wrapper {
      width:660px;
      margin:0 auto 10px;
      border:1px solid #000000;
      }
      #header-inner {
      background-position: center;
      margin-left: auto;
      margin-right: auto;
      }
      #header {
      margin: 5px;
      border: 1px solid #000000;
      text-align: center;
      color:#999900;

      You will want to change the width 660 to about 750…play around with the number until it is centered. Then change your border 1px to 0px. That will remove the border behind the banner:) Let me know how it turns out!! —Becky

  45. Ha! Nevermind. The other day I played with these number over and over and could not get it to work without cutting my banner. Now I just tried 750 and it’s centered just right, even though that did not work the other night! Thanks for the great blog stuff!

  46. I used your code a bit ago to center my banner and it worked just perfect. I have tweaked things a bit with my blog and the header and not I can’t seem to get it to center. When I am on the layout page the title box is far off the page so I have to scroll right to be able to click on “title” to edit it. Maybe this is my problem? Do you have any ideas?

  48. Thank you soooooooooooooooooo much! I thought my blog name was centered, but I noticed when using my daughter’s iPad it was on the left. Then I just switched from Internet Explorer to Chrome and suddenly my title was on the left. Now I wonder if it was always on the left, but didn’t show that way to me? So easy to change, but who knew? Thanks for this tutorial!

Leave a Reply