夏吱吱: 個性化側邊欄上的項目加上符號/圖案

2012年2月23日星期四

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

左圖是我把旅遊範本中的實心原點改成圖片。右圖則是浮水印版本從原來項目中沒有的符號另外加上去。
修改方式是：
設計→修改HTML卷軸往下拉，直到你看到你新增的小工具列表

比如說你現在想要修改的是最新文章，在程式碼中他被定義為 Feed1

樣式碼太長的話直接使用搜尋(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 是列表項，圖片代替的地方就放這裡。

這樣就可以取代符號變成圖示了。
那如果是本來沒有的符號想要加上符號的話，
則是加入


<code> #Feed1 ul{

list-style:circle;

}</code>

其中種類有分：
none (沒有)
disc (全黑圓圈)
circle (空心圓圈)
square (正方形)

加入書籤 :

網頁