Change background color of New Blogger sidebar

A blogger commented that he could not find the sidebar color code in the template to change the background color of the sidebar. The CSS (Cascading Style Sheet) of every template is written different and if something is missing, all you need to do is to add the relevant missing part in.

For example, in the standard Blogger Scribe template, this is the section in the CSS (Cascading Style Sheet) for the sidebar:

#sidebar {
width:150px;
float:left;
padding:8px 0;
margin:0;
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 */
}

There is nothing mentioned about background. So what I did was to add a single line

background: #FFFFFF;

(#FFFFFF is the hexadecimal color code for white) to that section, so that it became:

#sidebar {
width:150px;
float:left;
padding:8px 0;
margin:0;
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 */
background: #FFFFFF;
}

You can see the result at Standard Blogger Scribe Template.

BTW, instead of using hexadecimal color codes like #FFFFFF, you can also use most names of colors like red, blue, white, etc. If you want to blend the color to the colors of the site, try typing the search term "colorpic" or "iconico colorpic" into the search box above, tick ( ) Web radio button and search, and I am sure you would see the link as the first result in the SERP (search engine result page) to download a very useful tool I use to get the color code of colors on any website. (I don't want to put too many outbound links as I understand outbound links can lower your PageRank).

I also find
Color Blender very useful if I want some "in-between" color or colors. If anyone is interested on how to use that site properly, just make a comment and I will do a new post on how to use it.

Related post:
How to change sidebar title background color
How to add background image to sidebar

How to make a picture as a background

The first thing you have to do is to choose an image where the color of the image and the text of the blog are compatible and the color doesn't clash. Otherwise the text will be very difficult to read. Another thing is the size of the image. If the image size does not fit the whole background, it will normally repeat itself unless you choose not to do so (see last part of post). If it repeat itself, to make the background pleasant, you will have to ensure the repeated images merge properly. For my demo blog Self Improvements, I chose a cloudy sky with white and light blue as they merge into each other well while the black text on the light background will still be clearly readable.

When you have selected your image and have stored it in your computer, then to make the picture as a background, you first have to post the picture on the web somewhere or host the picture with a photo host like Photobucket. Refer to "Getting Blogger to host your pictures for the profile, etc." if you want Blogger to host the image. Get the url (example http://photo-url.jpg) of the picture, then sign into Dashboard, select the blog, click TEMPLATE tab, and look for this block of CSS code in the template. It will be somewhere in the beginning of the template:

body {
background:#fff;
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}

Then add this line of code
background-image:url("URL of photo");
to the above, as shown below (added code in red)

body {
background:#fff;
background-image:url("URL of photo");
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}

replacing URL of photo with the real url of the picture, for example
http://photos1.blogger.com/blogger/5611/753/1600/sky-19.0.jpg

If you don't want the image to repeat in the background, all you have to do is to add another line to the code: background-repeat:no-repeat;

So your CSS code become:

body {
background:#fff;
background-image:url("http://photos1.blogger.com/blogger/5611/753/1600/sky-19.0.jpg");
background-repeat:no-repeat;
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}

NEWER POST

OLDER POST