Wednesday, 21 December 2011

CENTER YOUR HEADER: BLOGGER DESIGNER TEMPLATES

If you find my earlier tutorial on how to center your header doesn't work for you, chances are you are using one of the new Designer templates. These need a different fix - and here's how!

1. Go to your Dashboard then click on 'Design'. You'll be in Page Elements view.

2. Click on 'Template Designer'.


You can see my header looks odd: this is because it's too far to the left. I need to center it.

3. Scroll down to 'Advanced'.


4. Scroll down and click on 'Add CSS'


5. Copy and paste the code below into the box, as shown above:
#header-inner img {
margin-left: auto;
margin-right: auto;
}

6. Hit 'Enter' on your keyboard, hit or your spacebar, to enter the code.

You'll see your header move immediately. If you're happy, click the orange 'Apply to Blog' button, and you're done!
your photo name

22 comments:

  1. I have a very customized blogger blog with a slideshow and can't for the life of me get the slideshow centered. Do you have any idea what code I'd put in there to do that?
    The slideshow is done with code in a widget.
    Here's my blog:
    http://www.sylviacookphotography-blog.com/

    ReplyDelete
  2. Sylvia - this is a great question! Here's my tutorial on scrolling marquees (slideshows): http://1stfloorflatcomputery.blogspot.com/2010/01/scrolling-marquees.html

    You'll most likely have your scroll direction as 'left' or 'right' so don't change that. The bit you need is the DIRECTION part of the instruction. This should fix it - and do contact me again if it doesn't and we'll try something else.

    ReplyDelete
  3. THANKS!! I love having all your info to go to when my blog isn't right! You are a true treasure!
    Hugs, Lisa

    ReplyDelete
  4. Thank you, thank you, thank you! It worked! I JUST started my blog and am learning all I can but am having problems with the favicon I designed showing up, the header being centered, & not being able to find my blog when I search it on Google. Otherwise I think I'm learning okay, but these 3 things have been driving me crazy. I now have one problem solved. Thanks again so much for sharing the how-to. I found your blog through Debbidoos blog am a new follower and am looking forward to browsing around your site.

    ReplyDelete
    Replies
    1. I'm so glad. And I know what you mean re having just started - you've got a clear idea of how you want things to look... but don't know how to find the information you need to get there. I'm extremely happy to have been able to help.

      RE the favicon, there's now a new automatic thing where you just enter the pic for the favicon (make sure it's small enough) when in Design view. If a jpg doesn't work, try again with a png or a gif.

      RE finding your blog - Google often takes 24-48 hours for major changes, so it might be worth trying again in a day or so. Also, when you have more content this seems to help. Try Googling your name as well as the name of your blog. As you have more posts, and also start getting followers, you'll notice your blog is easier to find. Hope that helps.

      Delete
  5. Dear Madam...... I would like to thank you 4m my heart.. Your post is truely helpful. Thanx a million to you.

    ReplyDelete
  6. Dear Madam.. M not good at english. So forgive me if anything goes wrong. I would like to thank you 4m my heart. Your post is truely helpful. Thanx a million to you.

    ReplyDelete
  7. thanks so much this issue was driving me nuts!

    ReplyDelete
  8. THANK YOU!!!
    I've been wanting to do this for so long but couldnt find a way, now you solved it, really easy!! thanks thanks !! love you!!

    ReplyDelete
    Replies
    1. So glad I was able to help, Jade! And thank you for leaving a comment.

      Delete
  9. OHHHHHH THANK YOU THANK YOU!!!! It's been driving me crazy.

    What is the code for other items. Right after the header I have a configure text gadget that is also not centered. Also some gadgets at the end that are also not centered.

    so glad I found you!

    ReplyDelete
    Replies
    1. Hi - glad I could help! RE your other problem, if it's a text widget you've positioned to go under the header, like a static post, then this is easy. If you can't center in the widget by using the text buttons, then click on its html tab so you are in html view and enter this symbol: <
      followed by the word center, and then this closing symbol:
      >
      then add the text you need, followed by that opening symbol again:
      <
      follow this with
      /center
      and close the instruction with this symbol:
      >

      That should fix it. OR - if it has an instruction in the html, eg: text="left" then just change that word to "center".

      Delete
  10. MANY THANKS!!!!!!!!!!!!!!! SASSYX

    ReplyDelete
    Replies
    1. You're more than welcome. Glad to help! And thanks so much for leaving a comment.

      Delete
  11. This isn't working for me. I don't understand why. You are the 5th place I've looked for coding to help m center my header. Any ideas why it's not working?

    patternedlove.blogspot.com

    ReplyDelete
    Replies
    1. HI Naomi
      This should work for you - did you press Enter after copying&pasting the code in the CSS box? You need to press Enter or line space after the code, then you should see it working immediately.

      I'm wondering if you've already done this - I just took a look at your blog, and the heading looks centered to me.

      The other thing I can think of that might upset the look of the header is if it's wider than the recommended size for the blog. Did you click on 'Shrink to Fit'? You can usually get away with it if the header is around 10-20px wider, but if it's a fair amount (50px or so) this can throw the positioning out.

      Delete
  12. Thank you so much!
    Worked perfectly for me!

    ReplyDelete
    Replies
    1. So glad, Shaun! And thank you for leaving a comment.

      Delete
  13. Thank you soooooo much! Worked like a charm once I hit "enter". Voila! Easy Peasy!

    ReplyDelete

I absolutely love to receive comments!

But please note - I DO check for spam, and I moderate all comments - any spam is deleted at source.