Blogger Template Design - CSS Styling and Layout using Variables - Part 4
Reading Time:
Reading Time:
Blogger Template Design is very easy to create with the right kind of Information, it is just like creating HTML pages, instead of a blogger that 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 provide 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 customizable using the Template Designer.
Like writing CSS inside the HTML <style>
tag, blogger has provided the <b:skin>
tag which provides us with additional capabilities like Defining Variables, Grouping them, and using those in CSS property values.
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 exist 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.
<!-- 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>
.....
To define a variable, the <Variable>
tag must be used. It has a few attributes that define the properties of the variables. The standard attributes are,
Variable
element.The value provided for default and value must have a specific format based on the type of the variable defined. The following are the types and their formats.
#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.
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.
<!-- 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>
....
It will be really useful to keep a 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 customize 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,
<!-- 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>
....
The above example shows how a group can be defined and the image shows how it will appear in the Template Designer.
Now that the variables have 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.
<!-- 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>
....
The <template-skin>
is used to contain variables
that control the page width and width of the various sections available on 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 customized using the Template Designer.
<!-- 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>
....
As mentioned above, there are other variables types that are 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.