花了2天时间和L胖一起搞了这套皮肤,虽然不是十分漂亮,但个性化定制功能相对于其他几套来说,还是很方便的。
下面我简单得讲下关于这套皮肤的定制功能:
首先请大家进入管理-选项-配置,在皮肤选择项中选择shalo这套皮肤。
[普通篇]
模版的图片都是可以自定义的,比如头部大背景图,导航菜单的底图,左边栏目的背景图,左边栏目名底图,正文标题图,正文时间背景图,BLOG脚注背景图以及BLOG总背景图,等等。
大家只要把DIY好的图片上传到自己的空间中,记录下图片地址,然后依次点 管理-选项-配置,在自定义CSS 筐中输入以下代码,即可对shalo皮肤彻底进行改造。

/*BLOG总背景图 */
body { background-image: url(
http://blog.cnbb.com.cn/skins/shalo/images/bg.jpg);}
/*头部大背景图 参考尺寸890x130 */
#head { background-image: url(
http://blog.cnbb.com.cn/skins/shalo/images/title.jpg);}
/*导航菜单的底图 890x30*/
#nav { background-image: url(
http://blog.cnbb.com.cn/skins/shalo/images/menubg.jpg);}
/*正文标题图 参考尺寸24x21 */
.posttitle{ background-image: url(
http://blog.cnbb.com.cn/skins/shalo/images/point.jpg);}
/*正文时间背景图 参考尺寸445x33 */
.itemdesc{ background-image: url(
http://blog.cnbb.com.cn/skins/shalo/images/datebg.jpg);}
/*左边栏目的背景图 */
#left{ background-image: url(
http://blog.cnbb.com.cn/skins/shalo/images/leftbg.jpg);}
/*BLOG脚注背景图 参考尺寸900x60 */
#foot{ background-image: url(
http://blog.cnbb.com.cn/skins/shalo/images/footbg.jpg);}
/*左边栏目名底图 参考尺寸220x24 */
.leftbox{ background-image: url(
http://blog.cnbb.com.cn/skins/shalo/images/leftbarbg.jpg);}
/*正文背景图*/
#right{ background-image: url(
这里写你的图片地址);}
红字部分请填入你想替换的图片地址。
[进阶篇]
如果你不能满足于仅仅对图片的更换,或者你希望对总体配色,字体等来个彻底的更换,那么请你继续往下看。
这一步需要一定CSS知识。
进入自定义CSS筐,配写以下代码:
/*背景色*/
#frame{background-color:
#FFFFFF;}
#main{background-color:
#FFFFFF;}
body {
font-family: "宋体"; /*总字体*/
font-size: 12px; /*总字号*/
line-height: 20px; /*总行距*/
color: #000000; /*正文字色*/
}
a{}和 a:hover{}分别为链接字体配置以及链接字体激活时配置,请参照body{}作相应修改。
相应CSS参考:
http://blog.cnbb.com.cn/skins/shalo/style.css[高级篇]接下来的修改需要你对CSS已经DIV布局有一定的了解。
下图是本模版的总布局图:

左边区块定义为.leftbox{}
相应CSS:
http://blog.cnbb.com.cn/skins/shalo/style.css
请高手们下载以作进一步整容。