create your own

Change blogger background color: How to change background color of a blogger template?

72
rate or flag this page

By blog


All the default blogspot templates are not very nice to look. Most people do not like to use the default template. They spent many hours to change them. Moreover, there are many websites which provide several tutorials. But who knows, which tutorials are the best to change the color? I don't know. I have several blogs and many people ask there how to change those. I only reply them through mail. Because, my blogs contents are not related to blog tutorial or blog customization related. Today, I decided that I will write all the tutorials which will be helpful to all both for the beginners or the experts. In this page, I want to describe the process to change the background color of your blogspot template. You do not need deep knowledge of template. You just read this page and I am sure that you are able to change the background color of your blogspot template easily.

Note: This tutorial is made based on Minima template. The process of changing color of background is similar for any of the blog template. Just for simplifying the tutorial, I use Minima template as standard template because if you understand this templates' modification process then you must be able to modify your own blogs template background color. So, if you use other templates, do not worry. The process of changing the background color is the same.

To change the code, you must have to access template code part. After accessing the template code part, you will find all the things which are needed to change. To learn, how to access template code, you may visit: Blogspot template code: How to find and edit blogspot template code?

Actual code for your background color

If you look the actual code of your template then you see there is a line background: $bgColor;. This line is actually represented for the background color. See there is a field $bgColor which is responsible for defining color. You may choose any color value here. So, the actual code segment for background color looks like the following.

body{
	background: $bgColor;
	margin: 0;
	padding: 0px;
	font: x-small Verdana, Arial;
	text-align: center;
	color: $textColor;
	font-size: small;
	font-size: small;
}

Look, the second line of the above code. It's the actual line which define the color of your template color.


The color value of the above color is #FFCCFF
The color value of the above color is #FFCCFF

Change the color of your blog template

Now, we want to change color of our Minima template. Let we want to change the background color to the right hand side rectangle color. To change any color, we have to replace $bgColor field to any color value. For color value of the right-hand side rectangle is #FFCCFF. Now change the code with that value. After changing the color value the code will look like the following:

body{
	background: #FFCCFF;
	margin: 0;
	padding: 0px;
	font: x-small Verdana, Arial;
	text-align: center;
	color: $textColor;
	font-size:small;
	font-size: small;
}

Look the above code's second line. We just change the second line of the code. After changing that line, your template background color will be changed.

Note:

You may choose any color. To see the color value of several color, you may visit the following link:

Click here to see the hex color value of different color

Live View

After changing the template code with the above mentioned code segment, the blog's outlook must be changed. To see the above codes result, you may follow the following like:

Click here for the live view of changed background color.

One thing you will notice that after changing the color value, your whole blog i.e. the background, posts area and sidebars turn to the same color. Do you know the reason? The reason is that the default Minima template has only one definition for background property. So, if you change only it, the whole things (background, comments, posts area, sidebars etc.) turns to the same color. You can also change different colors for others also. In the next post, I will explain how to change the posts area with another color than background.

Print   —   Rate it:  up  down  flag this hub

Comments

RSS for comments on this Hub

Mohd Salman Baig  says:
6 months ago

Awesome post but I need info on how to change the background color of posts.

I want only the posts background to be changed not the gadgets that I add below posts

Plz help

Salman

www.tips4blogging.co.cc

tamil  says:
5 months ago

nice.. it helped me a lot

Mac Mission profile image

Mac Mission  says:
5 months ago

background can be changed body{

background: #FFCCFF;

Just you want to change #ffccff to some other color code..

Submit a Comment

Members and Guests

Sign in or sign up and post using a hubpages account.


optional


  • No HTML is allowed in comments, but URLs will be hyperlinked
  • Comments are not for promoting your hubs or other sites


blog's Recent Pages

rancidTaste's Recent Pages

working