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










7.0
默认模板样式解析之论坛篇(bbs)
2009-08-21┆34,429 Views┆25

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

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

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

二、首页及资讯首页(index & news)http://faq.comsenz.com/viewnews-836

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

四、论坛(bbs)

1、论坛频道首页

论坛频道首页幻灯片、热点内容、本月热点、最新发表、图片主题以及各个版块模块的 CSS 样式完全同首页和资讯首页的样式控制,所以这里不再赘述。

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

    CODE: [COPY]
  • .global_tx_list5 ul padding:0 15px 0 30pxbackground:url(../images/top10_bg.gifno-repeat 15px 10px; }

// “版块帖子数排行”、“用户发帖排行”、“用户在线排行”、“最新评论”几个模块的样式控制,常见修改有更换背景图片 /images/top10_bg.gif 。

2、论坛版块页面

版块页面的一部分 CSS 样式控制同资讯分类和论坛首页,比如“您的位置”同资讯分类页面,子版块模块及“最新评论”模块同论坛首页,页码部分也同资讯分类页面页码样式。其余的如下分析:

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

    CODE: [COPY]
  • .news_list li overflow:hiddenmargin-bottom:5pxpadding-bottom:10pxbackground:url(../images/dashed_bg.gifrepeat-x 0 100%; line-height:22px; }

// 版块主题列表模块样式控制。

    CODE: [COPY]
  • .news_list h4 margin:4px 0padding-left:12pxbackground:url(../images/arrow_li.gifno-repeat 0 3px;}

// 版块主题文章标题样式控制,常见修改为更换标题左侧的小图标 /images/arrow_li.gif 。

    CODE: [COPY]
  • .news_list h4 a color:#369; }

// 版块主题颜色控制

    CODE: [COPY]
  • .news_list .news_list_caption margin-bottom:5pxcolor:#999; }

// “发表于...”样式控制,常见修改为更改字体颜色 color:#999 。

    CODE: [COPY]
  • .catalog_list .global_module float:leftwidth:343pxmargin-bottom:10px; }

// 子版块模块样式控制

3、帖子内容页

帖子内容页的样式基本同资讯文章内容页,所以这里只做大概介绍。

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

    CODE: [COPY]
  • #article h1 { margin:6px 0 12px 0; text-align:center; font-size:1.33em; }

// 帖子标题样式控制,常见修改为更改标题字体大小 font-size:1.33em ,如果需要修改标题颜色可在此添加相应的样式代码。

    CODE: [COPY]
  • #article_extinfo { padding-bottom:10px; color:#999; text-align:center; }

// “发布时间、作者、查看”处样式控制,常见修改为更改字体颜色 color:#999 。

    CODE: [COPY]
  • #article img, #blog_body img { max-width:565px; width:expression(this.width > 565 ? 563: true);}

// 文章缩略图显示控制,图片最大显示宽度为 565px,如果宽度大于 565px 则缩略为 563px 显示。

    CODE: [COPY]
  • #comment_op a { display:block; float:right; width:108px; height:24px; overflow:hidden; margin-left:12px; background:url(../images/comment_btn_bg.gif) no-repeat; text-indent:29px; }

// “查看全部回复” 按钮样式控制,常见修改为替换按钮背景图片 /images/comment_btn_bg.gif 。

“最新评论”模块样式同资讯分类页面“最新评论”模块的样式,故不再赘述。

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

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

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


25

满意

不满意

本篇文章用到的Tags : bbs 论坛 模板 样式

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