用于布局的自定义 CSS 标记
要搭配使用模板设计器和博客模板的 CSS，请遵循以下准则。
设置变量
在代码的 <head> 部分，您需要一对 <b:skin> </b:skin> 标记。
CSS 样式声明会插在这对标记之间，附带变量名称（使您的设计能够在“字体和颜色”页面中发挥作用）。
包含在 /* 和 */ 注释标记之间的 CSS 代码不会显示在您的博客中。
此处会有一个变量列表，每个您希望能在“字体和颜色”标签中修改的字体或颜色都有一个变量。要让上述示例能够显示信息，每个变量都不可或缺，以下是针对每个变量的说明：
- name - 此名称可以包含字母或数字。模板中的每一个名称必须是独一无二的。
- description - 添加说明以显示在“字体和颜色”部分。
- type -“字体”或“颜色”。
- default - 默认值。对于颜色，此变量应是十六进制颜色代码，如 #FF0066。对于字体，此变量会是 font-style font-weight font-size font-family 格式的列表。
使用变量
设置变量后，如果您想使用某个变量的值，请在 b:skin css 中输入 $variable_name。
在上述示例中，我们创建了一个名为 bgcolor 的变量，并将其设置为白色 (#fff)。在下面的代码中，我们设置了 background: $bgcolor。 这会使背景变成白色，您可以在“字体和颜色”部分中对其进行更改。
请注意：您无需为其他类型的 CSS 属性创建变量。这些属性可以如往常一样包含在 CSS 中（如同上述示例中的 margin: 和 padding: 属性）。
布局专用的页面元素标记
布局主题背景的 <body> 部分由版块和小部件组成。
- 版块用于划分网页的各个区域，如边栏、页脚。
- 小部件是页面元素，如网页、友情链接或者可通过“页面元素”标签添加的任何其他元素。
您可以根据需要在主题背景的版块周围加入任何 HTML。
版块
主题背景中的每个版块都有开始和结束标记，外观如下：
<b:section id='header' class='header' maxwidgets="1" showaddelement="no">
</b:section>
版块只能包含小部件。要在版块内插入额外代码，请将该版块拆分为两个或更多新版块。
小部件
小部件以单个标记表示，此标记只起到占位符的作用，指示应如何在“页面元素”标签中处理小部件。
下面列举了一些小部件的标记示例（一个表示页面标题，一个表示列表）：
<b:widget id="header" type='HeaderView' locked="yes"/>
<b:widget id="myList" type='ListView' locked="no" title="My Favorite Things"/>
<b:widget id=”BlogArchive1” locked=”false” mobile=”yes” title=”Blog Archive” type=”BlogArchive”/>
注意：在已发布的博客中，所有 <b:section> 和 <b:widget> 标记都将替换为具有指定 ID 的 <div> 标记。因此，您可以在 CSS 中引用 div#header 或 div#myList 一类的标记。