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 (II)

We continue from where we left off at Header Image and Title Alignment (I). This guide is for those who have uploaded images into their Headers, and want to move the pictures to the center, left or right side of the Headers. In this tutorial, you will also learn how to adjust the margins for the Title and Description in the Headers. The first part of our article covered the Minima, Denim, Rounders, Herbert, Jellyfish, Harbor and Scribe templates. We shall in this part discuss the remaining Blogger templates and the changes that can be made to re-align the Header Title, Description and background images.

Dots Template

The layout is designed with the Title and Description on the left sidebar. The space is small and any movement of the title, description or image will not be significant. We shall therefore not elaborate on this template.

No. 897 and No. 565 Templates

These are also very unique templates which people use for the designs and layout. You should not be uploading any Header image as this will change the Header section entirely. At the most, you may move the Title and Description to the center with these codes (shown in red):-

#header h1 {
text-align: center;

#header .description {
text-align: center;


You can change the alignment to a specific left margin to position the text at the preferred place with this:-

#header h1 {
margin-left: 50px;


Thisaway Template

In the Thisaway templates, you will see the Title and Description on the left of the blog. You can move the Title to the center with this:-

#header h1 {
text-align: center;


You can specify a left-margin instead, to place the Title at the exact spot:-

#header h1 {
margin-left: 220px;


The number can be negative, e.g., -30px. Likewise, you can set a left-margin to the Description by changing the margin to the alignment code (shown in red):-

#header .description {
margin-left: 220px;


Header Image and Title Alignment (II)

An uploaded picture in the Header is aligned to the left. Move it to the center by inserting this code after /* headings*/

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


If you want the image further to the right, fix a left-margin instead of “auto”:-

margin-left: 200px;


You can also have the image all the way to the right side of the Header by setting the right margin to 0px:-


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


Son of Moto, Mr. Moto and Ms. Moto Templates

This set of templates have the Title and Description on the left. If you want them in the center of the Header, change the alignment code (shown in red):-

#header h1 {
text-align: center;

#header .description {
text-align: center;


Similarly, if you want them on the right, change the “center” to “right”.

Header Image and Title Alignment (II)

When we uploaded the image, it was to the left of the Header. We went to /* Header */, and inserted this code:-

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


The image will be positioned in the center of the Header. If you want the image to be more on the right, add a fixed value to the left margin instead of “auto”, for example:-

margin-left: 150px;


The picture can also be on the extreme right hand-side of the Header if the right margin is changed to 0px like this:-

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


Snapshot Template

This is again another template which people use for the background design. Uploading a Header image will change the Header entirely and it is inadvisable to do so. If at all, you can move the Title by centering it:-

#header h1 {
text-align: center;


or indicating a left-margin:-

#header h1 {
margin-left: 250px;


TicTac Template

Both the Title and Description are aligned towards the left of the Header. To move them to the center, scroll to this portion of the template and insert a text-alignment code (shown in red):-

#header {
text-align: center;


Or specify a new left margin to put the Title and Description at a definite position:-

#header {
margin-left: 200px;


The TicTac Header background image has a fixed width of 847px x 240px. If you insert another Header picture bigger than say, 220px, you may see an ugly gap between the background image and the rest of the contents. Add a small picture if you'd like, one that can blend with the background. You can adjust the position of the additional image by scrolling to /*( header and site name )*/ and inserting this code under it:-

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


Adjust the left margin settings to position the uploaded Header image.

Tekka Template

Tekka is simple in design. There are two columns: the main blog posts on the left and the sidebar on the right. The Header is at the top of the left column. The Title is aligned to the left. If you want the Title in the center, insert this alignment code (shown in red):-

h1 {
text-align:center;


The Description is already in the center because of this definition in the stylesheet:-

.description {
text-align: center;


For both the Title and Description, you can set a definite left margin instead of having them in the center. You can therefore have a fixed position for the Title, by changing the alignment to this:-

h1 {
margin-left: 120px;


Header Image and Title Alignment (II)

An image uploaded into the Header will be at the top left corner of the page. Should you want the image centered above the Blog Posts, insert after a } sign this code:-

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


This positions the Header image in the center. You can control the exact alignment by changing the “auto” into a specific left margin, for example:-

margin-left: 120px;


If you want the picture to be on the right side of the Header, set the right-margin to 0px:-

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


Sand Dollar Template

In the Sand Dollar template, the Title and Description are aligned to the left. To move the Title to the center of the Header, go to this part of the template and add the alignment code (shown in red):-

h1 {
text-align:center;


Scroll further down and you can also move the Description to the center with this code:-

.description {
text-align:center;


Header Image and Title Alignment (II)

Instead of centering them, you may also have a preset left-margin. For example, the Title can be fixed at a certain position with this code:-

h1 {
margin-left: 300px;


An uploaded image in the Header is at the extreme left of the Header. To move the image to the center, add this code anywhere in the template after a } sign:-

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


Similarly, you can specify a left margin by replacing the “auto” with a value, for example:-

margin-left: 300px;


If you want the picture to be on the right side of the Header, set the right-margin to 0px:-

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


Simple II

This is as the name suggests, a simple one column template, with no sidebars. The Title, Description and any image uploaded into the Header are automatically aligned to the left of the page. If you want the them to be in the center of the page, add this extra code (shown in red):-

#main .Header {
text-align:center;
}


If you want more control over the exact position of the uploaded Header image, insert this code after a } sign:-

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


Change the left-margin value and preview the Blog. For the picture to be on the far right of the page, the values will be these:-

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


© 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

33 comments:

Zhang Xueyou said...

I need help, as that my blogspots template has turned out really strange! The text size i am unable to correct in my right side link lists, and also the in one title of one blog and in the comment, subscribe to atom part!

Please can you leave me a comment on how to fix this?

bizwhiz said...

Hi Zhang Xueyou

There is no separate style defined for the right sidebar. Both your sidebars presently use the same style. If you want a larger font size for your links, you can insert this:-

.sidebar ul {
font-size:120%;

To change the size of the "Subscribe to", insert this:-

.feed-links {
font-size:120%;

Try inserting the attribute at certain parts of the template and preview to see the change in the font.

Teresa said...

Your site thus far has been so helpful...Thank you!

I was able to easily add additional elements following your guide....so cool. :)

What I can't figure out, and don't know if it's possible is how can I remove the header title completely? I don't want the text on there as I've made my own image but I would like the name of my blog to show up in my profile. Right now I have just inserted blanks to keep the text off my header image because blogger won't let me save my profile without something in the title box..

Can this be accomplished? Any suggestions would be appreciated!

Have a great day!
Teresa

bizwhiz said...

Hi Teresa

Did you upload the header image using the Google feature? If you did, you can edit the header element and choose the option that says to use the image "Instead of title and description." Your title and description will be in your profile but not displayed in the header of your blog.

Teresa said...

A thousand thank you's for not only your help, but your quick reply. I feel like such a blond that I couldn't figure that out myself..oh yeah! I am a blond! LOL

I had my header image hosted on my PB account...uploaded it instead and all is well.

Thanks again! :)
Teresa

Monica said...

Hi bizwhiz,
You have a wonderful site and you are really helpful. I am one of your daily readers as I am totally a new blogger.

Just 1 question for now about the header image. I am using the Thisaway Template.After download the image,it was so big and doesn't looked nice. So I have to remove it!!

Please advise me how to do this.
Thank you so much and have a nice day!

bizwhiz said...

Hi Monica

Do you have an image editing software? Get a free one like Picasa or Irfanview. Crop and edit the picture to the size you want and upload this edited picture instead.

Get Degree Online said...

Hi Bizwhiz
Can You take a look to my blog and tell me why not the header staying center in every browser except internet Explorer. My blog address: http://get-degree-online.blogspot.com
. And I am using a liquid template named Downright v1.4 . Can you please tell how can I fixed it in center in every browser?

Beside that have any idea about fluid image? How can I make my blog's header image fluid so that it will fit for any screen resolution automatically?

bizwhiz said...

Hi Get Degree Online

To center your header, try this:-

h1.title {
text-align:center;
}

There are many different templates available on the net and each has its unique style. If you want to know more about how you can tweak those templates, you may want to ask the persons who provided you the template or wrote the code. Most are quite pro at this, so they are in a good position to advise you.

Atiliboy said...

Hi,

I have read many sites about alignment in Blogger's Header, but I couldnt find any information about VERTICAL ALIGN. I would like to put the description to the bottom of the header. Any idea?

Keep blogging!

bizwhiz said...

Hi Atiliboy

You can try adding a margin-top:20px; or whatever value.

Jen said...

Hi,
Great site with excellent tech tips and articles!

I have a question: How can I put a small image in the title post, on the left side, in a rounder2 template?
The image should appear in every title post on the left side.
Thanks in advance.

bizwhiz said...

We have an article in our Blogger FAQ blog on Image beside Blog Post Title.

Jen said...

Hi Bizwhiz,

Thank you for the information, it worked ok!

nathanburrblair said...

I am using the sandollar 3 column that I got from you, and now when I try to align my header image to the center, I get nothing. Does the 3 column make a difference? I copied and pasted your code exaclty but still nothing.

Brianizballinniggaz said...

i have a question is it possible for a picture to cover your whole banner thats what i want i want my picture to take up all the space in the banner

JC said...

hey bizwhiz, your blog has really been helpful! Though I don't know if you still check back haha it's been some time but I got a question maybe you could help?

I'm trying to insert a header into my blog which will code for a variable i want to put in, however i can't even get the header up! Can you help please? thanks =)

Em said...

Hi

I was just wondering, in the 897 template is there any way to change the orange star and grey 897 boxes to the left of the title to an image of my choice instead?

Thanks
Emily

njm said...

Great Advice!!!

I added a 3rd column AND centered an uploaded header using the advice on this site.

Thank you very much! Your blogger tips are fantastic! I have been trying to do this for a year without success. I will post a link to your site on my new 3 column blog. http://tabihatsboutique.blogspot.com

adreyan said...

Hey man! Thanks a lot! You're very helpful. God bless.

Downtown Chick said...

Have used the following for Sand Dollar but image's still on the left. Any idea bizwhiz? Blog is at http://www.downtownchick.com.

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

frau sally benz said...

Ugh! I love this site and have used it quite a bit since starting out. Usually things work really well after a couple of tweaks & tries, but this just isn't so hopefully you still check this!

I am using sand dollar, 3 columns. When I choose image only for the header, the image is clickable, but not centered. When I choose image & title, I had to make the title small and in a corner so that it won't be seen (I can't have the text cover the image/logo, and there's no such thing as a transparent color). This made the image centered but, of course, not clickable.

What do I do?!

camaybraham said...

i have the simple II template and trying to align my image and title to the center but only my text title was aligned not my image.

and also when i tried to put the text-align:center;
to img{ border-width; it took away my already aligned text title.

please help?

camaybraham said...

i tried to align my image header and it wont center align. at first it worked then i did the same coding in the
img{
border-width
}
and now it wont center align-even when i erased the coding on the img section.
please help!!!

also i cannot find the header inner section to control the exact position
!

Divya said...

Have been looking for the 3 column template for so long now... Great instructions! So much better than the other ones I found on the internet. For someone like me who is not familiar with html, you made it a great deal easy! Cheers!

One question... how can I widen the content area of the page? (Which would ultimately mean reducing the background area of the "Scribe template")
Thanks!

Nicole said...

Hi! Your website is so helpful! I was able to create a three column ThisAway Rose and LOVE it. Now I'm trying to center my header and I'm having problems. I tried using the code that you have on the site for centering the header with ThisAway, but it doesn't seem to be working. Could you help me out?

Thank you! My blog is at Josephsfamily.blogspot.com

bigguysmama said...

I am so thankful for your blog! Yippy I added a picture! html is waaay out of my league so I thank you immensely for doing the brain work for me! I've been trying to figure out how to lower the title and description of my blog because it is at the top of my header. I tried using the suggestion you gave to Atiliboy a year ago, but nothing changes.

I have son of moto as a template and in the #header .description { I go to the margin html part and add what you suggested to Atiliboy: margin-top:20px
but nothing changes. The words don't even move. I tried changing the number value and they still sat at the top of the header. You can see my blog at

wovenbywords.blogspot.com

I have to bookmark your page because I'd love for my blog to be so much more! Thanks again.

Blessings,
Mimi

Lauder Robinson said...

Hey!
Thanks for your blog... it's a wealth of information and help!
Despite reading your articles on post title alignment, I STILL can't seem to get my post title to align centrally above the text body of the post. The header is fine, the side bar, images and main text are all positioned correctly... it's just the darn post title (below the header) that is skewed over to the left slightly.
The blog I've created is for a presentation so I'd really appreciate your help asap if you get this in time!

Thanks again!

Cheers!

Lauder
lauderr@mac.com

Colleen said...

Hi -- I am having trouble centering a header image on the Simple II template -- I have done everything exactly as you have listed here and it's just not working. Any help would be appreciated thanks

gsc.chm @ gmail(dot)com

GW Staff said...

Thanks so much for the blog, it has been extremely helpful time-saving.
***
My blog is private, but here is the header code (rounders 2)

#header-wrapper {
background:$titleBgColor url("http://www.blogpulp.com/imagehost/images/44575234.gif") no-repeat $startSide top;
margin-top:22px;
margin-$endSide:0;
margin-bottom:0;
margin-$startSide:0;
padding-top:8px;
padding-$endSide:0;
padding-bottom:0;
padding-$startSide:0;
color:$titleTextColor;
}
#header {
background:url("http://www.blogpulp.com/imagehost/images/346852006.gif") no-repeat $startSide bottom;
padding:0 15px 8px;
}
#header h1 {
margin:0;
padding:10px 30px 5px;
line-height:1.2em;
font: $pageTitleFont;
}
#header .description {
margin:0;
padding:5px 30px 10px;
line-height:1.5em;
font: $descriptionFont;
}

And I have no idea how to align my header image on this. Do you know what size it needs to be? It always gets shrunken or distorted (and I checked the "instead of title and description" box.

If you need the URL, I can make it non-private for a bit.

***
And while I am at it, I hope you don't mind two more questions.

1) Do you know how to make an image link change to another image (with the same link) on mouseover?

Or (preferably)
2) I have four image links lined up in a page element above my blog posts. One links to the home page, and three to individual posts. Is there any way to make those images change when you are viewing the page with the URL they link to? (So that they look "selected" after clicking their link.)

Thanks if you can help with any of my questions, especially one and three.

Kari said...

Hi bizwhiz,

I am using the Rounders 3 template and I can not figure out how to center my title in the header image. It just stays to the left.

Thank You,
Kari

MzGunn said...

I have the "thisaway" template and I am trying to center my header background image. I insert the code as is displayed, however it is not working for me. Any suggestions?

Li Uruwashii said...

Wooow... My pic header goes to center ^__^