解析SupeSite7.0模板样式

SupeSite7.0是康盛创想(Comsenz)公司于2009年3月推出的一款社区CMS产品，作为Comsenz旗下的社区产品SupeSite7.0全面支持对Discuz!、UCenterHome的聚合功能。

对于那些已经安装使用Discuz!和UCenterHome的站长来说，通过SupeSite7.0可以快速搭建一个社区门户。我们以默认模板为例分析一下其模板样式，SupeSite7.0默认模板的样式表为/templates/default/css/common.css，所以只需要修改该文件即可更改default模板样式。

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

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

1）图片故事在common.css样式表中对应的常见修改样式有： #blog_pic_story{height:140px;overflow:hidden;border:1pxsolid#D8D8D8;background:#F8F8F8;} //“图片故事”模块样式控制，常见修改有更改模块边框样式border:1pxsolid#D8D8D8以及更改模块背景色background:#F8F8F8。 #blog_pic_storyh3{padding:8px20px4px;} //“图片故事”模块标题样式控制，如需更改标题颜色可在此添加对应的样式代码。

2）最近更新在common.css样式表中对应的常见修改样式有： #blog_new{height:467px;border:1pxsolid#D8D8D8;background:#F8F8F8;} //“最近更新”模块样式控制，常见修改有更改模块边框样式border:1pxsolid#D8D8D8以及更改模块背景色background:#F8F8F8。 #blog_newh3{padding:8px20px4px;} //“最近更新”模块标题样式控制，如需更改标题颜色可在此添加对应的样式代码。 .global_avatar_listliimg{display:block;width:48px;height:48px;padding:1px;border:1pxsolid#D8D8D8;} //“最近更新”模块用户头像样式控制，常见修改有更改头像边框样式border:1pxsolid#D8D8D8。 #blog_newul.txtli{height:28px;overflow:hidden;fontsize:14px;lineheight:28px;} //“最近更新”模块下方日志列表样式，常见修改有更改字体大小fontsize:14px，或者在此加入控制字体颜色的代码来更改日志标题颜色。

3）日志之星在common.css样式表中对应的常见修改样式有： #blog_top{height:301px;border:1pxsolid#D8D8D8;background:#F7FDFD;color:#999;} //“日志之星”模块样式控制，常见修改有更改模块边框样式border:1pxsolid#D8D8D8，更改模块背景色background:#F7FDFD，以及更改模块字体颜色color:#999。 #blog_toph3{padding:8px15px10px;color:#EB1C26;} //“日志之星”模块标题样式控制，常见修改有更改标题颜色color:#EB1C26。 #blog_topdtimg{display:block;width:48px;height:48px;padding:1px;border:1pxsolid#D8D8D8;} //“日志之星”模块用户头像样式控制，常见修改有更改头像边框样式border:1pxsolid#D8D8D8。 #blog_topdda{color:#369;} //“日志之星”模块日志标题样式控制，常见修改为更改标题颜色color:#369。

4）热门空间 “热门空间”的边框和背景色、标题栏样式同首页资讯模块，所以此处不再赘述。用户头像样式同上面介绍过的“最近更新”里面的用户头像样式：.global_avatar_listliimg

5）本月热评/本月点击排行 “本月热评”、“本月点击排行”两个模块的边框、背景、标题样式完全同首页的“版块帖子数排行”，所以此处不再赘述。在common.css样式表中对应的常见修改样式有： .global_tx_list6{marginbottom:10px;paddingbottom:0;background:url(../images/zebra_bg.gif)repeat031px;} //“本月热评”、“本月点击排行”两个模块样式控制，常见修改为更换背景图片/images/zebra_bg.gif。 .global_tx_list6ul{padding:015px030px;background:url(../images/top10_bg.gif)norepeat15px10px;} //“本月热评”、“本月点击排行”两个模块文章背景样式控制，常见修改为更改背景图片/images/top10_bg.gif。 .global_tx_list6.box_ra{color:#999;} //“本月热评”、“本月点击排行”两个模块文章作者用户名字体颜色控制。  

2、日志查看页日志查看页也有一部分样式是跟其他页面相同的，比如左侧模块的边框和标题背景等，所以这里我就不再详细说明，图片上标注出来了。在common.css样式表中对应的常见修改样式有： .blog_usera{color:#369;}//日志作者用户名/“查看TA的全部日志”字体颜色。 #blog_detail.box_r{width:770px;}//日志正文宽度控制。 #blog_articleh1{paddingbottom:8px;color:#369;fontsize:16px;fontweight:400;}//日志文章标题样式控制，常见修改有更改日志标题字体颜色color:#369、字体大小fontsize:16px、字体粗细fontweight:400。 #blog_article.blog_tipinfo{padding:8px015px;background:url(../images/dashed_bg.gif)repeatxcentertop;color:#999;}//“发布/作者/来源/查看/字号”样式控制，常见修改有更改字体颜色color:#999。 #articleimg,#blog_bodyimg{maxwidth:565px;width:expression(this.width>565?563:true);}//日志文章缩略图显示控制，这里同资讯文章缩略图控制，图片最大显示宽度为565px，如果宽度大于565px则缩略为563px显示。 #blog_article.blog_op{padding:8px0;background:url(../images/dashed_bg.gif)repeatxcentertop;textalign:right;color:#369;}#blog_article.blog_opa{color:#369;textdecoration:underline;}//“打印收藏此页推荐给挚友举报”模块样式控制，常见修改有更改字体链接颜色color:#369。 .bg_f8{background:#F8F8F8;}//评论部分背景色控制。 .u_comment_list.u_avatarimg{width:48px;height:48px;padding:1px;border:1pxsolid#D8D8D8;}//评论用户的头像样式控制，常见修改为更改边框样式

border:1pxsolid#D8D8D8。 .u_comment_list.u_title{paddingbottom:5px;color:#999;lineheight:12px;}//评论日期时间样式控制，常见修改有更改字体颜色color:#999。