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!

Feb 9, 2007

Digg This Story

Change Blogger Header background color

To change the background color of the Header, first determine what color you would like to have. You may look at the HTML Color Chart for the colors you can experiment with. For example, if you have decided on a color code #B38481, go to Template and click “Edit HTML”. Scroll to the part where you see this:-

#header-wrapper {


width:660px;


margin:0 auto 10px;


border:1px solid $bordercolor;




Add right after this an extra line:-

background:#B38481;




Save the template and refresh your Blog site. You may have to change the Header and description font colors. Simply go back to the “Fonts and Colors” tab, and change them accordingly.

Background Image for Blogger Header

Note that in different templates, instead of #header-wrapper, you may see #header-wrap or #header or #head. Try to insert the color code and preview the change. If there is a background color, you've probably got it right.

You may also read the related article to have a Background Image for Blogger Header.

© 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

13 comments:

Susan Bernard said...

Thanks so much. I have tried to change my blog many times and I could never understand the html. Your instructions are so easy to follow. Also, I love the colors you use and sort of patterned my blog after yours. I hope that's okay. It's bipolarwellness.blogspot.com. I can't thank you enough.

Julia Day said...

Yay! Thanks so, so much. I have been trying to work out how to do this for ages. Your site is brilliant!

Roy Cavanagh said...

What can I say . . . top man. If I had a forelock I'd be tugging it in your general direction. Gawd bless yer guv'nor. Without doubt this site has helped me retain my sanity. As a blogging newbie clueless about so many things,thank you.

Artbeneva said...

I have tried your steps over and over and over and it doesn't work, what am I doing wrong?

bizwhiz said...

Hi Artbeneva

Are you talking about inserting a background image to your Header?

Presently, under your #header-wrapper, you have a crimsonmonkey header.jpg which has errors. If you enter the URL of this image into your browser, you will see an error message. If this image was uploaded by you, you may want to check your image and upload it again onto your server.

This article is about having a background color for your Header. You can follow the guide here by inserting the color code. Since I don't see the background color code added to your template, you may want to put it in and feel free to let me know if you should face further problems.

avr said...

in fact evrything on your bloh is very helpful.

I have a difficulties changing the color of my header background. Instead of the code u mentioned I only find this:

#header-wrapper {
background: #e8b url(http://www.blogblog.com/moto_ms/headbotborder.gif) bottom left repeat-x;
margin: 0 auto;
padding: 0 0 15px 0;
border: 0;
}

if I add another line incl. my desired color code not all the header color changes. can u help? thx.

bizwhiz said...

Hi avr

The #e8b is the color code. You can replace it with another color code and preview the change.

electric goldfish said...

wow, I have been trying to change this (and the image) for hours. Your assistance has been the only one that has worked so far. THANKS SO MUCH ;_;

Profile said...

I have tried to change the color of the header to no avail. You guys are the best! Thanks!

/* Header
-----------------------------------------------
*/

#newnavbar ul li{
font-size:100%;
list-style-type: none;
display:inline;
padding:0px;
margin:10px;
border:0px solid;
}

#newnavbar li a{
color:#dfffed;
}

#newnavbar li a:visited {
color: #3BB9FF;
}

#newnavbar li a:hover {
color: #F88017;
background: #ffff66;
}

#newnavbar ul li{
font-size:100%;
list-style-type: none;
display:inline;
padding:0px;
margin:10px;
border:0px solid;
}


#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
background:#FF0000;

boqipi said...

Dear Sir,

why my blog like this
http://boqipi.blogspot.com/

page header background color is trouble.

anyway, your site cool.
this is for the first time i see blog like this.

anyway again, how to make own template. may i request walktrought make own template.

sory for my bad languange.

Thanks.

rightttt said...

Thanks alot... you assistance has allowed me my first html or xhtml (which ever) ever....
first time i got it to work... take a look at my blog and tell me what you think...
http://parkerverse.blogspot.com

EASWOOD said...

Helpful tip.. But how would i adjust the positioning of my header font so it is not completely justified left? www.artist2artist.biz

Anonymous said...

How can I change the main body backgrounf color, like you have in this blog?
Background page is blue, blog body is white
Thank you