blogger


用於布局的自定義 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: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 一類的標記。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM