How to add custom Variable definitions to Blogger

In this tutorial, we will learn the CSS variable definitions for colors and fonts, which are located at the top of the Blogger blog style sheet. Meta variable values ​​can be edited directly in the Blogger Template Builder , where you can find settings for colors, backgrounds, fonts, and font sizes.

Most default Blogger templates, such as the Minima template, use these CSS settings, making it easy to modify the variables through the Blogger dashboard using the template builder editor (Template > Customize) and going to Advanced. " Section.

If the definitions have already been added to the CSS, we can change the background colors, font colors, styles or sizes directly from the Blogger dashboard without touching the HTML code of the template.

If these values ​​are not defined, we can set them by creating our own variables. The more variables you create, the easier it is to change the colors and fonts of page elements by going to the Form Builder and clicking the Advanced tab.

In some cases, we cannot change the color or font of a custom template unless the designer implements variables and sets a specific value and sets it directly in the property. And if these values ​​are not set, we won't be able to customize them using the Blogger Template Builder.

There are two options.

1) change the color.

body.background.color "description=" outer-background- type "=" color " default=" #66bbdd " value=" #66bbdd "/>

• The name of the variable is highlighted in red . Here you can specify any name you want, but it must not contain spaces, so we can see some variable names using the dot " ". between each word.
• Green shows the description that will appear in the Fonts and Colors panel (may contain spaces).
• Blue indicates the type of variable, in this case "color".
• Purple is the default, which works in the absence of any other value.
• Orange shows the value of the selected color.

2) Linear variable.

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 " />:

• The variable name is in red without spaces.
• The variable description is highlighted in green and may contain spaces.
• The blue color indicates the type of variable, in this case it is a line.
• Purple font by default.
• The selected line is highlighted in orange .

Where have definitions changed?

Variable definitions can be found In our form , which refers to the HTML code (click the Edit HTML button). We got to see a couple .. Labels: CSS style declarations will be passed between these tags along with variable names.

How to create variations using color type

Now let's see how we can create type=" color " variables in our form.

Copy the snippet below and replace the names and types as desired, then paste the code below this comment:

/* variable definitions
========================

To copy the code:

NAME "description =" DESCRIPTION " type =" color " default =" #xxxxxx " value =" #xxxxxx "/>

To understand better, let's look at this example with a variable of type " color ":

variablecolor "description=" variable light blue " type=" color "default=" #DDF2FF "value=" #DDF2FF "/>

Here I have created a variable of type " color " called " variablecolor ". Color values ​​( #DDF2FF ) can be applied to all borders on my blog, and when I want to apply color styles to specific borders, I set them like this:

border: 1px solid $ (variable color) ;

Notice that I added the " $ " character before the variable name and enclosed the name in parentheses. They must be added every time you want to implement a new variable declaration.

Once the variable is created, we can apply it to any property (not just borders) of any selector (page element) where the specified color can be applied.

For example, if I wanted to add this color to the main inner background (sidebar and message bar), I would add it right after the "inner-main" class selector, like this:

.main-internal {
background-color: $ (variable color) ;
}

Now that the new variable has been added, save it and return to your blog dashboard by clicking the Customize button and then the Advanced tab. You will notice a new variable called " blue variable ". Just use the color picker to change the color.

How to create font variables

Now let's say we want to create a new type="font" variable to apply to the title of the sidebar widgets. I add it like this.

gadgetstitlefont "description=" Gadget title font " type=" font "default=" regular-regular 16px Arial, Verdana, 'Trebuchet MS', Trebuchet, Sans-serif " value=" regular-regular 20px Cambria "/>

In this variable you just created, the default font for web browser searches should be Arial , if not, it should be Verdana , etc. Alternatively, use the Cambria font, which is actually the font we want and can easily be changed using Blogger's Template Builder.

Once the font variable is implemented, we can add it to any property of any selector where we want to set the font style.

To specify where to apply this variable (in my example, the name of the sidebar tools), I need to include the values ​​directly in the h2 property of the "sidebar" selector ( sidebar-right -1 ) by creating the following CSS rule:

# right sidebar -1 h2 {
font: $ (gadgetstitlefont) ;
}

I will add this above ]]> Template tag (don't forget to put the "$" sign in front of the variable name, as well as the name in parentheses, otherwise it won't work).

Now that we've added the new version, save the template and return to your Blogger dashboard by clicking Template > Customize and clicking the Advanced tab. Scroll down and we'll see a new variable called Gadget Header Font . if you want to change the font type or size, you can do so directly through this panel.

Once you've selected the font style you want to apply, click the Apply to Blog button on the right.

When designing a template, you can add many types of color and font variables, but you don't need to create variables for other types of CSS attributes. Other types like margin, padding should be included in the above HTML template ]]> Label. Here's how to add custom variable definitions to Blogger. Have fun!