Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Friday, November 19, 2010

Reposition Blogger Header Image

Previously I have written a tutorial on how you can resize your Blogger's header image. Here's the sequel to that tutorial, how to reposition your Blogger header image. As usual, there isn't a straight forward method to align/reposition Blogger's header image. Most users would want their images to be in the center, and some prefer either on the left or the right depending to the layout of their templates. It goes without saying that there are more than one way in which you can do this. In this tutorial, you will learn how to place your header at an exact location of your choice.

If you're using the old Blogger interface: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

If you're using the new Blogger interface: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
#header {
padding-left: 170px;
padding-top: 0px;
}

Increasing the left-padding will bring your image towards the right. Increasing the top padding will pull your image down.


Align to Center

If you want to center your header image, use the code below instead (either one):
#Header1_headerimg{
margin-left: auto;
margin-right: auto;
}
OR
#header-inner{
margin-left: auto;
margin-right: auto;
}
OR (For image-less header)
#header-inner{
text-align: center;
}


Note: If you're using a heavily moded third party template, you might want to change the Header ID in the code above before attempting this tutorial. Have fun.

52 comments:

  1. Emmy: Thanks for that thoughts. Enjoy your stay here.

    ReplyDelete
  2. @Rinah: Nice of you to drop a comment, and you're welcome. Enjoy your stay here.

    Cheers.

    ReplyDelete
  3. I remove my image header and just use a plain color background thru advance css but the problem is the margin the left side is too big while on the right is occupied the rear side. How can change it and make it to the center?

    Thanks,

    ReplyDelete
  4. @lena: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog:

    .header-outer{
    margin-left: 0px !important;
    }

    Cheers.

    ReplyDelete
  5. Hi,
    I'm trying to redo my friends blog and don't know what I'm doing wrong.
    Here is the look I'm going for...
    http://creativepracticeblog.blogspot.com/

    Here is her blog...
    http://craftspotbykimberly.blogspot.com/

    I thought I could just copy and past the html code from my blog to hers, but it doesn't seem to work, and now I don't see a "save" button when ever I do change anything in her html area.
    Can you help me?

    ReplyDelete
    Replies
    1. Hi Robin,

      Transferring your template's HTML will only copy your styling mostly. You still need to manually add sidebar gadgets to the other blog. And if you want the CSS from your blog to work on the other blog (the CSS is already in the HTML btw), you need to make sure all the gadgets have the same IDs as your blog, which is not practical as you don't get to choose gadget's ID manually. What you can do is, add all the necessary gadgets, and inspect the new blog's gadget IDs and change your CSS code accordingly to match the new ID. Let me know if you need further help..

      Delete
  6. You are a great help, thank you so much! My friends blog is coming together nicely!

    ReplyDelete
  7. I have been trying for two days now to get my header image to center, but it will not work. I have tried adding CSS codes, but the image doesn't respond to any of them. Please help!

    http://sheenaashlock.blogspot.com/

    ReplyDelete
    Replies
    1. Hi Sheena,

      Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      #Header1_headerimg{
      position: relative !important;
      left: -80px !important;
      }

      Cheers :)

      Delete
  8. I spent about 3 hours trying to figure out how to align my my header to the top and center with blogspot and remove the gray background and I just can NOT seem to find a solution.

    http://thejoyofdiablo.blogspot.com/

    If you could help me out I would seriously appreciate it!

    ReplyDelete
    Replies
    1. Hi Tod,

      I don't see any gray background and your header image looks centered now. Have you got this sorted?

      Delete
  9. Hi Yoga,

    My header is centered just fine, but for some reason the post box below it isn't. I can't seem to find out how to align the body of my blog with the header. Any idea?

    http://www.dontsewangrybaby.com

    ReplyDelete
    Replies
    1. Hi Amber,

      Your body seems to be aligned to the center when I viewed it. See screenshot below:
      http://img684.imageshack.us/img684/3874/63492343.jpg

      Can you show me a screenshot of what you're seeing?

      Delete
  10. I know some html, not css, but I am learning, thanks so much you're awesome!

    www.iampiscesw.blogspot.com

    ReplyDelete
    Replies
    1. Hi Sherry,

      You'll get the hang of it in no time!

      Happy blogging :)

      Delete
  11. I'm trying to delete any padding around my header, but no matter what I do, there is always white around it.

    My blog is at http://ericcoomer.com and I am trying to make the header look like it does at http://ericcoomer.bandcamp.com.

    Any ideas?

    Thanks so much,
    Eric

    ReplyDelete
    Replies
    1. Hi Eric,

      Sorry for my ridiculously late reply. I've seen your blog and it looks like you've got rid of your white padding. Let me know if this isn't the case.

      Cheers.

      Delete
  12. I'm trying to left-justify my header image, and I've tried just about every piece of CSS code you've suggested but nothing worked :( Please help.

    My website is:
    www.onesummerdayphoto.com

    And here's all the CSS I've added so far:

    #Flipcard.ss, #views ul li:nth-child(2),

    #Mosaic.ss, #views ul li:nth-child(4),

    #Snapsnot.ss, #views ul li:nth-child(6),
    #Timeslide.ss, #views ul li:nth-child(7)
    {
    display: none !important;
    }


    #header .header-drawer.sticky, #header .header-drawer {
    top: 134px;
    }

    #header .header-bar{
    height: 165px;
    }

    #header:hover .header-drawer, #header .header-drawer.open, .header-ssyby, body.viewitem-open #header .header-drawer {
    top: 165px;
    }

    #header-container {
    height: 205px;
    }

    .viewitem-panel .viewitem-inner {
    top: 100px;
    padding-bottom: 120px !important;
    height: auto !important;
    }

    #header-container #header.header .header-bar span.title{
    background: url(http://4.bp.blogspot.com/-z9YQjliPRhY/US7m7lIAR8I/AAAAAAAABcg/ZL-kK9JjZ0w/s1300/1SDBANNER+NEW.png)
    no-repeat center;
    margin-left: auto !important;
    margin-right: auto !important;
    height: 165px;
    }

    .header-bar #search{
    display: none !important;
    }

    #header {
    padding-left: 0px;
    padding-top: 0px;
    }


    .header-bar span.title a h1, .ss, #header .title a:hover{
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    }


    .header-bar span.title a h1, .ss, #header .title a:hover{
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    text-decoration: none !important;
    color: transparent !important;
    text-shadow: 0px 0px 0px transparent !important;
    }


    Thanks for your time, effort and dedication :)

    ReplyDelete
    Replies
    1. Hi 1SD,

      It looks like your header image is already left-justified. Have you got it figured? Sorry for the late reply btw.

      Delete
  13. Hi Yoga!

    I love your site and so far it's helped me loads! Thanks :)

    I have just been trying to figure out how to make my header (and the menu bar below it) the width (and center) of the entire length of the page, and to make the body content less wide than my header. I have tried everything but I can't seem to find the solution. Could you please help me?

    This is my blog: http://readiculously-peachy.blogspot.com

    You will see everything is centered perfectly, but I want the body content to be smaller (less wide) than the header and the menu bar. Also, (I don't know if this an entire different question)-- I want my header and menu bar to fit the complete width of the page with no paddings/margins on the left/top/right sides of the page (ex: http://parajunkee.com/).

    Any help would be much appreciated! If you need my email, please let me know!

    Thank you in advance!

    Florentine

    ReplyDelete
    Replies
    1. Hi Florentine,

      You need a very large image, and blockyy header image (as opposed to imaege that follows a cut-off, like the ribbon in yours) if you wanna simulate what parajunkee has. Anyways, this is a huge topic, and it is best if we can handle one thing at a time.

      I see your header is already centered, and your content width looks smaller than your header. Have you got it fixed?

      Delete
  14. Hi bro, thanks for your tips, i am unable to resize mine regardless of which css code i use, check out my blog and please help me brother http://mmo81.blogspot.com

    ReplyDelete
    Replies
    1. Hi Sarry,

      This is what I'm seeing: http://img580.imageshack.us/img580/9577/20130501015016capture.png

      I'm not quite clear on how you'd like to resize your header. Could you provide me with an annotated screenshot (with some simple scribbles) on how you'd like your header to be?

      Delete
  15. Is there a way I can pull up my page tabs (I created them myself using HTML coding) to fill in some of the black space between them and my header image? http://mrsstianchi.blogspot.com/

    ReplyDelete
    Replies
    1. Hi there,

      Try this:

      #header{
      margin-bottom: -70px !important;
      }

      Play around with the value '70px' :)

      Cheers!

      Delete
    2. just what I needed :) You rule Yoga

      Delete
  16. thank you for the tutorial! i now can move my header to the position i want but the problem is it's placed behind the post background (or the board idk what its called) how can i move it to front?

    ReplyDelete
    Replies
    1. Let's have a look at your blog. What's your blog's address?

      Delete
  17. hello sir,

    I want my header and menu bar to fit the complete width of the page with no paddings/margins on the left or right sides. I am trying to do this via template designer but it is effecting the whole page width.

    http://www.blogenia.blogspot.com

    thanks

    ReplyDelete
    Replies
    1. See if this is what you're looking for:

      .tabs-outer, #header{
      position: relative !important;
      left: -40px !important;
      width: 1390px !important;
      }
      #Header1_headerimg{
      width: 1390px !important;
      }

      Cheers.

      Delete
  18. thanks for the reply but now if i am trying to shrink my page width it is affecting the header and tab too.

    I want it, like techgyd.com

    ReplyDelete
    Replies
    1. I think what you're looking for is a stretch template. Right now, you're using a fixed-width template. To convert a fixed-width template to a stretch template is too much work I'm afraid. It'll be much easier if you could just start off with a stretch template (just Google it).

      Delete
    2. hi,
      I searched about stretch template but everybody is offering a stretch template. Which one should i use ? Do you have any suggestions ?

      thanks.

      Delete
    3. Personally, I think there are only a few stretch templates available these days, so your option is indeed a little limited. I'd suggest you to try a couple of them and see which one fits well to your taste and your blog's theme. If I have to pick one, I'd always go for Minima Stretch, my personal favourite :)

      Delete
  19. Thank you very much for your tips sir!

    ReplyDelete
  20. I've read so many tutorials I'm not exactly sure what to do. My header image looks like this right now http://minttuscloset.blogspot.fi but I would like it to be fitted like in this blog http://www.xeniasday.com . How do I do that? So it doesn't cover the entire page when someone opens my blog but that you can actually see a part of the post too. Thanks!

    ReplyDelete
    Replies
    1. We're dealing with ratios here. Right now, your header image is like a square. You need to get a rectangle one. You could use the same image, but you need to crop it so that it isn't too long/tall. The problem with your current image is, yes, you could make it wide enough to cover your entire menu, but, the image will also be long and tall - unlike the image used in xeniasday. See what I mean?

      Get back to me once the image is cropped a little, and we can pick it up from there.

      PS: To crop the image, open the image in your computer using some Image Editor software (like Ms Paint) and get rid of the bottom/top part, so that it isn't too tall. Save the image once you're done editing, and reupload the newly edited image.

      Delete
  21. hey can you help me with the header, I tried doing exactly the same as per the instructions however, the header is still aligned right and does not show at the centre. would be really glad if you can help yoga. as I got the image designed and the designer wants to know the width and can the header cover all of the wite space at the header.

    ReplyDelete
    Replies
    1. I see your current blog's width is set to about 1370px. If you want a fitting header, your designer would have to come up with a header size that is 1370px wide, and you have to make sure you keep this setting intact for your blog's width. But I must say, average blogs don't go beyond 1000px, unless if you want to have a horizontal scroll bar appearing in your viewer's screens.

      That said, you can use the following code to manually reposition your header for now. Just adjust the numeric value accordingly.

      header {
      margin-left: -50px !important;
      }

      Delete
  22. You just have to do simple stuff... I added a news flash here on this website IPL live streaming But the overlapping caused some issues so what i did was finded #header in css and changed margin to margin-top:2%; that worked :P
    simple and easy mann

    ReplyDelete
  23. I've found a background offered in Blogger Template, Advanced, that I just love.
    However, my header is so high up on the page, the cute background is not being shown...bummer
    Is there a way to move my header down on the page so that the top of the background is visible.?

    ReplyDelete
    Replies
    1. I get what you mean. The following code should add a 100px gap on top of your header. Add it to your Add CSS box:

      .content{
      padding-top: 100px !important;
      }

      Delete
  24. Is there a way to move the header image only, and not the title of the blog?

    ReplyDelete
    Replies
    1. See if this is what you're looking for:

      #Image1 {
      padding-left: 170px;
      padding-top: 0px;
      }

      Delete
  25. Hello I would prefer it to appear on mobile view
    Is it possible?

    ReplyDelete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.