Creating a Blogger Template (4)

... Variables ... This is the fourth part of the Creating A Blogger Template series: Creating a Blogger Template (1) - from scratch Creating a Blogger Template (2) - the layout Creating a Blogger Template (3) - a fluid design Creating a Blogger Template (4) - variables Hmmm ... this is (on my account) a rather superfluous thread. All I have to do is point to Google Help > Blogger Help > Working with Blogger > Layouts > Fonts and Colors Tags for Layouts, but this one makes the CaBT tutorials a circle! A big advantage of the Blogger Layout Feature is the use of (though limited to only fonts and colors) Variables. (The other one: the Page Element Drag-and-Drop feature - limited within each Blogger Section.) As explained in the first CaBT: Notice <style type="text/css"> <!-- some css styling here --> </style> is replaced by <b:skin><![CDATA[/* */ <!-- some css styling here --> ]]></b:skin> The variables are added, embedded between the comment tags /* */, like this: <b:skin><![CDATA[/* Variable definitions ==================== <Variable name="" description="" type="" default="" value=""> */ <!-- some css styling here --> ]]></b:skin> As you can see each Variable has a few obliged attributes: name: a (technical) unique ID; description: the (logical) descriptive name - as it will appear in the Fonts and Colors tab; type: 'color' or 'font' - no more, alas!; default: the default value *; value: the new value - can be initially left blank; *) Attribute default explained: can be a color (a hexadecimal color code) or a font (font-style font-weight font-size font-family) value!!! Two examples (one for each type): <b:skin><![CDATA[/* Variable definitions ==================== <Variable name="textcolor" description="Text Color" type="color" default="#ccc" value="#cccccc"> <Variable name="bodyfont" description="Body Font" type="font" default="normal normal 100% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif" value="normal normal 100% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif"> */ <!-- some css styling here --> ]]></b:skin> So-uhh, what's the catch? For each font or color in your CSS code you can use a pre-defined Variable! Two examples (one for each type): Instead of body {      color: #CCC;      font: italic bold x-small 'Trebuchet MS', Trebuchet, Verdana, Sans-serif;      } one can write body {      color: $textcolor;      font: $bodyfont;      } So you can define separate colors for fonts, links, hovers, backgrounds, borders, et cetera ... and separate fonts for posts, comments, links, sidebars, headers, et cetera, et cetera. And you don't have to dive into the xml template every time you feel the urge to change a font or a color. You can control all these in the Fonts and Colors tab on the Dashboard! Very neat. It really is a pity this handy gimmick is limited to only two types! What's left, I guess, is learning and understanding CSS. There are plenty of fine css-link-lists out there! Some reading: CSS Beginner Tutorial | HTML Dog CSS Intermediate Tutorial | HTML Dog CSS Advanced Tutorial | HTML Dog CSS Tutorial | W3Schools Newly Supported CSS Selectors in IE7 Floatutorial | Max Design A List Apart (hearty recommended!!!) and so on and so forth