How to Make Custom Templates Support Blogger Template Designer

Blogger Template Designer

You've seen how Blogger Template Designer makes customizing your blog a lot easier, but that is only if you've used the default templates or custom templates that has support for it, which, if I'm not mistaken, is pretty rare. That's probably because there isn't, well, wasn't a tutorial for it until now. You'll learn how to add support for it in your own customized template(s) so you can easily:

  • change the fonts
  • change the colors of about anything
  • change the background
  • change the widths

I think you should know how to do all of these things if you develop Blogger templates. It's super easy to learn and you'll get the hang of it in no time!

Let's Begin!

In the <head> section of your template code, you'll need to have a pair of <b:skin> </b:skin> tags. Our variables need to be defined and used between these tags or else they won't work. Take a look at the following example of how everything looks to make sure we're on the same page:

<head>
...
...
...
<b:skin><![CDATA[
    /* Variable Definitions
    ====================
    <Variable name="link.color" description="Link Color" type="color" default="#09c" value="#a098cc"/>
    */
    a {
       color: $(link.color);
       text-decoration: none;
    }
]]></b:skin>
</head>

Note: The <b:skin> </b:skin> tags will be converted to <style> </style> tags, and the <![CDATA[ ]]> tags will be converted to <!-- --> tags when the blog is loaded. The <![CDATA[ ]]> tags must be present as the first and last tag between the <b:skin> </b:skin> tags or you'll get an error if you try to save without them.

The Variable definitions are enclosed with CSS comment tags, /* and */, so they'll be seen as comments to browsers and only be used by Blogger internally.

Defining Variables

Before we go into how to use variables, let's first understand how you define them. After you get this down pat, everything will be a piece of tart(mm...coconut). Look at the following code and see how it's formed:

<Group description="Gadget Title" selector="h2">
    <Variable name="gadget.title.font" description="Font" type="font" default="normal normal 1.2em Cambria"/>
    <Variable name="gadget.title.color" description="Color" type="color" default="#666"/>
</Group>

The following tables will help you understand the attributes of each tag:

Attributes of <Group>:

Attribute Value Description
description text The name of a tab under the Advance tab in Blogger Template Designer.
selector CSS_selector The value should be for whatever is being edited with the Blogger Template Designer because this is what gets highlighted with a big, red, dotted border.

Attributes of <Variable/>:

AttributeValueDescription
nameletters and/or numbersThe name of a variable that may be used along with regular CSS. It must be unique to all other variable names in your template.
descriptiontextThe name of the fonts or colors tab. If the Variable tag is not within a Group element, then it also becomes the name of a main tab under the Advance tab in Blogger Template Designer.
typefont color custom_stringUse font or color to use their respective features in Blogger Template Designer. You can use a custom string to take advantage of a variable's power.
defaultfont_shorthand_property HEX_color_codeThis is the default value and the value resetting the template goes to. font uses the shorthand property(e.g. italic bold 12px Arial), while color uses the hexadecimal color code(e.g. #aaa)
valuefont_shorthand_property HEX_color_codeThe new and current value.

Here is the code again:

<Group description="Gadget Title" selector="h2">
    <Variable name="gadget.title.font" description="Font" type="font" default="normal normal 1.2em Cambria"/>
    <Variable name="gadget.title.color" description="Color" type="color" default="#666"/>
</Group>

You can clearly see that the Group element is used to group the elements that define variables. This lets you edit more than one thing under the same tab, see:

example

If you've read the first table, you'd know that the selector gets highlighted by Blogger Template Designer, so it should be specific to whatever is being modified. You can see why it needs to be specific, right? For example, in the <Group> tag above I used the default selector used in Blogger's default templates, but as you can see, it isn't a good selector. This is proven when I try to edit the titles in my sidebar:

every h2 element on the page is highlighted with red, dotted borders

Every h2 element on the page will be highlighted

Clearly, the selector needs to be more specific, otherwise you or someone might get confused when that happens. The value for selector can and should be written just like CSS selectors because that is how they're used. Here is the code again, but with a better value:

<Group description="Gadget Title" selector=".sidebar .title">

The selector I used only specifies gadget titles in the sidebar, but what if you also have gadgets in the footer of your blog that uses the same variables to style them? Again, just write the selectors like you would in CSS:

<Group description="Gadget Title" selector=".sidebar .title, .footer .title">

Using Variables

After you've defined your variables, you can use them with regular CSS. I'll show you some cool things you can do with variables right after I show you how to use them.

We'll be referring back to this:

<Group description="Gadget Titles" selector=".sidebar .title">
  <Variable name="gadget.title.color" description="Text Color" type="color" default="#aaa"/>
  <Variable name="gadget.title.font" description="Font" type="font" default="/>
</Group>

Did you notice that I didn't add value after default? It's because value is automagically generated and uses the default value, so I waste no time manually defining it.

To Change Fonts

Here is the regular CSS for styling gadget titles in the sidebar:

.sidebar .title {
    color: #0b5394;
    font: bold 1.2em Cambria;
}

We want to make it easy for people who use our templates to change the font. They might not know CSS, so we should let them use the template designer. The variables have been defined, so now all we have to do is use them; like this:

.sidebar .title {
color: #0b5394;
font: $(gadget.title.font);
}

When using a variable, you don't just write its name where you want the value to be. You have to place it between the parentheses of $() like I did in the example. The periods that separates the words of the variable are there only to improve readability and are not mandatory unless you defined the variable with them.

What I like about Blogger Template Designer's font feature is:

  • I don't have to copy and paste code from Google Web Fonts
  • I can use Calibri and Cambria, which I can't seem to find on Google Web Fonts for some reason.

What do you like about it?

To Change Colors

Let's use the same code above to keep things simple. Now we need to make it easy to change the color of the titles. We're just going to replace the value with the name of the variable that's defined for the color of the titles in the sidebar:

.sidebar .title {
color: $(gadget.title.color);
font: $(gadget.title.font);
}

It's that easy!

To Do Cool Things

Ah, finally! As promised, I'll show you some cool things you can do with variables. They are some things that just came to mind when I got the hang of using variables.

Play with CSS3 Gradients!

This was the first thing that I thought up. The idea was to develop a template that uses CSS3 gradients and make the gradients editable in Blogger Template Designer. I figured that since both the gradients and the color variables use hexadecimal color codes, I'd be able to simplify changing them.

Here is a sample of CSS code for gradients:

.gradient {
background: red;
background: -moz-linear-gradient(left, red 0%, red 20%, orange 20%, orange 40%, yellow 40%, yellow 60%, green 60%, green 80%, #0591D6 80%, #0591D6 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,red), color-stop(20%,red), color-stop(20%,orange), color-stop(40%,orange), color-stop(40%,yellow), color-stop(60%,yellow), color-stop(60%,green), color-stop(80%,green), color-stop(80%,#0591D6), color-stop(100%,#0591D6));
background: -webkit-linear-gradient(left, red 0%,red 20%,orange 20%,orange 40%,yellow 40%,yellow 60%,green 60%,green 80%,#0591D6 80%,#0591D6 100%);
background: -o-linear-gradient(left, red 0%,red 20%,orange 20%,orange 40%,yellow 40%,yellow 60%,green 60%,green 80%,#0591D6 80%,#0591D6 100%);
background: -ms-linear-gradient(left, red 0%,red 20%,orange 20%,orange 40%,yellow 40%,yellow 60%,green 60%,green 80%,#0591D6 80%,#0591D6 100%);
background: linear-gradient(left, red 0%,red 20%,orange 20%,orange 40%,yellow 40%,yellow 60%,green 60%,green 80%,#0591D6 80%,#0591D6 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#0591d6',GradientType=1 );
}

The CSS above produces this:

a multicolored bar

Manually changing the code for these gradients every time you want to change your theme would take a while. Luckily(thank god), we can do this:

/* First, we define our variables
<Group description="Header Gradients" selector="header::before">
<Variable name="header.gradient.first" description="First Color" type="color" default="#f00"/>
<Variable name="header.gradient.second" description="Second Color" type="color" default="#ffa500"/>
<Variable name="header.gradient.third" description="Third Color" type="color" default="#ff0"/>
<Variable name="header.gradient.fourth" description="Fourth Color" type="color" default="#008000"/>
<Variable name="header.gradient.fifth" description="Fifth Color" type="color" default="#0591d6"/>
</Group>
*/
/* Then we use the variables instead of the colors */
.gradient {
background: $(header.gradient.first);
background: -moz-linear-gradient(left, $(header.gradient.first) 0%, $(header.gradient.first) 20%, $(header.gradient.second) 20%, $(header.gradient.second) 40%, $(header.gradient.third) 40%, $(header.gradient.third) 60%, $(header.gradient.fourth) 60%, $(header.gradient.fourth) 80%, $(header.gradient.fifth) 80%, $(header.gradient.fifth) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,$(header.gradient.first)), color-stop(20%,$(header.gradient.first)), color-stop(20%,$(header.gradient.second)), color-stop(40%,$(header.gradient.second)), color-stop(40%,$(header.gradient.third)), color-stop(60%,$(header.gradient.third)), color-stop(60%,$(header.gradient.fourth)), color-stop(80%,$(header.gradient.fourth)), color-stop(80%,$(header.gradient.fifth)), color-stop(100%,$(header.gradient.fifth)));
background: -webkit-linear-gradient(left, $(header.gradient.first) 0%,$(header.gradient.first) 20%,$(header.gradient.second) 20%,$(header.gradient.second) 40%,$(header.gradient.third) 40%,$(header.gradient.third) 60%,$(header.gradient.fourth) 60%,$(header.gradient.fourth) 80%,$(header.gradient.fifth) 80%,$(header.gradient.fifth) 100%);
background: -o-linear-gradient(left, $(header.gradient.first) 0%,$(header.gradient.first) 20%,$(header.gradient.second) 20%,$(header.gradient.second) 40%,$(header.gradient.third) 40%,$(header.gradient.third) 60%,$(header.gradient.fourth) 60%,$(header.gradient.fourth) 80%,$(header.gradient.fifth) 80%,$(header.gradient.fifth) 100%);
background: -ms-linear-gradient(left, $(header.gradient.first) 0%,$(header.gradient.first) 20%,$(header.gradient.second) 20%,$(header.gradient.second) 40%,$(header.gradient.third) 40%,$(header.gradient.third) 60%,$(header.gradient.fourth) 60%,$(header.gradient.fourth) 80%,$(header.gradient.fifth) 80%,$(header.gradient.fifth) 100%);
background: linear-gradient(left, $(header.gradient.first) 0%,$(header.gradient.first) 20%,$(header.gradient.second) 20%,$(header.gradient.second) 40%,$(header.gradient.third) 40%,$(header.gradient.third) 60%,$(header.gradient.fourth) 60%,$(header.gradient.fourth) 80%,$(header.gradient.fifth) 80%,$(header.gradient.fifth) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$(header.gradient.first)', endColorstr='$(header.gradient.fifth)',GradientType=1 );
}

Now we can easily change the colors! Behold:

5 tabs and each lets you change a color

What do you think about that, eh? Tell me that's not cool! By the way, I had to zoom out a bit because the last section looked like it was cut off a bit, so I wouldn't try to group more than five variables in the same Group element.

Change A Blog's Color Theme

I told you that you can use variables with regular CSS, and you've just seen it, but did you know that you can use a variable within a <Variable/> element? I'll tell you why you may want to do this.

This blog is currently using a minima template. The border at the top, the links, some headings, and some backgrounds all use the same color. The color of the text doesn't really need to change if I decide to change the theme, but I need the other things mentioned to be the same color if I do change the theme. For situations like this, using variables in <Variable/> elements is best.

To simplify everything, I just made changing the links to also change everything else that needs to be the same color as them.

<Variable name="link.color" description="Link Color" type="color" default="#0490d5"/>
<Variable name="blog.title.color" description="Blog Title Color" type="color" default="$(link.color)"/>
<Variable name="post.title.color" description="Post Title Color" type="color" default="$(link.color)"/>
<Variable name="sidebar.title.color" description="Sidebar Title Color" type="color" default=""/>
<Variable name="tag.background.color" description="Tag Background Color" type="color" default="$(link.color)"/>
<Variable name="blog.border.top.color" description="Blog's Top Border Color" type="color" default="$(link.color)"/>

I could have instead defined the variable for the link and used the link variable with everything, like this:

/*
...
<Variable name="link.color" description="Link Color" type="color" default="#0490d5"/>
*/
a,
.blog-title,
.sidebar .title,
.entry-content h2,
.entry-content h3 {
color: $(link.color);
}
body {
border-top: 8px solid $(link.color);
}
.post footer .tag {
background: $(link.color);
}

...but just in case someone wants to change something, you'd want to do it the first way and make a variable for each.

Adjusting the Entire Blog & Sidebar Widths

Adjust widths feature of Blogger Template Designer

We need to add a b:template-skin element in the <head> of our template, preferably beneath the </b:skin> tag. It's exactly like the b:skin element, but one difference that I've found is that it is the only element that uses the tags that enables us to use the width-adjustment feature of Blogger Template Designer. Here is all the necessary code:

<b:template-skin>
  <b:variable default='960px' name='content.width' type='length'/>
  <b:variable default='0' name='main.column.left.width' type='length'/>
  <b:variable default='310px' name='main.column.right.width' type='length'/>
  <![CDATA[
  .page-wrap {
    width: $(content.width);
  }
  #sidebar-right-1 {
    width: $(main.column.right.width);
  }
  #sidebar-left-1 {
    width: $(main.column.left.width);
  }
  ]]>
</b:template-skin>

All you have to do is, of course, modify the CSS to suit your blog's own CSS.

Notes & Stuff

  • You must use double quotes " " with the <Variable/> element instead of single quotes ' ' or you'll get an error.
  • A type for text-align would be great and I think it should be added.
  • Play around with the code a bit on a demo blog and try something creative.
  • I'm currently learning some programming languages, JavaScript and Python, so I'll be able to start building some bad-ass stuff that I hope know everyone will like(it's a secret). Stay tuned...
  • Oh! And to my one subscriber, I've changed my feed to a new address. You can subscribe to the new feed by using the, well, actually, you can just click here :D
  • If you need any help understanding anything, you know what to do.

27 thoughts on "How to Make Custom Templates Support Blogger Template Designer"

  1. Anonymous 8/11/2012

    You're the Boss dude. Ur post to my favs.

    Reply
  2. Sam Routledge 8/11/2012

    I'm super happy I found this blog, I've been reading like, all your posts... I realized that I really should make my custom blog template more Blogger-like (as opposed to "hacked together") and your posts have been helping so much. Looking forward to more!

    Reply
  3. Biyan 8/16/2012

    Howdy,
    Nice post.

    I'm having trouble in grouping the variable for old template *minima*.

    "Invalid variable declaration in page skin:"

    The <variable> is easy, but error message displayed when i try to wrapped the variable within <group>

    Do you have any hints?

    Reply
    1. Shawn Raimer Jr Post author 8/16/2012

      Thanks! It must start with a capital letter. <group> won't work, but <Group> will. These things are case sensitive. That seems to be your problem.

      <Group description="Name" selector=".selector">
      </Group>

      Reply
    2. Biyan 8/16/2012

      Ah, Thank You. Nice share btw.
      The following variable also worked for me:

      <Variable name="body.background" description="Body Background" type="background"
      color="transparent" default="$(color) none repeat scroll top left" value="transparent url() repeat fixed top center"/>

      Reply
    3. Shawn Raimer Jr Post author 8/16/2012

      Thanks for reminding me. I completely forgot to add type="background" to the post and show how to add background images.

      Reply
  4. Shirley Tay 8/20/2012

    Altho' the codes are making me dizzy since I hate codes, this blog is awesome! Thks so much Shawn, for guiding me on my html & I'm following you now!

    Reply
  5. Michael Angeroth 11/17/2012

    I'm just a little starter Blogger, do you know where I can get a custom template that already supports this, HTML scares me.

    Thanks

    Reply
      1. Shawn Post author 2/02/2013

        I forgot to add: I don't know or really trust anywhere else because I've seen people with malicious links, scripts, and ads on their blog, which was inserted after installing a template they got from a website offering "free" blogspot templates. Not only that, but other places just had really ugly or half-assed templates, and I doubt they support the template designer.

        I'll let you know of other good places to look if I find any.

        Reply
  6. RJ 4/23/2013

    I don't understand why I get this error "Invalid variable declaration in page skin: The skin variables could not be parsed as they are not well-formed."

    Here are the two sections of code:







    h3.post-title { color:$(post.title.color); }
    h3.post-title a, h3.post-title a:visited { color:$(post.title.link.color); }
    h3.post-title a:hover { color:$(post.title.hover.color); }

    ANY IDEAS ON WHAT TO FIX SO THIS WORKS?

    Reply
  7. RJ 4/23/2013

    I figured out the solution to my question. It appears that when you mixed the old blogger with new blogger (when updating my template), you have to include a trailing / at the end of ALL Variable declarations. After doing that, then Group tag works perfectly.

    Example of including trailing forward slash :


    However, I am still confused how to figure out what to put in Selector tag. You have different examples but I don't understand where/how you figured out what to put in Selector=" "

    Reply
  8. RJ 4/23/2013

    Again, I answered my own question it appears. For the Selector tag, you can include either css elements. For example,



    refers to this code further down on my page, which gets a red box placed around it in Editor:

    #pages ul li { display: block; float: left; height: 44px; }

    Alternately, I could include other elements or a combination of the two. For example,



    refers to this code further down on my page:

    #pages ul li { display: block; float: left; height: 44px; }
    .pages { background-color: #FFFFFF; }

    I hope that helps anyone who has questions about it.

    Reply
  9. Breanna 5/15/2013

    This is pretty much exactly what I was looking for since I'm attempting to build a blogger template from scratch. But, how do I get #sidebar-left-1 and #sidebar-left-2 to actually appear side by side?

    Reply
    1. Shawn Post author 5/16/2013

      I don't think you can do that manually. It looks like you can only do that using the template designer...sadly. This is the same thing I wanted to do when I started messing with Blogger's templates. :)

      Reply
      1. Breanna 5/28/2013

        I don't actually see a way to do this in the template designer either. When I go to the Layout tab where I would normally choose where the columns go, it says "not applicable for this template." How do I make this part of the designer functional?

        Reply
        1. Shawn Post author 5/29/2013

          It looks like you must have the code for both left and right sidebars in your template for that part of the designer to function.

          Left:
          <macro:include id='main-column-left-sections' name='sections'>
          <macro:param default='0' name='num'/>
          <macro:param default='sidebar-left' name='idPrefix'/>
          <macro:param default='sidebar' name='class'/>
          <macro:param default='true' name='includeBottom'/>
          </macro:include>

          Right:
          <macro:include id='main-column-right-sections' name='sections'>
          <macro:param default='0' name='num'/>
          <macro:param default='sidebar-right' name='idPrefix'/>
          <macro:param default='sidebar' name='class'/>
          <macro:param default='true' name='includeBottom'/>
          </macro:include>

          Reply
  10. Ahmad Ousaf 6/16/2013

    Man you really did a great job
    I had been searching for such an awsome quality content on Blogger.Great man Please keep on writing such articles
    I will read out your entire blog

    Reply
  11. Brian Blystone 6/19/2014

    Really great stuff. Thanks for doing this for the "new coding" community. It's really helping me to revamp our current site.

    Reply

Leave a reply