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中修改
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/1327ab569c1ae82736693a50b8e33378.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/1327ab569c1ae82736693a50b8e33378.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/1327ab569c1ae82736693a50b8e33378.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
中的#commonContent{background: #fbe8fc; }这一句修改,以适应你所做皮肤的整体效果
这一切都完成后,记得给自己的皮肤设置一个英文目录名,和一个中文名字。放在和官方皮肤平行的目录里
然后回到上一层目录修改themes.config文件
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
上面这是theme.config文件的实例。
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
这一部分就是其中的一项,对应的就是更换皮肤时弹出的选择画面中的名字和缩略图,按照他的格式添加自己的中文名字和对应的英文目录。
OK,一套新皮肤就成功。记得最后需要对自己的皮肤的各种图片进行优化,以保证加载的速度,每个图片在100K以下最好~~
圈子皮肤在Source/Web/Themes/ClubDomains/Default/Appearances,添加方法和个人皮肤类似。
呵呵,班门弄斧,希望大家多提意见~
并且共享已经作好的6套皮肤
http://www.spacebuilder.cn/u/SpaceBuilder/File/81/ViewFile.aspx