Fonts and Colors Tags for Layouts

If you know HTML or CSS, you're welcome to modify the fonts and colors in your template any way you like. However, if you want them to work with the Fonts and Colors feature of Blogger Layouts, then there are a few guidelines to follow. Doing it this way will let you modify the colors more easily if you change your mind later. It also helps if you share your template with someone else who wants to customize their version a bit.

In the <head> section of your code, you'll need to have a pair of <b:skin> </b:skin> tags. The CSS style declarations will go in between those tags, along with the variable names that make your design work with the Fonts and Colors page. Here's a brief example of how it looks, before we get into the details:

<head>

...
<b:skin>
  <style type='text/css'>
  /*
   * Variable definitions:
   *  <Variable name='bgcolor' description='Page Background Color' 
       type='color' default='#fff'/>
   */
  body {
    background: $bgcolor;
    margin: 0;
    padding: 40px 20px;
  }
  </style>
</b:skin>
</head>

The first part of the CSS code is enclosed in /* and */ comment tags, so it won't be shown on your blog, but only used by Blogger internally. There will be a list of variables here, one for each font or color that you want to be editable from the Fonts and Colors tab. Each variable is required to have the information shown in the example above and described here:

  • name - This name may contain only letters or numbers, and each name in your template must be unique.
  • description - This can be a more descriptive name, and can include spaces. This is what will appear in the Fonts and Colors tab.
  • type - This can be either "font" or "color".
  • default - The default value. For colors, this should be a hexadecimal color code, e.g. #FF0066. For fonts, it will be a list of the form font-style font-weight font-size font-family.

After the variables are set up, the rest of the code looks like regular CSS, with one exception. Any time you want to use a color or font for which you made a variable, you'll enter $variable_name instead of the actual color or font. In the example above, you can see that we created a variable called bgcolor and set it to white (#fff). Then later on in the code, instead of setting the body background property to white explictly, we just said background: $bgcolor. This still has the effect of making the background white, with the difference that we can change it easily from the Fonts and Colors tab if we want to.

As you work on your template design, you'll add lots of variables for all the different fonts and colors you want to control. You do not, however, need to create variables for other types of CSS attributes. These can be included in the CSS just as they normally would be (as with the margin: and padding: attributes in the example above).

Note: If you need to brush up on your CSS, you can start here.