Changing colors in your Blog

This article is about changing the colors used in your Blogger blog.

Changing colours in your blog

The Template Designer is Blogger's core design tool, for blogs with Layout, Designer or Dynamic templates. (Ref What type of template does my blog have).

The place where you choose the colours in your blog is the Design > Template Designer > Advanced tab.

This is far more flexible than the options in the previous colour-chooser tools that Blogger offered.

You can now choose any colour, not just ones from the default set for your template, by typing in the hex (hexadecimal) code for the colour that you want.

However the screen where you make colour choices is a little busy and complicated:

The item selector, where you choose what item you want to set the colour for is on the left side, just to the right of the Advanced tab selector.

How to change a colour in the template designer:

Go to the Advanced tab
Select the item that you want to change
Click on any colour from the list(s) provided, or from the colour picker, or enter the hex-value for the colour.

The bottom section of the screen shows you what item is selected (with a red dotted line - on Designer templates only) and how your blog will look with this new selection.

IMPORTANT:
When you have made all the colour changes, click Apply to Blog in the top right hand corner of the screen.

Changing colours by editing your template

It is also possible to change colours by editing your template in the usual way.

You can either find the colours in the Variables section (usually near the top of the template), and enter different hex values in there, for example:

<Variable name="mainBgColor" description="Page Background Color"
type="color" default="#f5f5f5" value="#ffffcc">

Or you can find the item that you want inside the CSS section of the template, and set a value there. For example, in this rule for my date-header, I have commented out the existing variable, and added a new hex-code.

h2.date-header {
font-size: 130%;
text-align:center;
margin-top:20px;
margin-bottom:14px;
color: #df3333;
/* color: $dateHeaderColor */
font-weight: normal;
font-family: Trebuchet MS, Verdana, Sans-serif;
}

Or you may just want to make a rule that specified colour only, and add it using the Add CSS rule option.

Choosing and specifying colours:

Finding specific shades

I rather like the color tool provided by W3C Schools, at http://www.w3schools.com/tags/ref_colorpicker.asp

This lets you choose a base colour, then it gives you the hex-codes for 19 different options based on the at colour, between black and white.

Colour Wheels:

It may be easy to apply a colour change in Blogger - but that doesn't mean that it's easy to choose specific colours that go well together. If you need help with this try googling "how to use a color wheel", to find suggestions about a particular colour selection tool that graphic designers use.

Converting RGB to Hex

RGB (red-green-blue) and Hex (hexadecimal) are two ways of mathematically describing colours. If you need to convert from one to the other, google "convert RBG hex", and choose one of the tools that is suggested.

Personally, I've used http://easycalculation.com/color-coder.php a few times, but I'm not a colour/graphics expert, and can't say whether it's any better or worse than others.

What type of template does my blog have.

Adding a new CSS rue to your blog's template

How to edit your blog's template

Pages

Saturday, March 20, 2010