SupeSite common默认模板样式解析

SupeSite common默认模板样式解析
我们以默认模板为例分析一下其模板样式，SupeSite 7.0 默认模板的样式表为 \templates\default\css\common.css，所以只需要修改该文件即可更改 default 模板样式。
注意：修改默认模板之前最好复制一份进行修改，保留默认的 default 目录，方便以后的产品升级。
一、头部（header）
SupeSite 7.0 默认模板头部涉及到的 CSS 样式有：#header、#nav
具体分析：
1、logo
logo 在 common.css 里面涉及的样式如下：
#header { width:960px; height:65px; overflow:hidden; margin:10px auto; }复制内容到剪贴板Code：
#header h2 img { width:135px; height:65px; }// 修改 logo 的高宽只需修改上面两个样式里面的 width 和 height 即可。
2、主导航栏背景
主导航栏在 common.css 里面涉及的样式如下：
.main_nav { height:34px; overflow:hidden; padding-top:1px; background:#1A4963; color:#FFF; font-size:14px; }// 修改主导航栏背景色只需要修改上述样式里面的 background:#1A4963 即可。
.main_nav .current a { background:url(../images/nav_current_bg.gif) repeat-x; color:#295B72; font-weight:700; text-decoration:none!important; }// 修改按钮选中状态的背景只需修改上述样式里面的 background:url(../images/nav_current_bg.gif) repeat-x ，将新作的 /images/nav_current_bg.gif 图片替换原来的，或者去掉背景图片改为背景色，比如将 background:url(../images/nav_current_bg.gif) repeat-x 改为类似这样 background:#FFFFFF 。
3、首页背景
分类在 common.css 里面涉及的样式如下：
#nav { width:960px; overflow:hidden; margin:0 auto 10px; background:#D3EAF0; }// 修改分类背景只需要修改上述样式中的 background:#D3EAF0 即可。
4、主导航栏字体
主导航栏字体在 common.css 里面涉及的样式如下：
.main_nav ul li a { float:left; display:block; padding:9px 15px; color:#FFF; }// 导航菜单未选中状态下字体的颜色修改上述样式中的 color:#FFF 即可。
.main_nav .current a { background:url(../images/nav_current_bg.gif) repeat-x; color:#295B72; font-weight:700; text-decoration:none!important; }// 导航菜单选中状态下字体的颜色修改上述样式中的 color:#295B72 即可。
5、分类字体
分类字体在 common.css 里面涉及的样式如下：
.order_nav li a { margin-left:2px; color:#295B72; }// 修改分类字体颜色只需要修改上述样式中的 color:#295B72 即可。
二、首页及资讯首页（index & news）
1、幻灯片（focus turn）
SupeSite 7.0 首页、资讯、论坛、日志、相册的幻灯片都是相同的 CSS 样式，所以此处介绍后其他频道将不再赘述。
1)幻灯片外边框及背景
其在 common.css 样式表中对应的常见修改样式有：
#focus_turn { position:relative; height:315px; margin-bottom:10px; border:1px solid #D8D8D8; background:url(../images/focus_turn_bg.gif) repeat-x; }// 修改幻灯片外边框的样式，修改上述样式代码中的 border:1px solid #D8D8D8; 即可。
// 修改幻灯片背景，修改上述样式代码中的 background:url(../images/focus_turn_bg.gif) repeat-x; ，将新作的 /images/focus_turn_bg.gif 图片替换原来的，或者去掉背景图片改为背景色，比如将 background:url(../images/focus_turn_bg.gif) repeat-x; 改为类似这样 background:#FFFFFF; 。
2)幻灯片图片及边框
其在 common.css 样式表中对应的常见修改样式有：
#focus_pic li img { width:350px; height:260px; padding:1px; border:1px solid #D8D8D8; background:#FFF; }// 修改幻灯片图片边框的样式，修改上述样式代码中的 border:1px solid #D8D8D8; 即可。
3)幻灯片页码
其在 common.css 样式表中对应的常见修改样式有：
#focus_btn span { display:block; float:left; overflow:hidden; width:22px; height:22px; margin:0 0 0 -1px; border:1px solid #D8D8D8; text-align:center; font:14px Arial, Helvetica, sans-serif; font-weight:700; line-height:22px; cursor:pointer; }// 修改幻灯片页码字体，修改 font:14px Arial, Helvetica, sans-serif; font-weight:700; 即可。
// 修改幻灯片页码边框，修改 border:1px solid #D8D8D8; 即可。
#focus_btn .normal { background:#FFF; color:#1A4963; }// 修改幻灯片未选中状态下的页码字体颜色和背景色。
#focus_btn .current { background:#1A4963; color:#FFF; }// 修改幻灯片选中状态下的页码字体颜色和背景色。
2、热点内容（new news）
其在 common.css 样式表中对应的常见修改样式有：
#new_news { height:185px; overflow:hidden; border:1px solid #D8D8D8; background:#F8F8F8; }// 热点内容模块高度、边框及背景色样式控制。
#new_news h3 { padding:8px 20px 4px; }// 标题“热点内容”样式控制。
#new_news li { height:25px; overflow:hidden; padding-left:12px; background:url(../images/icon_li.gif) no-repeat 0 11px; line-height:25px; }// 热点内容文章列表样式控制，常见修改是替换文章列表左侧的小红点图片，也就是 /images/icon_li.gif 。
#new_news .box_r { padding-left:10px; color:#999; }// 热点内容文章列表右侧日期样式控制，常见修改为更改日期字体颜色 color:#999 。
3、最新资讯（hot news）
其在 common.css 样式表中对应的常见修改样式有：
#hot_news h3 { padding:8px 0 8px; font-size:16px; border-bottom:1px solid #D8D8D8; }// “最新资讯”标题样式控制，常见修改为修改“最新资讯”字体大小 font-size:16px ，标题下边框 border-bottom:1px solid #D8D8D8 。
.hot_news_list h4 { height:25px; overflow:hidden; line-height:15px; }
.hot_news_list h4 a { color:#EB1C26; }// 最新资讯文章列表标题样式控制，常见修改为修改标题颜色 #EB1C26 。
.hot_news_list p { height:62px; overflow:hidden; color:#666; line-height:20px; }// 最新资讯文章内容摘要样式控制，常见修改为修改文章内容摘要颜色 color:#666 。
4、用户面板（user login）
其在 common.css 样式表中对应的常见修改样式有：
#user_login_position { position:absolute; width:248px; height:156px; border:1px solid #D8D8D8; background:#F8F8F8; z-index:99px; }// 用户面板模块整体样式控制，常见修改为模块边框 border:1px solid #D8D8D8; 的修改，背景色的修改 background:#F8F8F8 。
#user_login h3 { padding:8px 15px 10px; }// “用户面板”模块标题样式控制，比如要修改颜色和字体大小可在此加样式控制。
.user_info dl { height:70px; overflow:hidden; margin-bottom:12px; border-bottom:1px dashed #D8D8D8; }// 用户头像这块儿的样式控制，常见的修改为更改用户头像下方的虚线样式 border-bottom:1px dashed #D8D8D8 。
.user_info dl dt img { width:48px; height:48px; padding:1px; border:1px solid #D8D8D8; }// 用户头像样式控制，常见修改为边框颜色修改 border:1px solid #D8D8D8 。
.user_info .tx_blue { color:#369; text-decoration:underline; }// “我的个人主页”样式控制，常见修改为更改字体颜色 color:#369 。
.contribute_txt { float:left; padding-right:12px; background:url(../images/myspace_bg.gif) no-repeat 100% 5px; color:#F00; }// “投稿”处样式控制，常见修改为替换背景图片 background:url(../images/myspace_bg.gif) no-repeat 100% 5px; 及修改字体颜色 color:#F00 。
5、调查/公告（super notice）
其在 common.css 样式表中对应的常见修改样式有：
.super_notice { height:110px; overflow:hidden; margin-bottom:10px; border:1px solid #D8D8D8; background:#F7FDFD; }// 调查/公告模块整体样式控制，常见修改为边框样式修改 border:1px solid #D8D8D8; 及背景色修改 background:#F7FDFD 。
.super_notice h3 { padding:8px 15px 4px; color:#EB1C26; }// 调查/公告模块标题样式控制，常见修改为更改字体颜色 color:#EB1C26 。
.super_notice ul { padding:0 15px; }
.super_notice li { height:25px; overflow:hidden; line-height:25px; }// 调查/公告模块列表样式控制，这里一般没啥可修改的，默认即可。
三、资讯分类及内容页面（category & viewnews）
1、“你的位置”
其在 common.css 样式表中对应的常见修改样式有：
.global_module3_caption { position:relative; height:31px; overflow:hidden; margin-bottom:10px; background:url(../images/global_caption3_bg.gif) repeat-x; line-height:31px; }// 常见修改有更换“你的位置”背景图片 background:url(../images/global_caption3_bg.gif) repeat-x 。
a.btn_capiton_op { position:absolute; top:3px; right:10px; display:block; width:96px; height:24px; overflow:hidden; background:url(../images/more_op_bg.gif) no-repeat; color:#295B72; line-height:26px; text-indent:-9999px; }// “在线投稿”按钮样式控制，常见修改为更换按钮背景图片 /images/more_op_bg.gif 。
2、资讯分类/论坛资源/内容页图文资讯
其在 common.css 样式表中对应的常见修改样式有：
.global_module { overflow:hidden; padding-bottom:10px; border:1px solid #D8D8D8; background:#F8F8F8; }// 资讯分类/论坛资源/内容页图文资讯模块整体样式控制，这句控制还包括资讯分类图片模块、最新评论模块、首页的资讯、论坛、日志、相册等模块，常见修改有修改边框样式 border:1px solid #D8D8D8 及背景色。
.global_module1_caption { height:31px; overflow:hidden; margin-bottom:10px; background:url(../images/global_caption1_bg.gif) repeat-x; color:#FFF; line-height:31px; }// 论坛资源/内容页图文资讯模块标题样式，这句同样是首页资讯/相册/论坛/日志几个模块标题的样式控制，常见修改有更换标题背景图片 background:url(../images/global_caption1_bg.gif) repeat-x; 及更改标题字体颜色 color:#FFF 。
3、文章列表
其在 common.css 样式表中对应的常见修改样式有：
.global_tx_list4 li { height:35px; overflow:hidden; background:url(../images/dashed_bg.gif) repeat-x 0 34px; line-height:35px; font-size:14px; }.global_tx_list4 li a { color:#369; }
// 资讯分类/论坛资源文章列表样式控制，常见修改有更改文章下方的灰色虚线 background:url(../images/dashed_bg.gif) repeat-x 0 34px 及文章标题链接字体颜色 color:#369 。
.global_tx_list4 .box_r { padding-left:10px; color:#999; font-size:12px; }// 文章发布日期样式控制，常见修改为更改日期字体颜色 color:#999 。
4、翻页(pages)
其在 common.css 样式表中对应的常见修改样式有：
.pages a, .pages strong { margin:0 1px; padding:2px 6px; border:1px solid #E4E4E4; color:#369; text-decoration:none!important; }// 翻页页码边框、字体样式控制，常见修改有修改边框样式 border:1px solid #E4E4E4 及修改页码字体颜色。
.pages a:hover { border-color:#369; }
// 鼠标放到页码上时候边框颜色
.pages strong { border-color:#369; background:#369; color:#FFF; }// 当前页页码边框、背景色及字体样式，常见修改有更改边框颜色 border-color:#369、修改背景色 background:#369 及更改字体颜色。
四、论坛（bbs）
1、论坛频道首页
论坛频道首页幻灯片、热点内容、本月热点、最新发表、图片主题以及各个版块模块的 CSS 样式完全同首页和资讯首页的样式控制，所以这里不再赘述。
在 common.css 样式表中对应的常见修改样式有：
.global_tx_list5 ul { padding:0 15px 0 30px; background:url(../images/top10_bg.gif) no-repeat 15px 10px; }// “版块帖子数排行”、“用户发帖排行”、“用户在线排行”、“最新评论”几个模块的样式控制，常见修改有更换背景图片 /images/top10_bg.gif 。
五、日志（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;}// “本月热评”、“本月点击排行”两个模块文章作者用户名字体颜色控制。
六、相册（uchimage）
1、相册首页
1）最近更新（幻灯片）
整个“最近更新”模块的边框由 .global_module 样式控制，这个参数控制很多模块的边框样式，之前的文章里我们已经做过分析了，所以此处不再赘述。
其在 common.css 样式表中对应的常见修改样式有：
#image_focus_big img { width:350px; height:276px; }// 幻灯片大图大小控制
#image_focus_small h3 { padding:8px 15px 12px;}// “最近更新”模块标题样式控制，如需修改标题字体可在此添加相应样式代码。
.global_piclist li div { display:table-cell; *display:block; width:102px; height:104px; *height:102px; overflow:hidden; border:1px solid #E0E9F2; background:#FFF; text-align:center; vertical-align:middle; *font-size:85px; cursor:pointer; }// 幻灯片小图外框样式控制，常见修改有更改小图边框样式 border:1px solid #E0E9F2，背景色 background:#FFF，以及字体大小 font-size:85px 。
.global_piclist li div img, .user_photolist dl dt div img { max-width:100px; max-height:100px; width:expression_r_r(this.width > 100 && this.width > this.height ? 100: true); height:expression_r_r(this.height > 100 ? 100: true); vertical-align:middle; }// 幻灯片小图样式控制，设定缩略图最大宽度和高度都为 100px，如果图片宽高大于这个数值则缩略到 100px，并且缩略图居中显示。
2）本月相册达人
“本月相册达人”模块的边框和标题背景样式均同首页资讯模块，所以此处不做赘述。
其在 common.css 样式表中对应的常见修改样式有：
.image_user_list dl dt img { width:48px; height:48px; padding:1px; border:1px solid #D8D8D8; background:#FFF;}// 用户头像样式控制，常见修改有更改用户头像边框样式 border:1px solid #D8D8D8 以及更改背景色 background:#FFF 。
.image_user_list dl a { color:#369; }// 相册名称字体颜色控制。
.image_user_list dl a { color:#369; }// 相册所有者用户名字体颜色控制。
3）精彩相册
“精彩相册”模块的边框和标题背景样式均同首页资讯模块，所以此处不做赘述。
其在 common.css 样式表中对应的常见修改样式有：
.image_gallery_list dl { display:inline; float:left; width:284px; height:120px; overflow:hidden; margin:10px 0 10px 22px; background:url(../images/image_shadow_bg.gif) no-repeat; }// 单个相册模块样式控制，常见修改有修改单个相册的高宽，以及更换其背景图片 /images/image_shadow_bg.gif 。
.image_gallery_list dl dt img { max-height:100px; max-width:100px; width:expression_r_r(this.width > 100 && this.height < this.width ? 100:true); height:expression_r_r(this.height > 100 ? 100:true); vertical-align:middle; }// 相册封面图片样式控制，设定最大宽高都为 100px，超过则缩略到 100px，纵向居中显示。
.image_gallery_list dd h6 a { color:#333!important; }// 相册名称字体颜色控制。
.image_gallery_list dl a { color:#369; }// 相册所属说明“XX 的相册”字体颜色控制。
七、尾部（footer）
SupeSite 7.0 默认模板尾部涉及到的 CSS 样式有：#footer
1、底部导航背景
底部导航背景在 common.css 里面涉及的样式如下：
#footer_top { height:50px; margin-bottom:10px; background:#D3EAF0; }// 修改底部导航背景色只需要修改上述样式中的 background:#D3EAF0 即可。
2、底部导航字体
底部导航字体在 common.css 里面涉及的样式如下：
.good_link a { margin:0 3px; color:#295B72; }// 修改底部导航字体颜色只需要修改上述样式中的 color:#295B72 即可。