Creating a Blogger Template (4)

tag:blogger.com,1999:blog-16217833.post-81807935641257121772007-03-06T16:47:00.000+01:002007-03-17T15:07:37.295+01:00Creating a Blogger Template (4)<div style="margin: 30px 0 20px 20px">... Variables ...</div> <div style="border: 2px solid #6699FF; padding: 20px;">This is the fourth part of the Creating A Blogger Template series: <a href="http://thrbrtemplates.blogspot.com/2007/03/creating-blogger-template.html">Creating a Blogger Template (1) - from scratch</a> <a href="http://thrbrtemplates.blogspot.com/2007/03/creating-blogger-template-2.html">Creating a Blogger Template (2) - the layout</a> <a href="http://thrbrtemplates.blogspot.com/2007/03/creating-blogger-template-3.html">Creating a Blogger Template (3) - a fluid design</a> <a href="http://thrbrtemplates.blogspot.com/2007/03/creating-blogger-template-4.html">Creating a Blogger Template (4) - variables</a></div> 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 > <a href="http://help.blogger.com/bin/answer.py?answer=46871&query=variables&topic=&type=f">Fonts and Colors Tags for Layouts</a>, 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 <a href="http://thrbrtemplates.blogspot.com/2007/03/creating-blogger-template.html">first</a> CaBT: <div style="background-color: #F0F0F0; padding: 20px; color: #f67c2a">Notice <style type="text/css">  </style> is replaced by <b:skin><![CDATA[/* */  ]]></b:skin></div> The variables are added, embedded between the comment tags /* */, like this: <div style="background-color: #F0F0F0; padding: 20px; color: #f67c2a"><b:skin><![CDATA[/*<blockquote>Variable definitions ==================== <Variable name="" description="" type="" default="" value=""></blockquote>*/  ]]></b:skin></div> As you can see each Variable has a few obliged attributes:<blockquote>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;</blockquote>*) 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): <div style="background-color: #F0F0F0; padding: 20px; color: #f67c2a"><b:skin><![CDATA[/*<blockquote>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"></blockquote>*/  ]]></b:skin></div> 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): <div style="background-color: #F0F0F0; padding: 20px; color: #f67c2a">Instead of body {      color: #CCC;      font: italic bold x-small 'Trebuchet MS', Trebuchet, Verdana, Sans-serif;      } one can write body {      color: $textcolor;      font: $bodyfont;      }</div> 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! <div style="border: 2px solid #F0F0F0; padding: 10px;">What's left, I guess, is learning and understanding CSS. There are plenty of fine css-link-lists out there! Some reading: <a href="http://www.htmldog.com/guides/cssbeginner/">CSS Beginner Tutorial | HTML Dog</a> <a href="http://www.htmldog.com/guides/cssintermediate/">CSS Intermediate Tutorial | HTML Dog</a> <a href="http://www.htmldog.com/guides/cssadvanced/">CSS Advanced Tutorial | HTML Dog</a> <a href="http://www.w3schools.com/css/default.asp">CSS Tutorial | W3Schools</a> <a href="http://www.communitymx.com/content/article.cfm?cid=1C603">Newly Supported CSS Selectors in IE7</a> <a href="http://css.maxdesign.com.au/floatutorial/">Floatutorial | Max Design</a> <a href="http://alistapart.com/">A List Apart</a> (hearty recommended!!!) and so on and so forth</div>thurhttp://www.blogger.com/profile/11325683639754912267noreply@blogger.com