筆記│note – New Blogger templete CSS reference

http://4.bp.blogspot.com/_oEqpzBbNpac/TChvKt53LnI/AAAAAAAAAm0/ibXb20DlZSg/s1600/main+color-theme.jpg
In Various Definitions
Variable name - keycolor (主要顏色主題)
Variable name – body.background (主頁背景) defult (預設圖) value (目前設定)
[blogger[5].jpg]
Group description:Page text
Variable name - body font (頁面字體)
Variable name – body.text.color (字體顏色)
Group description:Backgrounds
Variable name – body.background.color (背景顏色)
Variable name – header.background.color (檔頭背景顏色)
Variable name – post.background.color (文章背景顏色)
Group description:Links
Variable name – link.color (連結顏色)
Variable name – link.visited.color (已點閱的連結顏色)
Variable name – link.hover.color (游標停留的連結顏色)

Group description:Blog title
Variable name – header.font (檔頭(部落格)字體)
Variable name – header.text.color (檔頭字體顏色)
Group description:Tabs text
Variable name – tabs.font (標籤字體)
Variable name – tabs.text.color (標籤字體顏色)
Variable name - tabs.selected.text.color (所選文字顏色)
Group description:Tabs background
Variable name – tabs.background.color (標籤背景顏色)
Variable name - tabs.selected.background.color (所選文字的背景顏色)
Variable name - tabs.separator.color (分隔線顏色)
Group description:Post
Variable name – post.title.font (文章標題字體)
Variable name – post.footer.text.color (頁尾文字顏色)
Variable name – post.border.color (邊框顏色)
Group description:Gadgets
Variable name – widget.title.font (小工具標題字體)
Variable name – widget.title.text.color (小工具標題顏色)
Group description:Footer
Variable name – footer.text.color (頁尾文字顏色)
Variable name – footer.widget.title.text.color (頁尾小工具標題文字顏色)
Group description:Footer Links
Variable name – footer.link.color (頁尾連結顏色)
Variable name – footer.link.visited.color (頁尾已點閱的連結顏色)
Variable name – footer.link.hover.color (頁尾游標停留的連結顏色)
以上可以直接在範本設計工具修改

[content-margin1[5].jpg]
Variable name – content.margin (內容《半透明部分》與導覽列(上方)之間的距離)  圖上
Variable name – content.padding (內容與檔頭(上方)之間的距離)
Variable name – content.background (內容背景)
Variable name – content.border.radius (內容邊框的圓角)
Variable name – content.shadow.spread
[hadder-padding[5].jpg]
Variable name – header.padding (檔頭文字跟檔頭(左邊)之間的距離) 圖上
Variable name – header.background.gradient (檔頭背景漸變)
Variable name – header.border.radius (檔頭邊框的圓角)

很多blogger都還是使用著舊的範本,只有少數的剛搬家的像是我,才用新範本,新範本跟舊範本不一樣,舊的有好多教學,新的比較少,blogger的CSS又很特別,不仔細閱讀裡面各個代表的還真不知道要怎麼下手,比如說我想要讓我的側邊欄的標題都有背景顏色,我想要以新的範本去做修改,變成自己的…

6 則留言:

  1. 你這篇好詳細啊,我最近也在改blog版面,不過想請問像是要改部落格描述文字大小,variable name應該是什麼呢?我試了好多次,就是無法把字改小一點。像是如果你要改你的“旅行//日記//學習筆記//電影//閱讀//模擬市民//blog tools//“字體變小,您知道應該怎麼改嗎?謝謝

    回覆刪除
  2. Dear Patricia:

    如果你想把描述文字大小改小一點,他可以在CSS語法裡面找到關於 .description { 那邊做修改 修改的數值就可以是 百分比或者是像素的單位。
    比如說設定小一點那你可能會寫
    #header .description {font-size:10px} 這樣^^

    回覆刪除
  3. 我有找到你講的,不過它是顯示像這樣,這樣我該怎麼改?和你給我的,有點不太一樣說@@ 再次謝謝。

    .Header .description {
    font-size: $(description.text.size);
    color: $(description.text.color);

    回覆刪除
  4. Dear Patricia:

    如果他的數值是前面有$的符號 那代表他在variable name 有設定。
    那麼你就在variable name裡找找看,找一下description.text.color 的敘述,
    例子:
    variable name="description.text.color" description="解釋該名稱" default="#預設色碼" value="現版型設定色碼"

    那麼你就在value地方做修改,比如說現在是白色,你想換成是灰色,那你就打#444444 之類這樣,description.text.size的意思也是一樣的。數值可能就改成百分比的大小或者是多少的像素

    回覆刪除
  5. OK,我再試試看,非常感謝^^

    回覆刪除
  6. Dear Patricia:

    不客氣唷,但願能幫上一份忙~^^
    有問題請再告訴我~^^

    回覆刪除

【訪客沒有帳號請使用名稱/網址留言。】
【匿名者的留言可能會比較慢回覆】
【請不要留下注音文或者是火星文,謝謝。】

INSTAGRAM FEED