Knowing a person’s name is essential for building a business or personal relationship. Template designers know the variable names that Blogger uses to generate embedded styles for your blog. Using the same names for the same key elements lets the template author communicate with Blogger! That measure of compatibility and integration means the novice blogger can feel comfortable installing a free template.
Naming conventions also allow you to use the Blogger Fonts & Colors tab to change custom templates you have already installed. Originally I thought that tab was only for adjusting the default set of Blogger templates, but I was mistaken. So here’s how you can avoid going under the template hood for most color and font design changes.
HOW TO TAKE ADVANTAGE OF KNOWING NAMES
I created this map by putting the template variable name next to the Blogger name. The template name is on the right. Go to Layout, Fonts and Colors to see the list on the left. Then use my map to know what the same item is called in the template. Blogger never defines the actual template variable name on the Fonts & Colors screen. I did some undercover work!
Use the map above to identify each color and font. For example the first Blogger name “Page Background Color” is the same as the template variable “bgcolor.”
If you highlight that line, Blogger displays ‘Choose a color for Page Background Color.’ The screen also shows the current color code under the ‘Edit color hex code ‘ column on the right. You can then ‘choose a color’ from the color palette or key a different six digit ‘hex code’. Be sure to read my post on the Firefox tool ColorZilla to easily get hex codes for your favorite colors.
Any changes you make here will be reflected in the template. Thankfully, there is a preview window at the bottom of the edit screen so you can scroll down the page and see the effect of the color choices you make. You can always use the ‘clear edit’ button, if things don’t go as planned!
Similarly the fonts are named and Blogger lets you update your template by selecting the standard web safe fonts:
Make sure you do only one or two adjustments at a time on the actual blog, since changes take effect as soon as you tell Blogger to “save.” Only save after the preview looks good. For extensive adjustments use a test blog first!
TIP FOR ADVANCED USERS
You may want to use the map as a reverse look up when searching the template html (e.g. you want to use the page background color on a new variable you define for a post separator, so just give it the color=”bgcolor”. That way if you change bgcolor then you automatically match it in the new variable.)
Keep this map in mind to avoid making html tweaks to your blog’s color and fonts. Use the Fonts and Colors tab under Layout instead. Most variables appear in both Blogger and your custom template under the same name. Anytime you can avoid direct Html editing of your template, be happy!
I’m anxious to hear your thoughts on this topic.