問題
使用 TicTac Blue 這個 template 會讓 li 的前置符號都變成 tictac_blue.gif 這個 icon,因此原本期望 ol + li 會出現的編號列舉階層就失去作用了!
解決方法
若希望保留該功能的話,可以去修改範本。將 L.109 ~ L.115(見下方程式碼片段)註解掉!若只註解掉這部份,會發現右方 side bar 的 li 就出問題了,像是 tictac blue icon 會蓋到文字(標籤、Links 等都會遭殃),因此我們還得去修改範本的 L.340 的 .sidebar li,幫它加上被我們註解掉的屬性,但不要加上 margin-bottom: 3px;,否則 tictac blue icon 會跑出範圍。
/*
li {
list-style: none;
padding-left: 14px;
margin-bottom: 3px;
background: url(http://www.blogblog.com/tictac_blue/tictac_blue.gif) no-repeat 0 6px;
}
*/
.sidebar li {
list-style: none;
padding-left: 14px;
background: url(http://www.blogblog.com/tictac_blue/tictac_blue.gif) no-repeat 0 5px;
}
另外還受影響的有: ul + li 。因為原本的 li 被註解掉了, ul 下會出現的 style 圖案也就消失了,因此我們可以新增像是下面的 css selector:
ul li {
list-style: none;
padding-left: 23px;
margin-bottom: 3px;
background: url(http://www.blogblog.com/tictac_blue/tictac_blue.gif) no-repeat 0 6px;
}
不要嘗試著直接修改 ul selector,因為那樣會連 sidebar 的部份一起更動到,這會讓 archive 部份變醜 :)
更新
- 2008/01/24,修改 ol + li 失去數字階層。
- 2008/04/05,修改 ul + li 失去 style 圖案。