关于SpaceBuilder简单的皮肤制作方式
2008-01-16 02:25
232 查看
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
废话不多说,切入正题:
官方因为需要解决用户反馈的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
相关文章推荐
- 关于Python制作简单的图形界面GUI
- 关于如何制作Rss的一种简单方法![转]
- nios中关于串口(uart)的一种非常简单的操作方式
- 关于如何判断if语句中是true还是false的简单方式
- 关于Extjs MVC模式上传文件的简单方式
- 如何最简单方式查看gif图和制作gif图
- [原型设计]Axure 8最简单方式制作页面加载进度条百分比效果
- Fireworks MX 2004 制作简单动画(关于图层)
- 在ios中举个简单的protocol例子,关于两个类用协议方式传值。
- 关于android中一种简单的分享方式
- 关于软件防止破解的思考,如何避免简单的跳转指令型的验证方法,如何设置更复杂的验证方式。
- 用原生js制作轮播图,以及关于position的简单归纳
- 关于简单自定义view的View的理解(制作上面是图片下面是文字的控件)
- 大家一起讨论简称论-关于简单Selector的制作与使用 (Production and Use)
- 关于上报错误最简单的实现方式--利用图片
- 【XML定义】(1)关于XML的定义、特点、语法基本点、文档结构及简单使用方式
- 关于软件防止破解的思考,如何避免简单的跳转指令型的验证方法,如何设置更复杂的验证方式。
- 关于android中一种简单的分享方式
- 关于magento的皮肤制作
- C#关于制作截图工具(一)<简单截图>