Starting with beta (part 2)

They'll sell you thousands of greens. Veronese green and emerald green and cadmium green and any sort of green you like; but that particular green, never. -Pablo Picasso

Basically I already had all the wrapper figure out and decided to made my blog width the normal size today..around 700 to 800 px, have mercy on people with small computer screen guys!Here is the basic size layout

Click for bigger image

And my whole blog will look like something like this

The reason I have all this sizes is for me to design the background picture and also the set my cascading style sheet (CSS) accordingly, if you want to change the colors, banners, footer style...the only thing you have to change is the CSS part. Just like normal web. All the layout on your template is put under this part

I have the 820x200 header with the sofa picture which will display my blog title and also the description. In this design I opt not to show it through blogger instead put it together as .gif picture of the header. So if I happen to change blog description in blogger it will never be shown here. But to create a more general template. I still included it in the design, only I put the text size to a very small font.

In beta however they have this variable features, where you can change the fonts type, size and colors. Just click at layout >fonts and colors in your blogger dashboard. If you used the template given by blogger you will see things like text-color, text size etc. It is ussually put under (b:skin) part

In the HTML code part these variables are added under the Variables definition, ussually before your CSS..something like this
That this part actually do is explain to you:
1. The variable name is textcolor, (this is the part which will be inserted in your CSS which need to be unique and better a name without spaces).
2. Description is something that will be shown in the little box on top of your fonts and color layout tab. It explain to you what it is.
3. Type means what type of variable it is, commonly there are only two, color and font
4. Default means the color set in default setting,
5. Value tells you the color you are actually using: #000000 means black.

And in CSS to use this feature all you have to do is change the ussual:

body {
color: #000000;
}

to something like this:

body {
color: $textcolor;
}
see how you used the variable name as your properties with additional dollar sign ($), so now you can change your blog body font color using the font and color layout.

Before, when I didn't know what colour to put down, I put down black. Black is a force: I depend on black to simplify the construction. Now I've given up blacks. - Henri Matisse

Related items: Starting Beta (part 1)