模板教程之 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>

更新缓存即可，修改后的效果如下图所示：