花了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

请高手们下载以作进一步整容。