-blogger -code

Code: Blogger Custom Variables And How To Use Them

In a blogger template, there can be custom variables added to allow changes to the template be done through the Blogger designer( Blogger Admin > Theme > Customize ). I am unable to find a complete list of variables on the world wide web, so this is my attempt to write a reference and explanation here.

I've found thus far, five variable types:

  1. color
  2. font
  3. length
  4. string
  5. automatic

The "color" variable:
<variable default="#000000" description="Example Color Title" name="example.variable.name" type="color" value="#000000">

The "color" variable usage example:
div { 
    background-color: $(example.variable.name);

The "font" variable:
<variable default="normal normal 100% Montserrat" description="Example Font Title" name="exampleVariableName" type="font" value="normal normal 100% Montserrat"/>

The "font" variable usage example:
div { 
    font: $(exampleVariableName);

The "length" variable:
<variable default="1280px" description="Example Length Title" max="1920px" min="320px" name="example-variable-name" type="length" value="1280px"/>

The "length" variable usage example:
div { 
    font: $(example-variable-name);

The "string" variable:
<variable default="This is an example text" description="Example Variable Description" name="ExampleVariableName" type="string" value="This is an example text"/>

The "string" variable usage example:


The "background" variable:
<variable default="url() repeat fixed center center" description="Example Background Title" name="exampleVariable.background" type="background" value="url() repeat fixed center center"/>

The "automatic" variable:
p { 
    background-color: $(primary.background.color);
    background-image: linear-gradient(transparent 50%, $(inactive.tab.background.color) 50%);
    background-size: 3rem 3rem;
    background-origin: content-box;
    background-attachment: local;
    padding: 1rem;
    line-height: 1;
    border: 1px solid $(border.color);