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:)!
I have been trying to center my banner and it never moves. I have tried all numbers and it is one of your free ones. What am I doing wrong?
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
WOW!!! thank you so so much!! I never could’ve done it without you!! you make it sooo easy! thanx again! love your blog!!
Thanks so much for sharing this tip. Incredibly helpful!
Wow, thank you so much! I used the chillin-at-the-beach banner, and I had to change the number to 770, I would have never figured this out on my own!
Thanks Michelle!
It won’t change on my blog either and I tried all the numbers. Help please!
Hi Kayla, are you using the picture window template? If you have the minima template it will not work.
Hi there, thanks for this wonderfult tutorial!! so much appreciated. :) It works!
Thanks Jen for stopping by and leaving a comment! I’m so glad it worked:)!
Is there similar code on centering the Blog Description? Thanks!
Christine, once you have the number in correctly (how wide your banner is, 750 ect) then the description should center too! Your banner is pretty wide, so maybe try 1000 or 1040 for your number. Hope this helps:) –Becky
Thanks Becky!
THANK YOU, THANK YOU, THANK YOU! I spent forever last night trying to figure out how to center the header!
Hello The Mess- YOUR WELCOME! Your blog looks great! You should enter into the Rate My Blog page:) http://thecutestblogontheblock.com/rate-my-blog
–Becky
Woooowww Thank you so much!!! My banneris finally centered!!
Your welcome Naldy! Thanks for stopping by! –Becky
it won’t work to the left.. :(
help please.. :(
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
Good morning I think that your blog is really nice!
Can you show me how to center my blog’s header? It’s just a title, and doesn’t have a header
Hi Aina, when you have just the text and not a banner you can still use the same code in this tutorial. Just use a lower number….maybe 200 or 300. Your blog looks great by the way:) You should enter into the Rate My Blog page on our site! http://thecutestblogontheblock.com/rate-my-blog
–Becky
I have the simple templet and it still wont let me do it. What am i doing wrong? Thank you for showing us how to do this! :)
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
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
Emily, if you want to send me a link to your blog I will take a look:) –Becky
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 ; )
Thanks for stopping by Chastity! Happy to help:)! –Becky
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
Hi Shana,
There should not be a black box behind your banner. When you clicked on our banner on our site did it get bigger? Then did you right click the banner and mark ‘save as’? That should save it to your desktop without the black box:) Let me know how it turns out! –Becky
Hallelujah! I neeedd this-you’re my savior.
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
I have applied the code from the tutorial, but it is not working. Slight movement, but it is still too far to the right. I have worked with the numbers, but still no change. What am I doing wrong?
PRC
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
Yes, I am using it for this blog.
Thanks
How do I post to my wordpress blog from my desktop, without 3rd party software?
Hello,
We deal mainly with blogger, you may want to ‘google’ your question. Thanks!
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
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!
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!!
Thanks for the tutorial. I just tried this on my test blog in blogger. I ended up having to use 600 because my blog was so wide. It worked!!! Thanks so much! Katharine
THANKYOU!THANKYOU!THANKYOU!THANKYOU!THANKYOU!THANKYOU!
I cant seem to get my Blog Name and Description to fit into the banner.. how do I fix this?
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
I am having a problem centering my header also and the css code doesn’t work. What can I do? Thanks for any help you can give me. Linda
Hi Linda, your blog header looks centered on the blog you posted here. Is it a different blog? –Becky
I got the banner centered but the banner is to high up it there is no margin at top of page….how do I get the banner to come down
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
Hi Trish! Thanks for using our backgrounds! You will want to go to our free banner page here: http://thecutestblogontheblock.com/category/banners to find what banner you want for the top of your blog. Let me know if this helps:) —Becky
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
Hi Kate! You must have figured it out because it looks good now;)!
How do I make my blog title centered in my banner image?
Maria, usually the title will center along with your banner. Can you send your blog link so I can take a look? –Becky
I have added one of your banners to my blog. It is centered! Thanks for the tutorial.
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!
Hi Christy! Can you leave your blog address so I can see what is going on? Thanks! —Becky
I added the banner…. How do I get it to stretch across the blog and connect with my background?
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
You sooo rock! My banner is finally centered. Thanks so, so much. Anni
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
I added the snow code and it doesn’t work. Know why?
Love your site and use it often. You guys are awesome!
Thanks!
Hi Kimberly, it looks like the snow is working on your blog now! Do you see the snow on your end? —Becky
Thank you so much! I would never have figured this out on my own!
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!
HI Anita, you will want to open up the banner you downloaded in a free photo editing program. This tutorail: http://thecutestblogontheblock.com/tutorials/personalize-facebook-timeline-cover
shows you how to edit a facebook time line cover, but you can edit your blog banner as well. Once you open up your banner in Pixlr.com you can add your text on the banner and center it. Blogger won’t let you center it on your actual blog….hope this helps!
–Becky
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
575 worked perfect to get mine center! I could never have done this without this tutorial! Thanks so much!
Thank you so much TCBOTB. the tutorial is very helpful. lovin it much (:
My off center banner was killing me! Thank you thank you thank you! It’s perfect now!
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
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!
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?
Hi Sara! Thanks for stopping by! Your banner looks centered…let me know if you still need help:) —Becky, TCBOTB
Thank you so much.
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!
Help! I’ve taken my width down to 0, and still it’s not centered. My blog is http://www.SarasSoapsnSuch.blogspot.com.
Hi Sara, try making the number 700 or 750. That should center it! Let me know how it turns out:) –Becky TCBOTB
Becky, I tried everything from 700-1000, and 700 gave me the best results, but it’s still off-centered. :( What do you suggest next?
It took a bit of fiddleing with the number, but it worked!! Thanks so much!
Thank you so much! It was so easy and looks great!
Does this work on WordPress blogs?
This coding will only center you banner on blogger, sorry!
Thank you so much!!! I love your site. Now i just need to figure out how to get rid of the block of color behind my banner so the full background shows up!
Thanks Tracey! It looks like you remove the block of color behind your banner! Here is the tutorial on how to remove that color that covers your blog background for anyone else that needs it:)! —Becky, tcbotb.com
http://thecutestblogontheblock.com/tutorials/remove-blue-box-covering-blog-background
it still not changing.. y?
Hello nuralee, do you mean your banner is not centering? thanks! Ashley
WOW!Thak you so much. My heading looks so much better now :)