Blogger Template Design - CSS Styling and Layout using Variables - Part 4

Tuesday, February 21, 2017

Blogger Template Design is very easy to create with the right kind of Information, it is just like creating HTML pages, instead blogger offers Elements to create dynamic pages by parsing the template code written and inserting data in it. In previous parts Part 1, Part 2 and Part 3 of Blogger Template Design from Scratch provides some of the important blogger Design Elements and Information regarding how to use them to create Blogger Template. In this part, we will cover some of the things like Styling using CSS, Defining Variables, Page Layout and how to make it customisable using the Template Designer.

Read the previous parts of the blogger template design from scratch,


1. b:skin

Like writing CSS inside the HTML <style> tag, blogger has provided the <b:skin> tag which provides us with addition capabilities like Defining Variables, Grouping them and using those in CSS property values.

1.1 Defining the b:skin

The <b:skin> tag must be inserted inside the <head> section of the page. Inside the <b:skin> tag, all the Variable Declaration, Group Declaration and CSS styles must exists within a <style> inside comments /** */ or within a <![CDATA[ ]]>, so that the browser or the XML parser does not parse it. But those will be parsed by the blogger engine and it will populate the page with the parsed CSS styles.

Format
<!-- Defining b:skin example -->
.....
<head>
  .....
  <b:skin><style typ="text/css">
      /**
       *  Variable Definitions go here.
       */

      /**
       *  CSS Styles go below, followed by the Variable Definitions
       */
  <style></b:skin>
  ......
</head>
.....

1.2 Defining the Variables and Groups

1.2.1 Variables

To define a variable, the <Variable> tag must be used. It has few attributes that define the properties of the variables. The standard attributes are,

  • name - A unique name made up only with letters and numbers.
  • description - A short description about the variable, which will appear in the Template Designer while customising.
  • type - Can be either Font or color. Although the official docs specify only these 2 types, there are other types supported as well (like length, string, url, background)and some types add extra attributes to the Variable element.
  • value - This is the value for the variable.
  • default - This is the default value for the variable if the value is not present.

The value provided for default and value must have a specific format based on the type of the variable defined. Following are the types and their formats.

  • color - The value must be a hexadecimal color code, example #FF2266. Can be used for CSS properties requiring colors.

    Creating a color variable under a group (which will be discussed later), will create a section in the Template Designer as shown below.

    Color Variable section in Template Designer

  • font - For font the format of the value must be font-style font-weight font-size font-family. Can be used to specify font styling for elements.

    Similar to the color section, for font variable declaration, a section appears in the Template Designer as shown below.

    Font Variable section in Template Designer


To view these variables in a Template Designer, go to Template Tab -> Customise Button -> Advanced Tab. Here the grouped variable definitions will be shown with the Group Title at the left side of the tab.

Example
<!-- Variable Declaration -->
....
<head>
<title><data:blog.pageTitle/></title>
  <b:skin>
    <style type='text/css'>
    /** Color and font variable declaration

    <Variable name="title.color" description="Title Color" type="color" default="#000000" value="#2f2f2f"/>

    <Variable name="title.font" description="Title Font Styles" type="font" 
      default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>

    */
    
    /** CSS styles */
    </style>
  </b:skin>

  (or)

  <b:skin><![CDATA[
    /** Color Variable Declaration */
    <Variable name="title.color" description="Title Color" type="color" default="#000000" value="#2f2f2f"/>

    /** Font Variable Declaration */
    <Variable name="title.font" description="Title Font Styles" type="font" 
      default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
  ]]></b:skin>
</head>
....

1.2.2 Groups

It will be really useful to keep specific set of variables under a group, like grouping a list of variables that define the styles for a page title (like title color, title font styles, title background color).

By grouping variables, it is easy to customise them later in the Template Designer without getting into the template code to change the values of the variables.

To define a group, the <Group> tag must be used. It has the following 2 attributes,

  • description - A small description of the group. This description will be used to identify the group in the Template Designer

    Group Description in Template Designer

  • selector - Specify the CSS selector for the group which will be used to highlight in the Template Designer when customising the template. This acts as a visual cue for the person that this particular section is going to be affected by changing the values of the variables within that group.

    Highlighting a section in Template Designer


Example
<!-- Group Declaration -->
....
<head>
<title><data:blog.pageTitle/></title>
  <b:skin><![CDATA[
    /**
     * Grouping the variables shown in previous example
     */
    <Group description="Codedodle Title" selector=".header">
      <Variable name="title.color" description="Title Color" type="color" default="#000000" value="#2f2f2f"/>
      <Variable name="title.font" description="Title Font Styles" type="font" 
        default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
    </Group>
  ]]></b:skin>
</head>
....

Group Variables Section

The above example shows how a group can be defined and the image shows how it will appear in the Template Designer.

1.2.3 Using the Variables

Now that the variables has been declared, they can be used in CSS. To use a variable anywhere, you just provide the name of the variable with a dollar prefix $variable_name or pass the variable name $(variable.name) with this syntax.

Example
<!-- Using the variables -->
....
<head>
<title><data:blog.pageTitle/></title>
  <b:skin><![CDATA[
    /**
     * Grouping the variables shown in previous example
     */
    <Group description="Codedodle Title" selector=".header">
      <Variable name="title.color" description="Title Color" type="color" default="#000000" value="#2f2f2f"/>
      <Variable name="title.font" description="Title Font Styles" type="font" 
        default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
    </Group>

    /**
     * CSS Style */

    .Header h1 a {
      color: $(title.color);
      font: $(title.font);
      text-align: center;
    }
  ]]></b:skin>
</head>
....

2. Template Skin

The <template-skin> is used to contain variables that control the page width and width of the various sections available in the page. Using those variables, it is easy to control the widths of the various sections by using CSS below these variable declarations. The variables declared here can also be customised using the Template Designer.

Example
<!-- template-skin example code -->
....
<head>
<title><data:blog.pageTitle/></title>
  <b:skin><![CDATA[
    ....
  ]]></b:skin>
  <b:template-skin>
    <b:variable default='960px' name='page.width' type='length' value='960px'/>
    <b:variable default='0' name='main.sidebar.left.width' type='length' value='0px'/>
    <b:variable default='310px' name='main.sidebar.right.width' type='length' value='310px'/>

    body {
      min-width: $(page.width);
    }

    .sidebar-left {
      min-width: $(main.sidebar.left.width);
    }

    .sidebar-right {
      min-width: $(main.sidebar.right.width);
    }
   </b:template-skin>
</head>
....

Template Sking Options in Template Designer

Other Variable Types

As mentioned above, there are other variables types that is supported in blogger which can be used in other places of the template.

<!-- other variable types -->
....
<head>
<title><data:blog.pageTitle/></title>
  <b:skin><<style type="text/css">
    /** Length Variable */
    <Variable name="content.padding" 
      description="Content Padding" 
      type="length" 
      default="10px" min="0" max="100px" 
      value="10px"/>

    /** URL Variable */
    <Variable name="body.background.gradient" 
      description="Body Gradient Cap" 
      type="url"
      default="url(https://domain.com/path/to/gradient.png)" 
      value="url(https://domain.com/path/to/gradient.png)"/>

    /** Background Variable */
    <Variable name="blog.background"
      color="$(content.background.color)"
      description="Background of blog paging area" 
      type="background"
      default="transparent none no-repeat scroll top center" 
      value="transparent none no-repeat scroll top center"/>

    /** String Variable */
    <Variable name="page.width" 
      description="Page Width" 
      type="string" 
      default="auto" 
      value="auto"/>
  </style>
  ]]></b:skin>
</head>
....

The above example shows the declaration of variables of type length, url, background and string.