Tips to Customize Blogger Template. ~ The Blog Doctor.
Loading...

Tips to Customize Blogger Template.

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

Many bloggers are confused how to start customizing the template. Everyone wants their blog to look different from the rest but do not know the different sections of a web page and how they relate to the code. I have already posted on some practical aspects of hacking the template. Here are some tips on how to delineate the various parts of the template.........

I have already described the various parts of the template. The blog page is similarly divided into various divisions called :


1. Body - This is the whole of the page within your browser frame. In the diagram below it is the area within the thick red border. It contains everything on the page including the Blogger Navbar at the top.

2. Outer Wrapper - This is the container which contains all the sections within your blog. In the diagram it is the area within the pink border. This may be represented by another name in your template.



3. Header Wrapper - This is the top section and contains the Header. Inside it is the Title and Description of the blog. The orange and yellow borders in the above diagram delineate this region.

4. The Main Column - This contains the posts column and is usually the widest. It may have one or two sidebars alongside it. It is shown by the blue border. Inside it is the posts section. Notice that the date and the feeds ( Subscribe to Posts Atom) are not inside the posts.

5. The Sidebar/s - They are at the side of the posts column. Notice that the sidebar does not extend right to the foot. It extent is determined by the content within it.

6. The Footer - This corresponds to the header but lies at the foot of the page.




Normally all these sections appear contiguous unless they are in different colors or have borders. When you want to add a third column to customize the template you can easily get confused as to whether it has been added or not? The remedy is to add borders to all the sections so that they can be better visualized. You can remove the code for the borders after finishing the customization.



To add borders you will have to alter the CSS part of the template. So login to Dashboard and click on Layout. Then click on Edit Html subtab of Template tab. First backup Template by clicking on Download Full Template link. Then scroll down in Template box till you locate these codes :

For the body :

body {
background:$bgcolor;
border:#ff0000 15px solid;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}


For the Header :

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:5px solid #ffd400;
}
#header {
margin: 5px;
border: 5px solid #ffff00;
text-align: center;
color:$pagetitlecolor;
}

For the Outer, Main and Sidebar Wrappers :

#outer-wrapper {
border:#ffaad4 10px solid;
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
border:#0000ff 4px solid;
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
border:#00ff00 2px solid;
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


For the Footer :

#footer {
width:660px;
height:50px;
border:#7faaff 2px solid;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}


Then add the code line for the border as shown in red above. Preview and save Template. This is a very useful trick when you want to change the width of your blog as it shows you exactly where the blog is on the page.


Whenever you add a new sidebar section add a border line to it just like above. This will help you to "see it" on the web page. Always remember to refresh the cache after saving the template or you may end up looking at an old cached copy of the page.




CHANGE BACKGROUND COLOR OF YOUR COLUMNS


You can change the background color of any of the above sections of your blog. To do this add the following line within the code section for the element you wish to change the color of :

background:#000000;

The hexadecimal number '000000' stands for black color. For white color use 'ffffff'. For any other color use the free Color Picker utility from iconico.com
You can also add a picture/image in the background of any section.



NOTE : The above sections in your template may be called by different names. The code may also be a bit different.


55 comments:

Fabrice et Irene said...

Hi There !

Just to let you know I've added this blog to my favourites in Technorati.

I'm a new blogger and over the last few months, I've visited your blog thousands of times and learned so much...

A big thankyou from hardworkinghippy!

www.lafermedesourrou.blogspot.com

diogenes said...

Thanks for asking. I have added you with pleasure.

Here is my add link:

http://technorati.com/faves/quasifictional?add=http://quasifictionalviews.blogspot.com

Tay said...

Hi,
I saw your post on my blog, and you said you would favorite my blog if I favorited yours. Well, I did add yours to my favorites.
Thanks in advance for adding me! :)
~Tay at Super Blogging

vin said...

Tay, Diogenes, Fabrice et Irene,

Thanks! I have favorite you all.

Anonymous said...

My toggle for Archives has changed color in the last few days - it seems like the color of Text for main posts is duplicated for the toggle arrow. I want to change it from black (the color of my text for posts) to white (the color of my links). How to change the toggle color?

vin said...

Anonymous,
What is your blog url? For detailed help use my email address in the left column.

Anonymous said...

The URL is tasphotos.blogspot

vin said...

Anonymous,
Bloggeruses black triangle graphics for that. You will have to download them. Change their color to white and upload them to a freehost. Then add this code in CSS part of your template :

.backlink-toggle-zippy {
padding-right: 11px;
margin-right: 0.1em;
cursor: pointer;
cursor: hand;
background: url("LINK OF YOUR GRAPHIC2") no-repeat left center !important;
}

.expanded-backlink .backlink-toggle-zippy {
background-image: url("LINK OF YOUR GRAPHIC2") !important;
}

Save Template

tannerylane said...

Sorry if this is the wrong place for this comment; I'm grabbing all straws. I remember getting your help previously, but not the for what.

I did a few things trying to edit the template html. I'm quite sure I didnt save the changes. I also installed Firefox and tried editing template html in that browser. Cant remember if I saved changes.

Suddenly, could only get a thin red strip along top horizon on screen. Strip was due to a long ago hack to widen the header.

Blogger Help in email response advised me to check out Groups and Bloggerhelp.

The blog's not "lost" I think if you click on http://thislittlereddot.blogspot.com; you just get a thin strip of red.

Can you please help me to get it back?

Thank you.
tannerylane@yahoo.com
ps: I'm not signing in under Google/Blogger as I have a few id's and don't want to complicate/lose this comment as I most time get mixed up with my ids and passwords and email addies; am using my most frequently used addy.

vin said...

tannerylane,
Guess you will have to reload the template or choose another new template. Go to Template----->Pick New Template.

Anonymous said...

Re: toggle color

Thanks - I'll try it when I get back onto my own machine. You've got a great weblog, and so far I've made valuable use of your tips and tricks. Thanks again!

Anonymous said...

Finally, a diagram to show what element is what. This is magnificent -- thank you! A picture is worth a 1000 words, and in this case it's worth 1000 hours of painful trial and error for a very inexperienced blogger.

Les Minets said...

Hello,

Thank you for your blog which is so helpful.
However I still have a question: Using a "Rounders 4" template, I can change the background color of the main column and of the sidebar but I don't find how to change the background color of the blog body (between the red and pink borders in your figure). Thank you for a help.

vin said...

Les Minets,

Template------>Edit Html------>

body {
background:#bca;


Change the "bca" to any hexadecimal number of any color you prefer.

Palmetto Equipment and Supply said...

hey man..thanks for all of the great tips... I havve a question that you seem to be ale to help me out with. .. Any chance you might know why some of my posts end up with   scattered here and there throughout the text? Is it something in my encoding? Any tips you might have would be greatly appreciated...thanks again!

Dodie's Designs said...

HELP! I followed your tutorial and it was perfect in helping me change the background image; however, how can I ensure that it goes around each column and not remain under it? If you have a minute, please check out my site at: http://dodiesdesigns.blogspot.com/

I have tried to change the background to ffffff (or any other colour in case it was transparent) but it doesn't work.

Please help!!!

Thanks!
Dodie

vin said...

Dodie,

Add to the following code :

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: normal normal 100% Georgia, Serif;
}

THIS LINE :

background:#ffffff;

Preview and save.

skies colliiide said...

hey thanks for the help Vin.
everything worked out good besides I can't see the collumn I added. I tryed putting stuff in it and everything.

Any ideas?

vin said...

Skies colliiide,

Try using this technique to see your columns :

http://betabloggerfordummies.blogspot.com/2007/05/tips-to-customize-blogger-template.html

the bloods city said...

i have one side bar in my blogger on the right i want to make anew one in the left side how ido this and thanx

the_bloods_city@yahoo .com
mmaxmtbc@gmail .com

vin said...

The Bloods City,

Have a look at :

http://betabloggerfordummies.blogspot.com/2007/02/add-third-column-to-blog.html

Karla said...

Thank you, thank you soooo much!....I tried ALL day to change the BG color and it took me just a few moments of reading and trying your directions to get it right!...My husband came in the room to see what I was screaming about!...LOL!....Thanks again! =)
Karla (karlasdesigns.blogspot)

NCHS Athletic Booster Club said...

How do I add spaces to the "list" element? My links are running together and I need each item on a separate line. I just don't know the code for adding a line break or whatever it might be.
Thanks,
~~g

vin said...

NCHS Athletic Booster Club,

Put this code in CSS part of template :


#LinkList1 li {
line-height: 4.5em !important;
}

Check that the number of your LinkList element is 1 from the unexpanded widget template. Preview to change '4.5' to a lwer or higher figure. Then Save Template.

Wade Family said...

Thanks for the great blog and super tips. I am having trouble with my background. When I put it up it seems to be blowing it up is there a way for it to shrink it. I am also having trouble changing the background color for the sidebars and main. could you please take a look.. www.jessieandjared.blogspot.com

vin said...

Wade Family,

Can you shut off or remove the music on your blog because it is wasting my bandwidth. Also decrease number of posts on Main Page ( there are many pics making it slow to load) :

Speed Up Blog Loading

Both these are preventing the background image from loading also!

Momma TaderDoodle said...

1st... I love your blog!

Next... somehow my sidebar has ended up below my main column... i changed the width many times.. when i added borders so I could "see" what was going on it appears the sidebar is IN the main area... I can't seem to get it to move back up for nothing in the world. Please help! Lisa http://toobusytoclean.blogspot.com lbaldwin at taderdoodles.com thanks

vin said...

Momma TaderDoodle,

This occurs when you post something in your blog which is too wide for the column size like a big picture or URL.

Try removing them and clearing cache. Or else you will have to increase width of blog.

How to change blog width

someone said...

? for ya. How do I move my footer down so that there is a space between the bottom post and the footer? Or, how do I make the "older posts" section smaller? Thank you.

Vin said...

Someone,

What is the blog address?

someone said...

www.oliviamariecaldwell.blogspot.com Thanks for taking a look.

Vin said...

Someone,

Looks OK in Firefox2!

someone said...

Interesting. I have Firefox and there is no space. I will just leave it.

ches said...

hi, could you teach me how to delete the upper part of the header? the one which says, Next Blog. I would like to delete it. pls help.

Vin said...

Ches,

Have a look at Navbar in Blogger.

Angela said...

Hello,

I am a library assistant trying to create an outer border of pictures for my library blog http://talesfromouterlibraria.blogspot.com/

Could you give me some guidance as to how I do that?

Also, I don't have a google page account, and they aren't letting anyone new join.

Thankyou,

Angela

Vin said...

Angela,

Do you have the picture ready?
Is it a small picture you want to tile all the way to the top?

Or is it one big picture?
Do you want a frame of the same picture OR of different pictures?

You will have to use Photobucket.com to upload picture to.

Anonymous said...

Hi Vin,

It is a series of little pictures that I am trying make into a border for our blog. I will try photobucket.
Btw, you have a great site and an excellent technophobe friendly style of explaining things.

Angela

Anonymous said...

Hi Vin,

I have had no luck getting my little different pictures up, although I did manage to create a lime green border I didn't want and can now not get rid of!!! I have tried to follow your instructions for the pictures, but have had no success, in fact, at one point, I only succeeded in wiping my blog! Any words of wisdom?

Angela

Vin said...

Anonymous,

What is your blog address?

Anonymous said...

Hi Vin,

http://talesfromouterlibraria.blogspot.com/

Good Luck!

Angela

Vin said...

Anonymous,

To get rid of the border change this code :

#outer-wrapper {
border:#00ff00 2px solid;
width: 660px;
......
.....
}

Change 2px in border line to 0px and Preview and save.

Anonymous said...

Hi Vin,

Thankyou for the help with the green border, it worked like a charm. Could you give me any help with getting my border of little different pictures on my blog?

Thankyou,

Angela

Vin said...

Anonymous,

Have a look at Tips on Pictures in Blogger.

thebutler said...

Hello,

I keep trying to replace a widget on my sidebar I lost when changing templates.

I have added the code several times in several different places on my
template, which always then tells me
the code isn't right. I add, delete, etc. and still can't add the widget.

Could you kindly tell me how I should correct/add my sidebar widget?

Thank you so much for any help you can give me.

dbutler.butler577@gmail.com

Vin said...

thebutler,

I will need to know :

The type of the widget.
The code you are pasting and where?
The exact error message.

Plenty said...

Do you know how to extend a navbar container ie menu bar - ive already got a menu bar but want to extend it the full width where my google search bar is....

is there a piece of code to do this?

Can you point me in the right direction? Will link to your blog... great tips ...

www.plenty2say.com....

Vin said...

Plenty,

First you will have to remove the Blogger navbar.

Then increase width of wrap to 100% here :

#wrap{background:#EEEEEE; width:960px;
...
}

Then increase width of navbar also to 100% here :

#topnavbar{background:#252525; width:960px;
....
}

Preview and save template.

oinedes said...

It's so nice to follow your site. Thanks also for those tips.

videogoodies said...

Vin, due to yr wisdom. I have create a third column. And current i like to add a border liner on the sidebar warper with code

#sidebar-wrapper {
width: 220px;
border:1px solid $bordercolor;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

but i like to have some spacing in between the borders and the text/widget.

And lastly how to i add a widget to post some info/txt between the banner and post

videogoodies said...

Hi,

Thank you for yr wisdom tat i manage to add a third column. Current I have add a border on the sidebar but the words and border are squeeze.

Any ways which i k leave some space btw the txt/widget and the border?

Hope u k help me with this. How do i add a wigdet between the banner and post.?

Vin said...

videogoodies,

Use the padding-left or margin-left in the CSS part of the template to add space. You can also use padding-right or margin-right.

Remember to increase width of outer wrapper by same amount

mazhar said...

I've visited your blog today nice blog

Ecommerce said...

Those are good notes for a beginner. Visiting this kind of blog helps us a lot. I hope I could learn more from your posts.

Facebook Application Developer said...

hmm wow this site is really awesome and informative to me, i am also gonna share this site to my friends.

CLICK TO LEAVE A COMMENT..... :-)



Skip to top of post.

Search Blog Before Commenting

Loading...

Post a Comment

Please use the above search box to search this blog before posting your valuable comments.

Comments posted on Dummies Guide to Google Blogger (Beta) are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,

Vin.

The Blog Doctor The Blog Doctor2 Blog Doctor Home

SUGGESTED READING

Tips On Blogger and Latest News.



Skip to top of post.