模板教程之 UCHome 左側邊欄的背景色和字號修改

很多站長想給自己的站點做一個和官方不一樣的，個性的模板，從最簡單的開始做起，教大家如何把首頁左側邊欄的背景色和字號修改為自己想要的效果。

修改前的效果如下圖所示：

1 、修改背景色

以把紅色框內的背景色改為藍色為例講解，首頁打開./template/default/image/目錄，找到 appSidebar_top_bg.gif 、 appSidebar_bg.gif 和 appSidebar_bottom_bg.gif 這三個圖片，用圖型編輯工具進行處理，如 Adobe Photoshop 改為自己喜歡的顏色，這三個圖片的大小是 140*10 不要改變圖片的大小。

圖片修改後保存，登錄 UCHome 後台更新緩存。

修改後的效果如下圖所示：

2 、修改文字大小

打開./template/default/style.css 找到

#app_sidebar { float: left; margin: 0 20px 0 0; padding: 10px 0 0; width: 140px; background: url(image/appSidebar_top_bg.gif) no-repeat 0 0; font-size: 14px; }

  • #app_sidebar { float: left; margin: 0 20px 0 0; padding: 10px 0 0; width: 140px; background: url(image/appSidebar_top_bg.gif) no-repeat 0 0; font-size: 14px; }<P></P>

修改為

#app_sidebar { float: left; margin: 0 20px 0 0; padding: 10px 0 0; width: 140px; background: url(image/appSidebar_top_bg.gif) no-repeat 0 0; font-size: 12px; }

  • #app_sidebar { float: left; margin: 0 20px 0 0; padding: 10px 0 0; width: 140px; background: url(image/appSidebar_top_bg.gif) no-repeat 0 0; font-size: 12px; }<P></P>

更新緩存即可，修改後的效果如下圖所示：