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

design
新範本的設計工具裡面,其中只有旅遊這個範本在側邊欄的項目中做了符號,其他範本都沒有。
Tiffy現在的範本就是使用旅遊
所謂的符號與圖案,Tiffy指的是如圖下的成果:

旅遊範本 圖案浮水印 符號

左圖是我把旅遊範本中的實心原點改成圖片。右圖則是浮水印版本從原來項目中沒有的符號另外加上去。
修改方式是:
設計修改HTML卷軸往下拉,直到你看到你新增的小工具列表
01
比如說你現在想要修改的是最新文章,在程式碼中他被定義為 Feed1
code2
樣式碼太長的話直接 使用搜尋(Ctrl+F) 尋找
修改樣式的樣式碼CSS要在]]> 前加入。
#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 則留言

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *