
<b:skin> and <b:template-skin> are two different tags in same category, dress-up.
Use of <b:skin>:
The <b:skin> tag contains the CSS style code that is for blogger template.<b:skin> Syntax:
<b:skin>
<![CDATA[
]]>
</b:skin>
Use of <b:template-skin>:
The <b:template-skin> tag also contains CSS code but this CSS code will not be applied to the theme. It will be applied to the layout section of your theme in layout editor of blogger dashboard.<template-skin> Syntax:
<b:template-skin>
<![CDATA[
]]>
</b:template-skin>
Key Points of Dress-up Tags:
- The markers CDATA is nested in the tags. This indicates that the content will not be analyzed and that the b:language will not be executed. Instead, an alternative language has been implemented. Learn more about CDATA.
- The tag <b:skin> is required in all themes.
- The tag <b:template-skin> is not allowed in Layouts Version 1.
- Tags <b:skin> and <b:template-skin> can not be nested. They must be positioned in the header of the XML file between <head> and </head>.
- The tags <b:skin> and <b:template-skin> can only contain CSS declarations and variables.
The most interesting part is the part reserved for the definition of variables. It allows you to predefine values and create forms in the theme creation tool.
Dress-up Variables:
The skin variables are specific to each Blogger theme. Thanks to them, the administrator of the blog can very quickly personalize the appearance of the theme without having to resort to CSS knowledge.Creating dressing variables when designing a theme for distribution, is, therefore, a very big selling point to convince its prospects.
The skin variables are defined in the theme's XML editor, between the tags. They allow you to add forms to the theme creation tool in the "background", "theme", "Column width", "Advanced" sections. <b:skin></b:skin> The values which are modified via the theme creation tool are "reprinted" in the definition and automatically returned to the CSS whose attribute value is a datum corresponding to the name of the variable.

Variables Group:
The tag <Group> has the distinction of "grouping" several declarations in the same tab in the theme creation tool.
The syntax for grouping Variables:
<Group description="description" selector="selector">
<!-- Variable Declerations Here-->
</Group>
Points to Focus On:
- The tag <Group> is not required.
- A tag <Group> can only contain tags <Variable>.
- Tags <Group> cannot be nested.
- Each tag <Group> must contain 2 attributes: description and selector.
Attribute and Description:
Attribute | Description |
---|---|
description | A short description of the group. It is displayed in the "Advanced" tabs in the theme creation tool. |
selector | HTML element and / or CSS class of an HTML element. This parameter displays the targeted area in the preview of the theme creation tool. |
Variable Declerations:
Variable tags ( <Variable> ) contain the values of the variables. Type variables COLOR, LENGTH and FONT, allow you to display settings form in the theme creation tool.The syntax for Variable Declaration:
<Variable name="name" description="description" type="type" default="value" value="value" />
In the above syntax code, the highlighted text is an attribute or parameter value as described as under.
Attribute | Description | Strictness |
---|---|---|
name | The name can only contain letters or numbers and must be unique. Exception: The character period ( . ) can be used. This name will be used to extract the value of the variable. See the chapter Data output . | Mandatory |
description | A short description which may contain spaces. This description will be displayed in the tabs of the theme creation tool for the definitions of type variables COLOR, FONT and LENGTH. Blogger has a library of predefined descriptions which are automatically translated according to the language of the interface. | Mandatory |
type | Determines the type of the variable value. See in the table below. | Mandatory |
default | The default value of the variable. If the theme is reset from the theme creation tool, this value will be restored automatically. | Mandatory |
value | The current value of the variable. It changes automatically when the user changes the values from the theme creation tool. The new value is "printed" in the xml when saving. | Mandatory |
color | To be used in a type variable BACKGROUND. The expected value can be a color code (hexadecimal / rgb / rgba) or the name of a type variable COLOR. | Mandatory |
red | To be used in a type variable COLOR. The expected value must be the red RGB color code (number between 0 and 255). | Optional |
green | To be used in a type variable COLOR. The expected value must be the green RGB color code (number between 0 and 255). | Optional |
blue | To be used in a type variable COLOR. The expected value must be the blue RGB color code (number between 0 and 255). | Optional |
alpha | To be used in a type variable COLOR. The expected value must be the level of transparency of the color (number between 0.0 and 1.0). | Optional |
family | To be used in a type variable FONT. The expected value should be the name of the font. | Optional |
size | To be used in a type variable FONT. The expected value should be the font size. | Optional |
min | To be used in a type variable LENGTH. The expected value must be the minimum value that the variable can reach (Size in px). | Optional |
max | To be used in a type variable LENGTH. The expected value must be the maximum value that the variable can reach (Size in px). | Optional |
hideEditor | This attribute is used to hide the form in the design tool. Values: true or false. Applies only to type variables COLOR, LENGTH and FONT. | Optional |
Points to Focus On:
- Multiple <Variable> tags can be nested inside one tag <Group>.
- Tags <Variable> cannot nest.
Types of variables as attribute values for Variable Tags:
Variable | Description |
---|---|
COLOR | Hex Color. The expected value must be a hexadecimal color code. The variable that will receive the name key color will define the main color theme. The user can modify the theme via the theme creation tool, in the "Background" pane. |
FONT | The font format. The expected values are: font-style, font-weight, font-size and font-family. |
LENGTH | Length. The expected value must be a number whose unit of measure is px or em. The unit of measure is not required, when the value is equal to 0. The form in the theme designer is only available in Layouts Version 3. |
BACKGROUND | Background. The expected values are: background-color, background-image, background-repeat, background-position and background-attachment. The variable with the name body.background will be used by default in the theme creation tool, in the "Background" pane to modify the parameters of the background image. |
URL | A web address or url. url(https://...) or (https://...) |
STRING | Any character string. |
AUTOMATIC | Automated value |
Type variables COLOR, LENGTH and FONT allow the display of a form in the theme designer, in the "Advanced" pane. The display of these forms may vary depending on:
- The Layouts version.
- The nesting or not of the variable in a group.
- The value of the attribute hideEditor contained in the variable.
Calling a Variable:
When a variable is defined, it is possible to extract its value from it in the area reserved for CSS or/and outside the tag <b:skin>. In the tag <b:skin>, just takes the name of the variable, enclose it in parentheses ( (...) ) and add the prefix $. For example, the variable whose name is link.color, its output syntax will be $(link.color).Keep in mind: Parentheses are only required if the variable name contains a period or fullstop.
Example Usage:
This is the example using of how to define and call a variable and what will be the HTML output of that variable.Defining A Variable:
Here, to define a variable you should be having code like this.<Variable name="link.color" description="Link Color" type="color" default="#888888" value="#888888" />
Calling A Variable:
To call a variable we use its name as described above.a:link{color: $(link.color)}
HTML Output:
The HTML output of the above variable call will be like this.a:link {
color: #888888;
}
When you want to export or call the value of variable outside of <b:skin>, the XML language takes over its rights and the data can be treated like other data from any dictionary.
link.color becomes data:skin.vars.link_color.
If the variable name contains a period, it becomes an underscore (_).
Example Usage for XML Tag:
<data:skin.vars.link_color/>
<!-- This XML Tag will call the variable -->
Usage in an expression:
<div expr:style='"color: " + data:skin.vars.link_color + ";"'>
</div>
HTML output:
<div style='color: #888888;'>
</div>
Additional Data Parameters will be beneficial after this article must read that.
Post a comment
Was this article useful? Please Leave Your Feedback by writing what's in your mind, below.