How to Map Blogger and Custom Template Colors

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.


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:


click smaller or larger to adjust font sizes.

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!


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!


You may also be interested in other posts related to blog design.
Choose Your Template Wisely
Color in Blog Design

I’m anxious to hear your thoughts on this topic.

If you found this post useful, leave a comment and share your thoughts with others.
Get future posts in your RSS feed or by email.


  1. Thanks Shirley for the comment on Canadian resume.
    Your blog post helps visualization of true colors, for one and all.
    Best wishes.

  2. @Fransiska – well I need to let my readers here know I’m still around — Blogging with success is the new ‘baby’ and needs extra attention right now! So don’t be jealous.

    @Mohamed – you continue to amaze me with the number of blogs and scope of topics you cover. Thanks for taking time to let me know you’re there!

  3. tried this but doesn’t seem to work with my customised template…. the template names just don’t show up on the right side and there is a blog preview at the bottom, nothing is clickable !!

Comments are closed.