Knowledge is good only if it is shared. As a new blogger, I had learned to change the Web template, and found out the tips, tricks, hacks, and tweaks of altering the Blogger template, customizing CSS, widgets, layout, blog design, inserting JavaScripts, HTML codes, Google AdSense, and other settings the hard way, through many trials and errors. For the purposes of this guide, I had started with the old Blogger “Minima” template. As I made the changes or learned something new, I had documented them. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change. Hope this guide will help those who are finding the way around, just like me.

Search Tips for New Bloggers

We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

Aug 5, 2007

Digg This Story

Header Image and Title Alignment (I)

We created this Blog using the new beta Blogger template. At that time, there was no easy way to insert images into the Blogger Header. We had therefore written an article on inserting a Banner or Picture Link in the Blogger Header. Recently, Blogger introduced a new feature in their templates, allowing owners to upload pictures into their Blog Headers. This background image to the Blogger Header can either be behind the title and description, or be a substitute for the title and description. There have been a number of queries raised concerning the Header image alignment. In a number of cases, the pictures are either not centered, or cannot be moved to the left or right of the Header. For those who have been facing problems, we hope this article can help you have more control over the image position. We shall explain how we manage to move the Header images in the different types of Blogger templates.

We think the main problem is that while Blogger has inserted standard commands into their templates involving a new id='header-inner', this new id selector has not been defined in the stylesheets. What we did was to insert a style for 'header-inner' in these templates to fix the position of the Header background image. For completeness, we shall also discuss how the title and description can be centered or aligned to one side of the Header.

To clarify, if you have chosen to have the image appear “Behind the title and the description”, the title and description follows the image wherever it goes. Should you want the title on the left side of the Header and the image on the right side, the easiest way is for you create a wide image using an image editor, put in the title and save it as one composite image. In this way, the title and description are exactly where you want them to be. Upload that image onto your Header, and for the Placement, choose “Instead of title and description”. Alternatively, you can also use the other method discussed in our Banner or Picture Link article.

Remember to click “Preview” after changes are made to the template. Only after you are satisfied with the settings should you click “Save Template.”

Minima Template

In the Minima Template, the Title and Description are automatically aligned to the center. If you want them to be on the left of the Header, change the alignment code (shown in red):-

#header {
text-align: left;


You can have them on the “right” too, instead of alignment to the “left” or “center”.

The Header image that is uploaded also stays in the center of the Header. If you want it to be further right for instance, scroll to these lines and change the “auto” in the left margin to a fixed width:-

#header-inner {
background-position: center;
margin-left: 100px;
margin-right: auto;
}


For the image to be on the extreme right of the Header, you can change the right margin to 0px:-

margin-left: auto;
margin-right: 0px;


Denim Template

The Denim Title and Description are on the left of the Header. To have the Header title in the center, insert the alignment code (shown in red):-

h1.title {
text-align: center;


For the Description to be in the center, add the alignment code (in red):-

#header .description {
text-align: center;


Header Image and Title Alignment (I)

As for the Header image, it is aligned to the left. To move the image to the center or right, locate /* Header */ and paste this code under it.

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}


Similarly, if you want the image to be closer to the right, insert a determined left margin instead of leaving it “auto”, like this:-

margin-left: 200px;


The image can also be on the far right of the Header if you set the right margin to 0px:-


margin-left: auto;
margin-right: 0px;


Rounders Template

The Title and Description are automatically aligned to the left. You can have the Header Title in the center by adding this code (shown in red):-

#header h1 {
text-align: center;


For the Description to be in the center, you can insert the alignment code here:-

#header .description {
text-align: center;


Should you want a particular position for the Title and Description, you can also set left margins instead, for e.g.,:-

#header h1 {
margin-left: 200px;


The uploaded image in the Header is aligned to the left. You can have the image in the center by adding this under /* Blog Header */

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}


To move the picture towards the right, change the “auto” in the left margin to a fixed value like this:-

margin-left: 200px;


You can have the image on the right by setting the right margin to 0px:-

margin-left: auto;
margin-right: 0px;


Herbert and Jellyfish Templates

Both the Title and Description are by default on the left. If you want to shift them to the center of the Header, add this code (shown in red) to shift the Title:-

h1 {
text-align: center;


and the Description:-

.description {
text-align: center;


Header Image and Title Alignment (I)

When you upload the image using the Google feature, the image appears on the left of the Header. To move the image to the center, add this code anywhere in the Head portion immediately below a } sign:-

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}


Shift the picture towards the right by changing the “auto” in the left margin to a fixed number like this:-
margin-left: 400px;


You can also have the image on the far right by setting the right margin to 0px:-

margin-left: auto;
margin-right: 0px;


Harbor Template

The Header Title and Description are somewhere on the left. If you'd like, move the Title to the center by adding this alignment code (shown in red):-

.Header h1 {
text-align: center;


Or move the Description to the center with this code:-

.Header .description {
text-align: center;


People use Harbor templates for the background design. We don't think you would want to upload any further pictures into the Header. Supposing you want to, the uploaded Header picture is towards the left. To have it in the center, you may have to adjust the left margins with this entire code inserted after /* Headings */

#header-inner {
background-position: center;
margin-left: 90px;
margin-right: auto;
}


Change the left margin width and preview the template to see if the picture is where you want it to be.

Scribe Template

The Title and Description are on the left. If you want them in the center of the Header, locate this part in the template and insert the alignment code (shown in red):-

.Header {
text-align: center;


You can change the “center” to “right” if you want the text aligned on the right.

An image uploaded into the Header appears on the left. To get it to the center of the Scribe Header, insert this other code (shown in red):-

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
.Header {
text-align: center;
}


You would notice that there is a margin surrounding the picture so that the picture is aligned to the rest of the contents. You may have a situation like this, where your intention is to have the picture occupy the entire top part of the template.

Header Image and Title Alignment (I)

It is a matter of playing with the margin settings. In this case, for instance, we want the image at the top and aligned to the left and we changed the margin settings to this:-

#header-inner {
background-position: center;
margin-left: -50px;
margin-top: -35px;
}


You can use negative numbers (e.g., -50px). Try changing the values one at a time. Preview the blog to see if the image is where you want it to be before saving the template. The Header image can look neat and aligned like this:-

Header Image and Title Alignment (I)

This article continues at Header Image and Title Alignment (II) which includes the steps to re-align the Header Title, Description and background images for the Dots, No. 897, No. 565, Thisaway, Moto, Snapshot, TicTac, Tekka, Sand Dollar and Simple II templates.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

38 comments:

Amber Shukla said...

Thank you so much for this post. It works really well. And keep up the good work. You are truly a genius!

Peter said...

I was playing around with my header title & description in regards to centering. What I did was to insert .centre. ./center. (excuse the dots)on either side of the words in the header page element. The code did not appear as words, funny that. It worked but I am not quite sure if it is the right thing to do seeing there is no HMTL options visible.

bizwhiz said...

Hi Peter

The tags <center>TEXT</center> are HTML codes to center a line of text. The alignment may not work in some browsers though. We had therefore inserted the alignment into the CSS template, instead of using HTML codes.

Peter said...

Correction.
Thanks for that. In the end I did not do it. I have been playing around with CSS and used it in my side bars links. Only thing is, when I use google translator to see how it looks. The text within the text links disappears on mouse over. Anyway thanks for your time & I enjoy reading here.

ekgheiy said...

This is interesting: My header is centered (which is what I want) in IE, but not Firefox. Is there anything I can do to correct this? Or is this just a glitch with Firefox that I can't fix? Thanks in advance for your help!!

bizwhiz said...

Hi ekgheiy

Did you add the code mentioned in the article? You don't have a header title but only a header image. To align the image, add the code and adjust the margins. We have tried it with Firefox and IE, so there shouldn't be a problem with both.

ekgheiy said...

Hi Bizwhiz,

Yes, I added the code. Maybe I added it the wrong area? It's supposed to be the "/* Blog Header" section, right?

bizwhiz said...

Hi ekgheiy

It can be anywhere in the head section. When I viewed your template, I did not see the #header-inner code. You can try putting that in and adjust the margins.

ekgheiy said...

Hi Bizwhiz,

I just double checked to make sure it didn't disappear. I put it directly above the " /* Posts " comment in the head section. Is my syntax wrong? Maybe that's what throwing it off. :-\

bizwhiz said...

Hi ekgheiy

The code we have here works for pictures that are uploaded into the Header. To upload a picture, you can edit the Header page element and upload it from the computer.

How did you put the image into the header? Which of our articles did you refer to?

You can try uploading the image and you will see it in the center of the Header.

ekgheiy said...

Hi Bizwhiz,

At first, I added the header as link to the image. I didn't refer to an article for this though.

Just now, I changed it:
>Saved image to PC
>Edit header
>Uploaded the jpeg
>Checked the placement setting "Instead of Title & Description".

The image is still left aligned in Firefox, but it's now a dead image in IE with a little white box w/ a red "X" in the middle.

bizwhiz said...

Hi ekgheiy

We did use a Rounders 4 template to upload your pic and center-aligned it in the Header. The IE screenshot is here:-
http://www.image4you.org/images/26408487.jpg

We are able to view your site but only with scripts disabled. Perhaps some third party scripts you installed are causing the problem. Since the picture upload is a Blogger feature, if you are unable to use it, you can also raise it with the Blogger team.

Tipzter said...

Hi thanks for the tutorial. I am having 2 problems though.
I have fiddled and fiddled and I can not get the center image to cover the third column area.
I am also not able to get the third column to show up in the editor. I followed the instructions 3 times and still have these two issues. I was not able to find the info in the last instructions... it is not written like that at all in my html. It says it can be changed if I did not like it like that... so I just left it out.
Also the section that edits the editor says to place all that text after what is written. That is what I did. Is it supposed to be after a certain part in that or replace all that. I just can't figure out where it went wrong.
Thanks for any help you can give!

bizwhiz said...

Hi Tipzter

I see that your image now covers the header and you have resolved the problem. If you do not see some of the codes in your template, it could be because you are using an older template.

One way to resolve this would be to convert it to the new blogger template, and follow our guides to add a third column and change the alignment. Of course, before doing any of these, it is good to backup your existing template in case the new one is not to your liking.

CHRIS said...

hey thanks for this lovely tutorial now i want to position my image to the top, what i mean is my logo leaves a gap at the top of the page i want to fill this up by moving the image up, so maybe there is a tag called "margin-top"? please help

bizwhiz said...

Hi CHRIS

You don't have a public blog in your profile. I assume you are using one of these templates here.

You can add a negative margin to shift the image upwards, e.g.,

#header-inner {
background-position: center;
margin-top: -30px;
}

MrsYFA said...

I am having the same issue as ekgheiy was. The header looks centered in IE but not in Firefox, or vice versa if I try to fix it. I have inserted the inner header script as you suggest but Firefox is still showing my header to the extreme left, can you please offer any suggestions? Thank you.

bizwhiz said...

Hi MrsYFA

I thought I explained in your other queries that you have incorporated external stylesheets where the classes are named differently. If you want to change the way your template looks, you may pose your requests to the people who created those stylesheets. Our guides are premised on the standard Blogger templates.

Mommy Ruby said...

hello bizwhiz! can you help me with my problem?? i don't know how to put the header and the description in the middle of my background image. please visit my site to check it out. can u please give me an advice?? thanks.

http://pinay-mommy.blogspot.com

Muhammad Aiman bin Azlan said...

thanks for all these helpful tips...i got a question though.

can i change my title font into other font of my own?

Matt Plavnick said...

Hi Bizwhiz,

Thanks for all the great advice. Can I get a little more?

I'm making myself crazy trying to open the borders around my header image. I want the header margins to flow right into the outer colors of the blog, rather than the same as the text body of the blog. Does that make sense?

I'm at http://plavwriter.blogspot.com, and I'd be greatly indebted if you could take a look.

Cheers,
Matt

. said...

Please help me put a picture where my header used to be!!! My site is: www.xcor.blogspot.com

I'd like to put the logo of my group!

It's here:

http://img254.imageshack.us/img254/1554/logofinaldz5.jpg

Thank You!!!

Alex

Kocorococo said...

hello bizwhiz.
Ijust wanted to thank you for this GREAT blog! I'm a real blog dummy, but thanks to these tips and tricks that you shared in here I was able to manage someway to work out an acceptable design for my new blog. I'm really, really thankful to you!

:)

p.s.-just one doubt, do you know if is there any way of making some margins in the block text of the posts, but without changing the px of the image background? mmm, I'm not sure if you understand what I'm asking, if you take a peak at my blog you'll see what my problem is though :P

wendyywy said...

Hi,

My blog seems to be quite narrow, when I compare my header with yours, it's about 3 inches narrower. It seems to be a waste of space by the side of my blog, left and right when there's so much empty space.

How can I broaden my blog space area.??
My blog is http://wendyinkk.blogspot.com

Elizabeth said...

I tried templates from other sites, but your's was the easiest to follow and I easily got my 3 columns, which was all I wanted! I also saw within the code where I can easily change my colors, which I may do at some time in the future.
I am still having problems centering the image in my header, but I think I am going to make a larger banner anyway. I tried follwing what bizwhiz and peter were writing in the comments, but I got all confused.
It's late, I'll try again tomorrow.
Thanks again for having such easy to follow information available to everyone!!

Elizabeth said...

OOPS!
My url is
http://www.ebogie.blogspot.com

Many of my elements and widgets are gone because of trying to use templates from other providers. But the basics are still here, and the left-aligned image.

pj said...

Hi,
Thanks so much for your help in customizing my little blog.I have changed the colour added a header & even made it into 3 columns.All of which I probably shouldn't have done as even though I have been very successful in doing this I don't really understand how I have. Anyhow I wanted to center my picture in my header but can't make it work.Would it be easier for me to just make another header? Any suggestions on the size I should do?
Many Thanks
Chris

Lori Malick said...

Is there any way to change the height of your header image so it can be more than 150 pixels?

wotyougot said...

hey
im new in setting up a blogspot.

can anyone help me how to get rid of the round corners on the borders of each section (header, main body, side bar...) ??
check the site http://www.woty0ugot.blogspot.com/

thanks!

skinflint69@hotmail.com

Sober Alan said...

Hi from South Africa,
My blog is at http://alcoholism-alifesentence.blogspot.com. How do I move the borders om my Header Image so that there is no red colour gap anymore? I want the borders to be right up against the Image. Also how do I move the Image and Title etc a little up?
Thanks
Alan Butterworth
alanbutterworth@telkomsa.net

Hasan said...

Thanks dude, that really works great. keep up the good work.

Badleeshah said...

I played around with my header backgroud image so that the image would cover the entire header background but i could not manage it..can anybody give a hand on doing this so that my blog can look neater. I use Denim template.

Ashton said...

THANK YOU SOOO MUCH!!
this was EXACTLY what I needed!

I just set up my blog and now it is looking great because of you.

www.anewsmentpark.com

MiMi said...

I am having the same issue that ekgheiy and mrsyfa were having. The header looks centered in IE but not in Firefox. I have inserted the inner header script as you suggest but Firefox is still showing my header to the extreme left, can you please offer any suggestions? Thank you.

Eds said...

Hi!

just new to blogging and found you site bery heplful. thank your very much... i just have one question and this is about the image in my header (im using the Rounders Template) i tried to center it but it wont work... any advice? thanks... Eds

Delighted Scribbler said...

Thanks. The background image instead of the title in the header was a perfect solution. Nice and easy.

Beautiful Secrets Wigs said...

I have the minima template, so in theory my image should be centered automatically, but it is not.

I've checked and the code appears to be correct, but my image still is aligned on the left.

Do you know how I can fix this?

Six Strings & Sunshine said...

Can someone help me figure out why my header image is aligned on the left? Frustrated!