如要在範本設計工具中使用網誌範本的 CSS，請遵守以下規範。
設定變數
您必須在程式碼的 <head> 區段中加入一對 <b:skin> </b:skin> 標記。
CSS 樣式宣告必須放置在這對標記之間，並附帶變數名稱，這樣一來您的程式碼才能在「字型和顏色」頁面中發揮作用。
範例
<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>包含在 /* 和 */ 註解標記中的 CSS 程式碼不會顯示在您的網誌上。
這裡要列出必要的變數。在「字型和顏色」分頁上，每一個可供設定的字型或顏色都要有一個對應的變數。每個變數都不可或缺，才能傳達上述範例中顯示的資訊，說明如下：
- name：可包含字母或數字。在範本中使用的名稱不得重複。
- description：新增要在「字型和顏色」部分中顯示的說明。
- type：「字型」或「顏色」。
- default：預設值。針對顏色，此變數必須是十六進位顏色代碼 (例如 #FF0066)。針對字型，此變數則是 font-style font-weight font-size font-family 格式的清單。
使用變數
變數設定完成後，如要使用某一個變數值，請在 b:skin CSS 中輸入 $variable_name。
變數類型
範本設計工具可協助您編輯特定的 CSS 變數類型組合。如何設定變數類型：
- 在範本設計工具中，顏色變數會提供調色盤，供您選擇顏色。
- 在範本設計工具中，字型變數會提供字型大小、粗體或斜體等相關設定選項。
在上述範例中，有一個名稱為 bgcolor 的變數設為白色 (#fff)。下一段程式碼中的 background: $bgcolor 會將背景顏色設定為白色，而您可以在「字型和顏色」部分中進行變更。
注意：您不需要為其他類型的 CSS 屬性建立變數。一般來說，這些變數可包含在 CSS 中 (如上述範例中的 margin: 和 padding: 屬性)。