分享
 
 
 

解析SupeSite7模板样式之资讯分类篇-网络应用

王朝数码·作者佚名  2009-09-25
窄屏简体版  字體: |||超大  

SupeSite7.0是康盛创想(Comsenz)公司于2009年3月推出的一款社区CMS产品,作为Comsenz旗下的社区产品SupeSite 7.0 全面支持对 Discuz!、UCenter Home 的聚合功能。对于那些已经安装使用 Discuz! 和 UCenter Home 的站长来说,通过 SupeSite 7.0 可以快速搭建一个社区门户。

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

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

资讯分类及内容页面(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 及更改字体颜色。

5、最新评论/内容页最新报道

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

.global_tx_list3 li { height:25px; overflow:hidden; padding-left:12px; background:transparent url(../images/icon_li.gif) no-repeat scroll 0 11px; line-height:25px; }

// 最新评论/内容页最新报道文章列表样式,常见修改有更换文章列表前的小红图标 /images/icon_li.gif 。

.global_tx_list3 .box_r { padding-left:10px; color:#999; }

// 最新评论/内容页最新报道文章发布日期样式,常见修改为更改日期字体颜色 color:#999 。

ITION: absolute; TOP: 1428px"

6、资讯内容页

1)资讯文章标题

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

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

2)发布时间、作者、查看

#article_extinfo { padding-bottom:10px; color:#999; text-align:center; }

// 常见修改为更改字体颜色 color:#999 。

3)文章正文

#article_body { width:100%; overflow:hidden; clear:both; padding-top:10px; background:url(../images/dashed_bg.gif) repeat-x center top; font-size:1.17em; line-height:1.8em; clear:both; }

// 资讯文章正文整体样式控制,常见修改有更换上部的灰色虚线 /images/dashed_bg.gif,其他地方一般不需要修改。

#article_body strong { font-weight:700;}

// 开启 TAG 秀之后文章正文显示关键词的样式,常见修改有更改字体粗细 font-weight:700 以及添加字体颜色样式等。

#article img, #blog_body img { max-width:565px; width:expression(this.width 565 ? 563: true);}

4)TAG

#article_tag { padding:20px 15px 10px; }

// TAG 的定位,一般不需要修改。

5)打印 收藏此页 推荐给好友 举报

#article_op { margin:15px; padding:5px 0 8px; background:url(../images/dashed_bg.gif) repeat-x scroll center top; text-align:right; }

// 常见修改为更换上方的灰色虚线 /images/dashed_bg.gif,其他无需修改。

6)上一篇/下一篇

#article_pn { height:40px; overflow:hidden; margin:0 15px; }

#article_pn a { color:#369; text-decoration:underline; }

// 常见修改为更改链接字体的颜色 color:#369 。

7)评分

#X-Space-rates { text-align:center; height:50px; background:#FFF; padding:20px 0; border-bottom:none; margin-bottom:0; }

#X-Space-rates-bg { width:210px; height:30px; margin:0 auto 5px; background:url(../../../images/base/rate_star.gif); }

#X-Space-rates-star { height:30px; background:url(../../../images/base/rate_star.gif) 0 -30px; margin:0 auto 0 0; }

// 这里如果想要更改评分星星图片直接替换 /images/base/rate_star.gif 文件即可,其他无需修改。

8)评论

#sign_msg input, #sign_msg textarea { padding:2px; border:1px solid; border-color:#666 #CCC #CCC #666; line-height:16px; }

// 如需修改评论框边框颜色在此修改即可。

.input_search { width:54px; height:24px; overflow:hidden; border:none; background:url(../images/btn_search_bg.gif) no-repeat; text-align:center; line-height:24px; color:#FFF; font-weight:700; letter-spacing:1px; }

// “提交”按钮样式控制,如果需要更换“提交”按钮的背景图片只需替换 /images/btn_search_bg.gif 文件即可。

#comment_op { height:30px; overflow:hidden; margin:0 15px; padding-top:15px; color:#999; background:url(../images/dashed_bg.gif) repeat-x scroll center top; line-height:24px; }

// “【已有0位网友发表了看法】”、“查看全部回复”处的样式,常见修改为更改字体颜色 color:#999 。

#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 。

9)文章内容页图文资讯

.globalnews_piclist img { display:block; width:100px; height:70px; padding:1px; border:1px solid #D8D8D8; }

// 常见修改为更改图片边框样式 border:1px solid #D8D8D8 。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有