爱飞多用户博客系统/皮肤制作说明
皮肤概况[ ]
[[[I-Favourite]]皮肤可多种风格并行。
I-Favourite 1.2、1.5、仅使用MSN风格皮肤。
I-Favourite 2.0及以上版本使用 MSN和IF2007宽屏风格。
皮肤存放目录: 皮肤存放在 :I-Favourite程序根目录/Themes/ 目录下。
如: MSN风格 :I-Favourite程序根目录/Themes/MSN
IF2007风格 :I-Favourite程序根目录/Themes/IF2007
系统在数据库表 Users_UserConfig 字段中 Theme字段存放风格名称,Layout字段存放页面逻辑(版式,模块等)
风格文件说明[ ]
hemes/MSN目录下, Default.Master为首页母板页,BlogIndex.Master为博客母板页,CommMaster.Master为通用的母板页,ViewPost.Master为查看主题母板页。
Themes/MSN/Skins 下为当前风格皮肤控件,一般来说,不用改动这些控件,只需要修改皮肤文件中的CSS定义就可以了。
Themes/MSN/images/ 目录下为当前风格所需的图片等资源文件。
Themes/MSN/Theme.jpg 为风格缩略图。 每种风格可以定义多种皮肤,在当前风格下实下皮肤切换。 如下图, 当前选中MSN风格,
以下为当前风格目录,和皮肤
切换到 I-Favourite2007风格
为了提高加载整度和性能,皮肤的目录信息存放在 js文件中
MSN风格皮肤目录信息所在路径为:博客程序根目录/Languages/zh-CN/js/ThemeData.js
IF2007风格皮肤目录信息所在路径为:博客程序根目录/Themes/IF2007/Js /ThemeData.js
- ThemeData.js定义说明:
只需要修改InitThemes()函数体内的的定义.
例如:
Themes[0]=new ThemeClass('假期'); Themes[0] 中的0为皮肤分类序号,new ThemeClass('假期'); 假期为分类名称。
如图所示:
- 在当前皮肤分类下添加皮肤:
Themes[0].Add(new themeItem('快乐烛光','AGI_birthday','../style/AGI_birthday/AGI_birthday.gif'));
其中 第一个参数 快乐烛光 为皮肤名称,第二个参数AGI_birthday 为皮肤文件夹名,第三个参数../style/AGI_birthday/AGI_birthday.gif为皮肤所在路径
皮肤文件存放目录: MSN风格在博客程序根目录/Style 目录
IF2007风格在博客程序根目录/Themes/ IF2007/Style目录
要创建一个皮肤的顺序为 :
皮肤目录下新建文件夹,并创建一个和文件夹同名的.css文件,如要在MSN风格下添加一个皮肤,那么在皮肤目录创建AGI_birthday 文件夹,并在目录内添加AGI_birthday.css(注:if2007风格为color.css)文件,修改CSS文件中的定义
CSS定义[ ]
- MSN风格
.shdrbg 页头 ,(背景 ,和背景图) .mainbody 页主体部分 (背景 ,和背景图) .assistbody 支持页主体部分 同上 .taskbar .bvSection .bvSectionTitle 内容块,块标题 .PicTab 形像照片 .subnav 导行栏 .modhead 模块头 .partsmb 模块体 如首页的块 .mb 模块体(主要用后台,活动的块请用.partsmb) .opaquePartMain 不透明的块 .bvError,.bvError table 错误提示的样式 .dateline,line 线 前者是主题时间后的分隔线 .modhead 模块头 .mod_tlc .mod_trc 模块头左和右 用来做半圆表等 .SaveRow 保存行样式 .BottomPanel 块底部的样式 rss 相关css 表 fixedTable rssViewTable td ellipse rssViewTitleLinkContainer 标题 ellipse 主要是处理超长标题显示问题 rssViewTitleLinkContainer 连接样式 rssViewTitleLink rssContentDelimeter graytitle rss标题样式,内容题要样式 Line 行分割符样式 更多定义请查看页面文件。 行分割符样式
- 'IF2007风格
BODY 整体背景颜色
#pagehead 页头 #pagehead #spacename 空间名称 #pagehead #spacedesc 子标题说明
模块部分:
.pheader 模块头 .mod_tlc 标题左上边框 .mod_trc 标题右上边框 .modhead 中部 .partsmb 下部边框样式 .modulecontent 内容区 .modbody 内容区 兼容ff下padding不一致所使用 <pre> 导行目录部分 <pre> #pagesectionlink #pagebody 内容区 #pagefoot 页角 .bvTitle 通用标题 .bvBody 通用内容区 .line 通用行分割符 .dateline blog内容时间后的分割符 fixedTable rssViewTable td ellipse rssViewTitleLinkContainer 标题 ellipse 主要是处理超长标题显示问题 rssViewTitleLinkContainer 连接样式 rssViewTitleLink rssContentDelimeter graytitle rss标题样式,内容题要样式 Line 行分割符样式
参考来源[ ]
爱飞多用户博客系统使用手册 | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
|