How to Customize CSS tags for layouts

-

Customize CSS tags for layouts

To use the template designer with the CSS of your blog’s template, there are a few guidelines to follow.


Set up the variables

In the <head> section of your code, you'll need to have a pair of <b:skin> </b:skin> tags.

The CSS style declarations will go in between those tags, along with the variable names that make your design work with the Fonts and Colors page.

Example

<head>

...
<b:skin>
 <style type='text/css'>
 /*
  * Variable definitions:
  *  <Variable name='bgcolor' description='Page Background Color'
      type='color' default='#fff'/>
  */
 body {
   background: $bgcolor;
   margin: 0;
   padding: 40px 20px;
 }
 </style>
</b:skin>
</head>

The CSS code enclosed in /* and */ comment tags won't be shown on your blog.

There will be a list of variables here, one for each font or color that you want to be editable from the “Fonts and Colors” tab. Each variable is required to have the information shown in the example above and described here:
  • name – May contain letters or numbers. Each name in your template must be unique.
  • description – Add a description to appear in “Fonts and Colors" section.
  • type – "Font" or "color."
  • default – The default value. For colors, this should be a hexadecimal color code, for example  #FF0066. For fonts, it will be a list of the form font-style font-weight font-size font-family.

Use the variables

After the variables are set up, when you want to use the value of a variable, enter $variable_name in the b:skin css.


Variable types

The template designer has editing support for a specific set of CSS variable types. To set the type of variable:
  • color variables will provide a color palette for selection in the template designer.
  • font variables will provide a font selection, with size and bold or italics options, in the template designer.
In the example above, there is a variable called bgcolor, which is set to white (#fff). In the next code, it says: background: $bgcolor. This turns the background white, and you can change it in the “Fonts and Colors” section.

Note: You don’t need to create variables for other types of CSS attributes. These can be included in the CSS just as they normally would be (as with the margin: and padding: attributes in the example above).

Comments

Post a Comment

Popular posts from this blog

Add Custom Ads.Txt File in Blogger?

-
The advertisement is the primary key for a publisher to generate money. The ads can be of many types and there are many ad providers that help publishers to make money from their blogs. But, it is very necessary to check the authenticity of the ads that are shown on a particular website. The verification of ads shown on a website can be achieved by ads.txt file. An ads.txt file secures both publisher and advertiser from frauds or viruses. This is essential to add the ads.txt file on your website or blog, so here we are discussing how you can easily add the ads.txt file in your BlogSpot blog. Before adding ads.txt file on your blogger blog, let us know what exactly is ads.txt and how is it going to benefit us. What is Ads.txt File? The “Ads.txt” is simply a text file that can be placed on your blog's server and carries information about the advertising networks used by the blog's owner and the owner authorised these ads networks to show ads on the website. The main idea b...
Read more

Add Page Elements Tags for Layouts

-
Page elements tags for layouts The <body> section of a layout theme is made up of sections and widgets. Sections are areas of your page, such as a sidebar, footer. A widget is a page element such as a page, a blogroll, or anything else you can add from the “Page Elements” tab. You can include any HTML you like around the sections in your theme. Sections Each section in your theme has opening and  closing tags that look something like this: <b:section id='header' class='header' maxwidgets="1" showaddelement="no"> </b:section> <b:section> tag attributes id – (Required) A unique name, with letters and numbers only. class – (Optional) Common class names are “navbar,” “header,” “main,” “sidebar,” and “footer.” If you change themes later, these names help Blogger determine how to transfer your content. maxwidgets –- (Optional) The maximum number of widgets to allow in this section. If you don't spe...
Read more

Add Widget Tags for Layouts for Blogger

-
Widget Tags for Layouts When you're using the Layouts theme to create the body section of your blog, you can use widgets to add page elements like pictures and a blogroll. Types of tags This section describes the HTML you can use inside of the closing tags. Includes (b:include) When to use includes Includes are most useful if you have a section of code that you want to re-use in several different places, or only include in certain circumstances. To do this, write the content inside a b:includable, then use b:include wherever you want it to appear. Format <b:includable id='main' var='thiswidget'> [insert whatever content you want here] </b:includable> Attributes id (required): A unique identifier made up of letters and numbers. Each widget must have one includable with id='main'. var (optional) An identifier made up of letters and numbers, for referencing data within this section. If you make more includables with d...
Read more