In this tutorial, we are going learn about the CSS Variable Definitions for Colors and Fonts that could be found at the top of the style sheet of a Blogger blog. The values for the Variable definitions can be modified directly through the Blogger Template Designer where are the settings for colors, backgrounds, fonts and font sizes.
Page Elements by going to the "Template Designer" and click on the "Advanced" tab.
In some cases, we can't change the color or font of a custom template if the designer has not implemented the variables and didn't defined & specified a particular value directly into a property. And if there is no definition for these values, we may not be able to customize it through the Blogger's Template Designer.
There are two types of variables:
1) Color Variable:
margin, padding, need to be included in the HTML of the template above the ]]></b:skin> tag. So that's how you can add custom variable definitions to Blogger. Enjoy!
Page Elements by going to the "Template Designer" and click on the "Advanced" tab.In some cases, we can't change the color or font of a custom template if the designer has not implemented the variables and didn't defined & specified a particular value directly into a property. And if there is no definition for these values, we may not be able to customize it through the Blogger's Template Designer.
There are two types of variables:
1) Color Variable:
<Variable name="body.background.color" description="Outer Background" type="color" default="#66bbdd" value="#66bbdd"/>
- In red is the variable name. Here you can put any name you want, however, it must not contain spaces, that's why we may see some variable names using a dot "." between each word.
- In green is the description that will appear in the Fonts and Colors panel (it can contain spaces).
- In blue is variable type, which in this case is "color".
- In purple is the default value, which runs in the absence of any other value.
- In orange is the value of the selected color.
<Variable name="body.font" description="Font" type="font" default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" />
- In red the variable name without spaces.
- In green the description of the variable, may contain spaces.
- In blue is the type of the variable, which in this case is font.
- In purple the default font.
- In orange is the font that you choose.
Where Are Variable Definitions located
We can find the variables definitions in the <head> section of our Template by accessing the HTML code (click on the "Edit HTML" button). There we should see a pair of <b:skin>..</b:skin> tags. The CSS style declarations will go in between those tags, along with the variable names.margin, padding, need to be included in the HTML of the template above the ]]></b:skin> tag. So that's how you can add custom variable definitions to Blogger. Enjoy!
SUBSCRIBE to Our Newsletter
Sign up here with your email address to receive updates from this blog in your inbox.
Pilih Sistem Komentar