分享
 
 
 

SupeSite7.0默认模板样式解析之相册篇

王朝网站推广·作者佚名  2011-12-04
窄屏简体版  字體: |||超大  

SupeSite 7.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 目录,方便以后的产品升级。

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(this.width > 100 && this.width > this.height ? 100: true); height:expression(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(this.width > 100 && this.height < this.width ? 100:true); height:expression(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 的相册”字体颜色控制。

2、相册列表(imagelist)

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

.image_list_userinfo dl dt div { display:table-cell; width:50px; height:52px; *height:50px; overflow:hidden; border:1px solid #E0E9F2; text-align:center; vertical-align:middle; *display: block; *font-size:42px; }

// 相册封面缩略图样式控制,常见修改有更改边框样式 border:1px solid #E0E9F2,缩略图大小等。

.image_list_userinfo dd h2 { color:#333; }

// 相册名称字体颜色控制。

.image_list_userinfo dd a { color:#369; }

// “查看 XX 的全部相册”字体颜色控制。

.global_piclist li{ position:relative; display:inline; float:left; width:106px; height:123px; overflow:hidden; margin-left:7px; }

// 相册图片列表缩略图外框样式控制,常见修改为更改边框大小。

3、查看相册图片(imagedetail)

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

.image_caption { width:900px; margin:0 auto; padding:5px 0; overflow:hidden; color:#999; }

// “第 x/x 张”、“返回该相册”、“上一张”、“下一张”样式控制,常见修改为更改字体颜色 color:#999 。

.image_caption a { color:#369; text-decoration:underline; margin-left:5px; }

// “返回该相册”、“上一张”、“下一张”文字链接样式控制,常见修改有更改链接字体颜色 color:#369 。

.image_bigshow { width:900px; margin:0 auto; padding:15px 0; background:#F8F8F8; text-align:center; }

// 相册图片展示外框样式控制,常见修改有修改图片展示宽度 width:900px 以及背景色 background:#F8F8F8 。

.image_bigshow img { max-width:870px; width:expression(this.width > 870 ? 870: true); }

// 相册图片样式控制,设定最大宽度为 870px,如果图片宽度大于 870px 则缩略为 870px 宽度,如果小于不缩略直接显示。

.u_comment_list { width:95%; overflow:hidden; margin:0 auto 10px; padding:8px; }

// 相册评论样式控制,常见修改为更改评论框宽度 width:95% 。

.u_comment_list .u_avatar img { width:48px; height:48px; padding:1px; border:1px solid #D8D8D8; }

// 评论用户头像样式控制,常见修改有更改头像宽高,以及更改头像边框样式 border:1px solid #D8D8D8 。

.u_comment_list .u_title { padding-bottom:5px; color:#999; line-height:12px; }

// 评论头部样式控制,常见修改有更改字体颜色 color:#999 。

.u_comment_list .u_title a { color:#369;}

// 评论者用户名字体颜色控制。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
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- 王朝網路 版權所有