关于SpaceBuilder简单的皮肤制作方式

 SpaceBuider是一款比较优秀的.net博客系统,偶也是第一次做SpaceBuider的皮肤，因为很喜欢SB的架构和功能，也就花了点心思研究，虽然它有一些bug，但是从基本的功能和框架来看，还算是比较成熟的东西。不过运行的速度有待提高,特别是编辑器的载入,希望不会成为它的硬伤.

废话不多说，切入正题：

官方因为需要解决用户反馈的BUG，可能时间上有限，一直都没有出相关皮肤的制作文档，我在这里把自己制作皮肤的一些小的经验提供给大家，如果你有更好的办法请大家多交流

首先，要知道皮肤文件的基本目录结构；

皮肤文件分2种，一种是圈子皮肤，一种是个人皮肤

个人皮肤在Source/Web/Themes/UserDomains/Default/Appearances下

而他的配置文件themes.config在他上层目录，也就是Source/Web/Themes/UserDomains/Default

首先，你应该看一下官方提供的皮肤文件

他分为一个Image文件夹，一个缩略图previewImage.gif，还有一个css文件style.css

image文件夹存放的是皮肤对应的页首图，页脚图，还有皮肤使用的小图标，所有的小图标都做在一张图上，请按照官方的规格做好你所需要的皮肤图片，存放在image目录中，皮肤的背景色可以在style.css中修改

 

/**/ /* layout */
#commonHeader {...} { background: url(Images/bg_header.jpg) no-repeat;}
#commonContent {...} {background: #fbe8fc; }

中的#commonContent{background: #fbe8fc; }这一句修改，以适应你所做皮肤的整体效果

这一切都完成后，记得给自己的皮肤设置一个英文目录名，和一个中文名字。放在和官方皮肤平行的目录里

然后回到上一层目录修改themes.config文件

<? xml version="1.0" encoding="utf-8"  ?>
< appearances >
     < appearance  title ="默认"  description =""  previewImage ="appearances/default/PreviewImage.gif"  previewLargeImage ="appearances/default/PreviewImage.gif"   />
     < appearance  title ="铅笔画"  description =""  css ="appearances/random/style.css"  previewImage ="appearances/random/PreviewImage.gif"  previewLargeImage ="appearances/random/PreviewImage.gif"   />
     < appearance  title ="艳阳天"  description =""  css ="appearances/sky/style.css"  previewImage ="appearances/sky/PreviewImage.gif"  previewLargeImage ="appearances/sky/PreviewImage.gif"   />
</ appearances >

上面这是theme.config文件的实例。

< appearance  title ="铅笔画"  description =""  css ="appearances/random/style.css"  previewImage ="appearances/random/PreviewImage.gif"  previewLargeImage ="appearances/random/PreviewImage.gif"   />

这一部分就是其中的一项，对应的就是更换皮肤时弹出的选择画面中的名字和缩略图，按照他的格式添加自己的中文名字和对应的英文目录。

OK，一套新皮肤就成功。记得最后需要对自己的皮肤的各种图片进行优化，以保证加载的速度，每个图片在100K以下最好~~

圈子皮肤在Source/Web/Themes/ClubDomains/Default/Appearances,添加方法和个人皮肤类似。

呵呵，班门弄斧，希望大家多提意见~

并且共享已经作好的6套皮肤

http://www.spacebuilder.cn/u/SpaceBuilder/File/81/ViewFile.aspx