Try these customizations on a temporary test blog using one of the available pre-built templates offered by Google. This way, you can easily inspect the existing design options already present in the template.And, in case, you're planning to directly edit the template of your live blog, take a backup before moving ahead. Let's get started and see how we can add custom design options to our blogger template.
Mastering the Basics
First of all, let's see what exactly having a custom design option means in this context. It's simply a click and change option within the dashboard that enables you to change the appearance of your blogger template without ever touching the HTML code.Here's a sample design change option offering customization of the post title color.
Here, you can see that apart from picking a color from one of the pre-defined options, one can also generate a custom one through the color generator. No messing with code! It's all click and change.Color is just one of the types of available design options within the theme customizer. You can also specify font and width settings for various elements of the design.
To provide custom design options, we often create two types of entities. The first one is a standalone variable and the second one is a group of custom options targeting a specific element on the page.
We'll look at both of them as we move ahead in this tutorial.
These variables and group definitions are written within the
<b:skin> tags where the template's CSS code is written as well. The structure looks something like this.<b:skin><![CDATA[
/*
Custom Variables and Group Definitions Goes Here
Remember, do not delete opening and closing comment tags /* */ here
All these definitions are written between these comment tags.
*/
/* Custom CSS code goes here */
* {
margin: 0;
padding: 0;
}
]]></b:skin>Blogger Template Variables
Now that we know the basics, let's start with defining some of the custom variables and see how they work in a blogger template. A variable consists of the following parts.- name - This one is quite simple. This attribute is used to give a meaningful or human-readable name to the variable. It is also used to reference a variable within the CSS code.
- description - This attribute is used to describe what the variable is all about.
- type - Here, we mention the type of variable, viz., color, font, length, automatic, and so on.
- default - This is the default value of the variable. It is used when a user triggers a template reset in the theme customizer.
- hideEditor - It's used to hide or display the variable within the visual theme customizer.
- value - This is the current value of the variable to be used within the template.
<Variable name="primaryColor" description="Main color" type="color" default="#0DC143" value="#0DC143"/>$(primaryColor) using a dollar sign and a pair of parenthesis. Here's how you fetch the variable within the CSS code.<b:skin><![CDATA[
/*
<Variable name="primaryColor" description="Main color" type="color" default="#0DC143" value="#0DC143"/>
*/
.post p {
color: $(primaryColor);
}
]]></b:skin>default="" attribute or the value="" attribute?It's the
value="" attribute that should be changed. The default="" attribute should only be changed when you want to change the value to be applied on a template reset by the user.Let's take a quick look at different types of variables. It'll give you a good idea about how these variables are defined.
/* Color Variable */
<Variable name="primaryColor" description="Main color" type="color" default="#0DC143" value="#0DC143"/>
/* Font Variable */
<Variable name="georgiaBold16" description="Georgia bold size 16" type="font" default="bold 16px Georgia, serif" hideEditor="true" value="bold 16px Georgia, serif"/>
/* Length Variable */
<Variable name="sidebarWidth" description="Sidebar width" type="length" min="200px" max="350px" default="300px" value="325px"/>
/* Automatic Variable */
<Variable name="alignRight" description="Align element to the right" type="automatic" default="right" hideEditor="true" />
And, here's how the font setting appears in the theme customizer.
Automatic variables are used to reference the values within the template's CSS code. They're not used in the theme customizer. That's why we generally apply hideEditor="true" attribute to these variables.Blogger Template Custom Design Group Definitions
Now, that we know the basics of variables, let's go ahead with a real-life example to see how we may use both the combination of variables and group definitions to create design options within the theme customizer. It's dead simple and one can learn it quite easily.While creating a custom design option group, you can either target all the child or descendant elements of a parent container or you can create a design option group for a common set of elements present on the page. Let's see how to do it.
The demo blogger template I'm using for this tutorial has the following HTML code for the post section. Naturally, we're targeting the post-design options.
<div class="post hentry uncustomized-post-template" itemprop="blogPost" itemscope="itemscope" itemtype="http://schema.org/BlogPosting">
<h3 class="post-title entry-title" itemprop="name">
Hello World!!!
</h3>
<div class="post-header">
<div class="post-header-line-1"></div>
</div>
<div class="post-body entry-content" id="post-body-2930505525536801724" itemprop="description articleBody">
This is a demo post to demonstrate blogger's custom design options.
</div>
<div class="post-footer"></div>
</div>post and hentry classes.So, all the elements within this parent container can be targeted through custom design options. For that, we need to create a group. Here's how to do it.
<Group description="Post Design Options" selector="div.post.hentry">
....
....
</Group><Group> tag for the same. All the design options go inside the opening and closing <Group> tags.You can see, the description attribute is where we provide the name for that group as it'll appear within the theme customizer. Pay attention to the selector attribute. Here we're targeting the parent container.
Now, let's say we want to provide customization options for both the font size and the font color for both the post title as well as for the bost body. Here's how to do it.
<Group description="Post Design Options" selector="div.post.hentry">
/* Post title font and color settings */
<Variable name="post.title.font" description="Post Title Font" type="font" default="bold 1.6rem Georgia, serif" value="bold 1.6rem Georgia, serif"/>
<Variable name="post.title.color" description="Post Title Color" type="color" default="#444" value="#444"/>
/* Post body font and color settings */
<Variable name="post.body.font" description="Post Body Font" type="font" default="bold 1rem Georgia, serif" value="bold 1rem Georgia, serif"/>
<Variable name="post.body.color" description="Post Body Color" type="color" default="#333" value="#333"/>
</Group>The name itself should be chosen in such a way so that it explains what we're customizing.
Make sure you're enclosing attribute values in double-quotes. Single quotes will result in an error.
Now that the design options group has been created and the associated variables are defined as well, it's time to complete the last step. What, there's something more to do now?Yes, we have to apply these variables at the right places within the CSS code so that the values associated with them get replaced with the variable name itself.
So, here's how the variables' names will be referenced in my CSS code.
h3.post-title {
font: $(post.title.font);
color: $(post.title.color);
}
.post-body {
font: $(post.body.font);
color: $(post.body.color);
}
Cool! Isn't it? Now theme users can directly customize these design properties through these options instead of messing their hands with the CSS code.You're free to create as many design option groups as you want with a collection of variables within each group. Feel free to experiment with these design options on a test theme.