软件下载 | 资讯教程 | 最近更新 | 下载排行 | 一键转帖 | 发布投稿
您的位置:最火下载站 > 建站程序 > CMS教程 > SupeSite日志(uchblog)默认模板样式解析

SupeSite日志(uchblog)默认模板样式解析

烈火网(LieHuo.Net)教程 我们以默认模板为例分析一下其模板样式,SupeSite 7.0 默认模板的样式表为 \templates\default\css\common.css,所以只需要修改该文件即可更改 default 模板样式。

注意:修改默认模板之前最好复制一份进行修改,保留默认的 default 目录,方便以后的产品升级。

一、头部(header)http://www.veryhuo.com/a/view/8104.html

二、首页及资讯首页(index & news)http://www.veryhuo.com/a/view/8105.html

三、资讯分类及内容页面(category & viewnews)http://www.veryhuo.com/a/view/8106.html

四、论坛(bbs)http://www.veryhuo.com/a/view/8107.html

五、日志(uchblog)

1、日志首页

日志首页的幻灯片样式同首页幻灯片样式,“最新日志”、“本周热门日志”、“本周热评日志”几个模块样式同首页资讯模块,所以此处不再赘述。

1)图片故事

在 common.css 样式表中对应的常见修改样式有:

#blog_pic_story { height:140px; overflow:hidden; border:1px solid #D8D8D8; background:#F8F8F8; }// “图片故事”模块样式控制,常见修改有更改模块边框样式 border:1px solid #D8D8D8 以及更改模块背景色 background:#F8F8F8 。

#blog_pic_story h3 { padding:8px 20px 4px; }// “图片故事”模块标题样式控制,如需更改标题颜色可在此添加对应的样式代码。

.globalnews_piclist img { display:block; width:100px; height:70px; padding:1px; border:1px solid #D8D8D8; }// “图片故事”模块图片样式控制,常见修改有更改图片边框样式 border:1px solid #D8D8D8 。

2)最近更新

在 common.css 样式表中对应的常见修改样式有:

#blog_new { height:467px; border:1px solid #D8D8D8; background:#F8F8F8;}// “最近更新”模块样式控制,常见修改有更改模块边框样式 border:1px solid #D8D8D8 以及更改模块背景色 background:#F8F8F8 。

#blog_new h3 { padding:8px 20px 4px; }// “最近更新”模块标题样式控制,如需更改标题颜色可在此添加对应的样式代码。

.global_avatar_list li img { display:block; width:48px; height:48px; padding:1px; border:1px solid #D8D8D8; }// “最近更新”模块用户头像样式控制,常见修改有更改头像边框样式 border:1px solid #D8D8D8 。

#blog_new ul.txt li { height:28px; overflow:hidden; font-size:14px; line-height:28px; }// “最近更新”模块下方日志列表样式,常见修改有更改字体大小 font-size:14px ,或者在此加入控制字体颜色的代码来更改日志标题颜色。

3)日志之星

在 common.css 样式表中对应的常见修改样式有:

#blog_top { height:301px; border:1px solid #D8D8D8; background:#F7FDFD; color:#999; }// “日志之星”模块样式控制,常见修改有更改模块边框样式 border:1px solid #D8D8D8 ,更改模块背景色 background:#F7FDFD,以及更改模块字体颜色 color:#999 。

#blog_top h3 { padding:8px 15px 10px; color:#EB1C26; }// “日志之星”模块标题样式控制,常见修改有更改标题颜色 color:#EB1C26 。

#blog_top dt img { display:block; width:48px; height:48px; padding:1px; border:1px solid #D8D8D8; }// “日志之星”模块用户头像样式控制,常见修改有更改头像边框样式 border:1px solid #D8D8D8 。

#blog_top dd a { color:#369; }// “日志之星”模块日志标题样式控制,常见修改为更改标题颜色 color:#369 。

4)热门空间

“热门空间”的边框和背景色、标题栏样式同首页资讯模块,所以此处不再赘述。

用户头像样式同上面介绍过的“最近更新”里面的用户头像样式:.global_avatar_list li img

5)本月热评/本月点击排行

“本月热评”、“本月点击排行”两个模块的边框、背景、标题样式完全同首页的“版块帖子数排行”,所以此处不再赘述。

在 common.css 样式表中对应的常见修改样式有:

.global_tx_list6 { margin-bottom:10px; padding-bottom:0; background:url(../images/zebra_bg.gif) repeat 0 31px; }// “本月热评”、“本月点击排行”两个模块样式控制,常见修改为更换背景图片 /images/zebra_bg.gif 。

.global_tx_list6 ul { padding:0 15px 0 30px; background:url(../images/top10_bg.gif) no-repeat 15px 10px; }// “本月热评”、“本月点击排行”两个模块文章背景样式控制,常见修改为更改背景图片 /images/top10_bg.gif 。

.global_tx_list6 .box_r a { color:#999;}// “本月热评”、“本月点击排行”两个模块文章作者用户名字体颜色控制。

本图已缩略,请点击放大观看。

相关阅读
栏目导航
推荐软件