FAQ首页 > 模板风格 > SupeSite > 查看文章
收起边栏
大字 小字 收藏 复制URL










7.0
默认模板样式解析之首页&资讯篇(index & news)
2009-08-21┆42,276 Views┆24

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

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

一、头部(header)http://faq.comsenz.com/viewnews-834

二、首页及资讯首页(index & news)

1、幻灯片(focus turn)

SupeSite 7.0 首页、资讯、论坛、日志、相册的幻灯片都是相同的 CSS 样式,所以此处介绍后其他频道将不再赘述。

1)幻灯片外边框及背景

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

    CODE: [COPY]
  • #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 样式表中对应的常见修改样式有:

    CODE: [COPY]
  • #focus_pic li img { width:350px; height:260px; padding:1px; border:1px solid #D8D8D8; background:#FFF; }

// 修改幻灯片图片边框的样式,修改上述样式代码中的 border:1px solid #D8D8D8; 即可。

3)幻灯片页码

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

    CODE: [COPY]
  • #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; 即可。

    CODE: [COPY]
  • #focus_btn .normal { background:#FFF; color:#1A4963; }

// 修改幻灯片未选中状态下的页码字体颜色和背景色。

    CODE: [COPY]
  • #focus_btn .current { background:#1A4963; color:#FFF; }

// 修改幻灯片选中状态下的页码字体颜色和背景色。

2、热点内容(new news)

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

    CODE: [COPY]
  • #new_news { height:185px; overflow:hidden; border:1px solid #D8D8D8; background:#F8F8F8; }

// 热点内容模块高度、边框及背景色样式控制。

    CODE: [COPY]
  • #new_news h3 { padding:8px 20px 4px; }

// 标题“热点内容”样式控制。

    CODE: [COPY]
  • #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 。

    CODE: [COPY]
  • #new_news .box_r { padding-left:10px; color:#999; }

// 热点内容文章列表右侧日期样式控制,常见修改为更改日期字体颜色 color:#999 。

3、最新资讯(hot news)

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

    CODE: [COPY]
  • #hot_news h3 { padding:8px 0 8px; font-size:16px; border-bottom:1px solid #D8D8D8; }

// “最新资讯”标题样式控制,常见修改为修改“最新资讯”字体大小 font-size:16px ,标题下边框 border-bottom:1px solid #D8D8D8 。

    CODE: [COPY]
  • .hot_news_list h4 height:25pxoverflow:hiddenline-height:15px; }</PRE><PRE>.hot_news_list h4 a color:#EB1C26; }

// 最新资讯文章列表标题样式控制,常见修改为修改标题颜色 #EB1C26 。

    CODE: [COPY]
  • .hot_news_list p height:62pxoverflow:hiddencolor:#666; line-height:20px; }

// 最新资讯文章内容摘要样式控制,常见修改为修改文章内容摘要颜色 color:#666 。

4、用户面板(user login)

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

    CODE: [COPY]
  • #user_login_position { position:absolute; width:248px; height:156px; border:1px solid #D8D8D8; background:#F8F8F8; z-index:99px; }

// 用户面板模块整体样式控制,常见修改为模块边框 border:1px solid #D8D8D8; 的修改,背景色的修改 background:#F8F8F8 。

    CODE: [COPY]
  • #user_login h3 { padding:8px 15px 10px; }

// “用户面板”模块标题样式控制,比如要修改颜色和字体大小可在此加样式控制。

    CODE: [COPY]
  • .user_info dl height:70pxoverflow:hiddenmargin-bottom:12pxborder-bottom:1px dashed #D8D8D8; }

// 用户头像这块儿的样式控制,常见的修改为更改用户头像下方的虚线样式 border-bottom:1px dashed #D8D8D8 。

    CODE: [COPY]
  • .user_info dl dt img width:48pxheight:48pxpadding:1pxborder:1px solid #D8D8D8; }

// 用户头像样式控制,常见修改为边框颜色修改 border:1px solid #D8D8D8 。

    CODE: [COPY]
  • .user_info .tx_blue color:#369; text-decoration:underline; }

// “我的个人主页”样式控制,常见修改为更改字体颜色 color:#369 。

    CODE: [COPY]
  • .contribute_txt float:leftpadding-right:12pxbackground:url(../images/myspace_bg.gifno-repeat 1005pxcolor:#F00; }

// “投稿”处样式控制,常见修改为替换背景图片 background:url(../images/myspace_bg.gif) no-repeat 100% 5px; 及修改字体颜色 color:#F00 。

5、调查/公告(super notice)

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

    CODE: [COPY]
  • .super_notice height:110pxoverflow:hiddenmargin-bottom:10pxborder:1px solid #D8D8D8; background:#F7FDFD; }

// 调查/公告模块整体样式控制,常见修改为边框样式修改 border:1px solid #D8D8D8; 及背景色修改 background:#F7FDFD 。

    CODE: [COPY]
  • .super_notice h3 padding:8px 15px 4pxcolor:#EB1C26; }

// 调查/公告模块标题样式控制,常见修改为更改字体颜色 color:#EB1C26 。

    CODE: [COPY]
  • .super_notice ul padding:0 15px; }</PRE><PRE>.super_notice li height:25pxoverflow:hiddenline-height:25px; }

// 调查/公告模块列表样式控制,这里一般没啥可修改的,默认即可。

6、站内搜索(search bar)

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

    CODE: [COPY]
  • .search_bar position:relativeheight:100pxmargin-bottom:10pxborder:1px solid #DEDEDE; background:url(../images/search_bg.gif) no-repeat 0 0; }

// 站内搜索模块整体样式控制,常见修改为更改边框样式 border:1px solid #DEDEDE; 及头部背景图片替换 background:url(../images/search_bg.gif) no-repeat 0 0 。

    CODE: [COPY]
  • .search_content .search_bbs position:absolutetop:72pxright:15pxcolor:#369; text-decoration:underline;}

// “搜索论坛”文字链接样式控制,常见修改为更改字体颜色 color:#369 。

7、资讯/相册/论坛/日志/资讯首页分类模块

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

    CODE: [COPY]
  • .global_module overflow:hiddenpadding-bottom:10pxborder:1px solid #D8D8D8; background:#F8F8F8; }

// 首页资讯/相册/论坛/日志/资讯首页分类几个模块的边框及背景色样式控制,常见修改有边框样式更改 border:1px solid #D8D8D8; 及背景色更改 background:#F8F8F8 。

    CODE: [COPY]
  • .global_module1_caption height:31pxoverflow:hiddenmargin-bottom:10pxbackground:url(../images/global_caption1_bg.gifrepeat-xcolor:#FFF; line-height:31px; }

// 首页资讯/相册/论坛/日志/资讯首页分类几个模块标题样式控制,常见修改有更换标题背景图片 background:url(../images/global_caption1_bg.gif) repeat-x; 及更改标题字体颜色 color:#FFF 。

    CODE: [COPY]
  • .global_tx_list1 li display:inlinefloat:leftwidth:300pxheight:25pxoverflow:hiddenmargin:0 15px 0 20pxpadding-left:12pxbackground:url(../images/icon_li.gifno-repeat 0 11pxline-height:25px; }

// 首页资讯/论坛/日志/资讯首页分类几个模块的文章列表样式控制,常见修改有更换文章列表左侧的小红点图片 background:url(../images/icon_li.gif) no-repeat 0 11px 。

    CODE: [COPY]
  • .global_tx_list1 .box_r padding-left:10pxcolor:#999; }</PRE><PRE>.global_tx_list1 .box_r a { color:#999; }

// 首页资讯/论坛/日志/资讯首页分类几个模块的文章列表作者显示样式控制,常见修改为更改字体颜色 color:#999 。

    CODE: [COPY]
  • .global_piclist li div display:table-cell; *display:blockwidth:102pxheight:104px; *height:102pxoverflow:hiddenborder:1px solid #E0E9F2; background:#FFF; text-align:center; vertical-align:middle; *font-size:85px; cursor:pointer; }

// 首页相册/资讯首页图文资讯模块图片样式控制,常见修改有更改图片边框样式 border:1px solid #E0E9F2; 及更改图片背景色 background:#FFF 。

8、本月精华/精彩推荐/版块帖子数排行/最近更新/最新评论/月度评论

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

    CODE: [COPY]
  • .global_module2_caption height:31pxoverflow:hiddenmargin-bottom:10pxbackground:url(../images/global_caption2_bg.gifrepeat-xline-height:31px; }

// 上述几个模块标题部分样式控制,常见修改有标题背景图片更改 background:url(../images/global_caption2_bg.gif) repeat-x 。

    CODE: [COPY]
  • .global_module overflow:hiddenpadding-bottom:10pxborder:1px solid #D8D8D8; background:#F8F8F8; }

// 上述几个模块的边框样式同资讯、论坛、日志、相册等模块,修改上面的这句样式代码即可。

    CODE: [COPY]
  • .global_avatar_list li img display:blockwidth:48pxheight:48pxpadding:1pxborder:1px solid #D8D8D8; }

// 首页“最近更新”模块用户头像样式控制,常见修改为头像图片边框样式更改 border:1px solid #D8D8D8 。

9、友情链接(links)

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

    CODE: [COPY]
  • #links { width:960px; overflow:hidden; margin:0 auto 10px; padding-bottom:10px; border:1px solid #D8D8D8; background:#F8F8F8; }

// 友情链接模块整体样式控制,常见修改有模块边框修改 border:1px solid #D8D8D8 及模块背景色修改 background:#F8F8F8 。

    CODE: [COPY]
  • #links h3 { padding:8px 20px 5px; }

// 友情链接模块标题字体样式控制,如需修改字体大小及颜色可在此添加相应的控制代码。

    CODE: [COPY]
  • .links_img img width:88pxheight:31pxmargin-bottom:5px; }

// 友情链接 Logo 图片样式控制,常见的修改为更改图片高和宽 width:88px; height:31px;

三、资讯分类及内容页面(category & viewnews)http://faq.comsenz.com/viewnews-837

四、论坛(bbs)http://faq.comsenz.com/viewnews-838

五、日志(uchblog)http://faq.comsenz.com/viewnews-839

六、相册(uchimage)http://faq.comsenz.com/viewnews-840

七、尾部(footer)http://faq.comsenz.com/viewnews-835


24

满意

不满意

本篇文章用到的Tags : 模板 首页 样式 资讯

没找到您想要的答案吗?建议您到我们的讨论区发帖寻求大家和 Comsenz 工作人员的帮助。