筆記│個性化側邊欄上的項目加上符號/圖案


design
新範本的設計工具裡面,其中只有旅遊這個範本在側邊欄的項目中做了符號,其他範本都沒有。
Tiffy現在的範本就是使用旅遊
所謂的符號與圖案,Tiffy指的是如圖下的成果:
旅遊範本 圖案 浮水印 符號
左圖是我把旅遊範本中的實心原點改成圖片。右圖則是浮水印版本從原來項目中沒有的符號另外加上去。
修改方式是:
設計修改HTML卷軸往下拉,直到你看到你新增的小工具列表

01
比如說你現在想要修改的是最新文章,在程式碼中他被定義為 Feed1
code2
樣式碼太長的話直接 使用搜尋(Ctrl+F) 尋找 </b:template-skin>
修改樣式的樣式碼CSS要在]]></b:template-skin> 前加入。

#Feed1 ul {
list-style:none;
}
#Feed1 ul li{
background:url(‘圖片網址') no-repeat 0;
margin-left:-15px;
padding:0 0 0.8em 20px;
}
其中,ul 是指項目列表,在我使用的旅遊範本裡,預設使用列表 ● 這樣的圖示,我要先把它弄掉。li 是列表項,圖片代替的地方就放這裡。

這樣就可以取代符號變成圖示了。
那如果是本來沒有的符號想要加上符號的話,
則是加入
#Feed1 ul{
list-style:circle;
}
其中種類有分:
none (沒有)
disc (全黑圓圈)
circle (空心圓圈)
square (正方形)

以上。

留言

  1. wow 這招不錯,而且你加的還是 gif 圖案,會移動的箭頭,實在太可愛了,感謝分享這招,學起來了~~

    回覆刪除

張貼留言

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

熱門文章