b:skin and b:template-skin Tags - Blogger Tags References

Dress-up Tags - Blogger Tags References
The dress-up tags, <b:skin> and <b:template-skin> are tags or elements inserted in the header of the Blogger theme XML file, the content of which is composed of a series of variable declarations and CSS interacting with the theme creation tool.
<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.
<b:skin> accommodates the majority of the CSS of the blog, while <b:template-skin> is often reserved to define the CSS of the "Layout" tab in the dashboard.
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.
Dress-up Tags - Blogger Tags References

Variables Group:

The tag <Group> has the distinction of "grouping" several declarations in the same tab in the theme creation tool.
Dress-up Tags - Blogger Tags References

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:

AttributeDescription
descriptionA short description of the group. It is displayed in the "Advanced" tabs in the theme creation tool.
selectorHTML 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.
AttributeDescriptionStrictness
nameThe 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
descriptionA 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
typeDetermines the type of the variable value. See in the table below.Mandatory
defaultThe default value of the variable. If the theme is reset from the theme creation tool, this value will be restored automatically.Mandatory
valueThe 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
colorTo 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
redTo be used in a type variable COLOR. The expected value must be the red RGB color code (number between 0 and 255).Optional
greenTo be used in a type variable COLOR. The expected value must be the green RGB color code (number between 0 and 255).Optional
blueTo be used in a type variable COLOR. The expected value must be the blue RGB color code (number between 0 and 255).Optional
alphaTo 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
familyTo be used in a type variable FONT. The expected value should be the name of the font.Optional
sizeTo be used in a type variable FONT. The expected value should be the font size.Optional
minTo be used in a type variable LENGTH. The expected value must be the minimum value that the variable can reach (Size in px).Optional
maxTo be used in a type variable LENGTH. The expected value must be the maximum value that the variable can reach (Size in px).Optional
hideEditorThis 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:

VariableDescription
COLORHex 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.
FONTThe font format. The expected values are: font-style, font-weight, font-size and font-family.
LENGTHLength. 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.
BACKGROUNDBackground. 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.
URLA web address or url. url(https://...) or (https://...)
STRINGAny character string.
AUTOMATICAutomated 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.

Wrap UP:

That's all about dressing-up tags. You can also set the description of Variable in different languages if you want that will be beneficial for people to understand in their Native language.

Post a Comment

Was this article useful? Please Leave Your Feedback by writing what's in your mind, below.

Recent Comments

{getWidget} $results={3} $label={comments} $type={list}