Make

You now know how to make your Blogger template's fonts and colours tweakable. The process goes like this:

1. Go through the template CSS and look for a font or colour value that you'd like to make tweakable.
2. Add a Variable tag for that value inside the template's b:skin element.
3. Replace the appropriate font or colour value(s) in the CSS with the variable name.
4. Repeat until you've made all your fonts and colours tweakable.

Now, open the Tope template file (tope.xml) from the previous tutorial in your text editor add your Blogger variables between the <b:skin> and </b:skin> tags. For each variable, replace the appropriate hard-coded value(s) in the CSS with the variable name.

Here are the variables I added:

/* Variable definitions
   ====================
   
   <Variable name="contentBackgroundColour" description="Content Background Colour" type="color" default="#efedd9" value="#efedd9">
   <Variable name="textColour" description="Text Colour" type="color" default="#393b4a" value="#393b4a">
   <Variable name="linkColour" description="Link Colour" type="color" default="#2e5a8c" value="#2e5a8c">
   <Variable name="visitedLinkColour" description="Visited Link Colour" type="color" default="#802f8c" value="#802f8c">
   <Variable name="hoveredLinkColour" description="Hovered Link Colour" type="color" default="#000" value="#000">             
   <Variable name="blogTitleColour" description="Blog Title Colour" type="color" default="#000" value="#000">
   <Variable name="blogDescriptionColour" description="Blog Description Colour" type="color" default="#393b4a" value="#393b4a">
   <Variable name="postTitleColour" description="Post Title Colour" type="color" default="#a0854f" value="#a0854f">
   <Variable name="postFooterTextColour" description="Post Footer Text Colour" type="color" default="#666" value="#666">             
   <Variable name="borderColour" description="Border Colour" type="color" default="#333" value="#333">
   <Variable name="sidebarHeadingColour" description="Sidebar Heading Colour" type="color" default="#484743" value="#484743">

   <Variable name="textFont" description="Text Font" type="font" default="normal normal 85% Georgia, 'Times New Roman', Times, serif" value="normal normal 85% Georgia, 'Times New Roman', Times, serif">
   <Variable name="sidebarHeadingFont" description="Sidebar Heading Font" type="font" default="normal normal 120% Georgia, 'Times New Roman', Times, serif" value="normal normal 120% Georgia, 'Times New Roman', Times, serif">
   <Variable name="blogTitleFont" description="Blog Title Font" type="font" default="normal normal 350% Georgia, 'Times New Roman', Times, serif" value="normal normal 350% Georgia, 'Times New Roman', Times, serif">
   <Variable name="blogDescriptionFont" description="Blog Description Font" type="font" default="normal normal 100% Georgia, 'Times New Roman', Times, serif" value="normal normal 100% Georgia, 'Times New Roman', Times, serif">
   <Variable name="postFooterTextFont" description="Post Footer Text Font" type="font" default="italic normal 100% Georgia, 'Times New Roman', Times, serif" value="italic normal 100% Georgia, 'Times New Roman', Times, serif">
   
   <Variable name="startSide" description="Side where text starts in blog language" type="automatic" default="left" value="left">
   <Variable name="endSide" description="Side where text ends in blog language" type="automatic" default="right" value="right">
             
*/

And here's my revised CSS. Notice how the font, colour, float, margin and padding values have been replaced by the Blogger variable names where appropriate (changed lines highlighted in bold):