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










7.0
默认模板样式解析之相册篇(uchimage)
2009-08-21┆29,145 Views┆23

我们以默认模板为例分析一下其模板样式,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)http://faq.comsenz.com/viewnews-838

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

六、相册(uchimage)

1、相册首页

1)最近更新(幻灯片)

整个“最近更新”模块的边框由 .global_module 样式控制,这个参数控制很多模块的边框样式,之前的文章里我们已经做过分析了,所以此处不再赘述。

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

    CODE: [COPY]
  • #image_focus_big img { width:350px; height:276px; }

// 幻灯片大图大小控制

    CODE: [COPY]
  • #image_focus_small h3 { padding:8px 15px 12px;}

// “最近更新”模块标题样式控制,如需修改标题字体可在此添加相应样式代码。

    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,以及字体大小 font-size:85px 。

    CODE: [COPY]
  • .global_piclist li div img, .user_photolist dl dt div img max-width:100pxmax-height:100pxwidth:expression(this.width 100 && this.width this.height 100true); height:expression(this.height 100 100true); vertical-align:middle; }

// 幻灯片小图样式控制,设定缩略图最大宽度和高度都为 100px,如果图片宽高大于这个数值则缩略到 100px,并且缩略图居中显示。

2)本月相册达人

“本月相册达人”模块的边框和标题背景样式均同首页资讯模块,所以此处不做赘述。

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

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

// 用户头像样式控制,常见修改有更改用户头像边框样式 border:1px solid #D8D8D8 以及更改背景色 background:#FFF 。

    CODE: [COPY]
  • .image_user_list dl a color:#369; }

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

    CODE: [COPY]
  • .image_user_list dl a color:#369; }

// 相册所有者用户名字体颜色控制。

3)精彩相册

“精彩相册”模块的边框和标题背景样式均同首页资讯模块,所以此处不做赘述。

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

    CODE: [COPY]
  • .image_gallery_list dl display:inlinefloat:leftwidth:284pxheight:120pxoverflow:hiddenmargin:10px 0 10px 22pxbackground:url(../images/image_shadow_bg.gifno-repeat; }

// 单个相册模块样式控制,常见修改有修改单个相册的高宽,以及更换其背景图片 /images/image_shadow_bg.gif 。

    CODE: [COPY]
  • .image_gallery_list dl dt img max-height:100pxmax-width:100pxwidth:expression(this.width 100 && this.height this.width 100:true); height:expression(this.height 100 100:true); vertical-align:middle; }

// 相册封面图片样式控制,设定最大宽高都为 100px,超过则缩略到 100px,纵向居中显示。

    CODE: [COPY]
  • .image_gallery_list dd h6 a color:#333!important; }

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

    CODE: [COPY]
  • .image_gallery_list dl a color:#369; }

// 相册所属说明“XX 的相册”字体颜色控制。

2、相册列表(imagelist)

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

    CODE: [COPY]
  • .image_list_userinfo dl dt div display:table-cellwidth:50pxheight:52px; *height:50pxoverflow:hiddenborder:1px solid #E0E9F2; text-align:center; vertical-align:middle; *display: block; *font-size:42px; }

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

    CODE: [COPY]
  • .image_list_userinfo dd h2 color:#333; }

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

    CODE: [COPY]
  • .image_list_userinfo dd a color:#369; }

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

    CODE: [COPY]
  • .global_piclist liposition:relativedisplay:inlinefloat:leftwidth:106pxheight:123pxoverflow:hiddenmargin-left:7px; }

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

3、查看相册图片(imagedetail)

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

    CODE: [COPY]
  • .image_caption width:900pxmargin:0 autopadding:5px 0overflow:hiddencolor:#999; }

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

    CODE: [COPY]
  • .image_caption a color:#369; text-decoration:underline; margin-left:5px; }

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

    CODE: [COPY]
  • .image_bigshow width:900pxmargin:0 autopadding:15px 0background:#F8F8F8; text-align:center; }

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

    CODE: [COPY]
  • .image_bigshow img max-width:870pxwidth:expression(this.width 870 870true); }

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

    CODE: [COPY]
  • .u_comment_list width:95%; overflow:hiddenmargin:0 auto 10pxpadding:8px; }

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

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

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

    CODE: [COPY]
  • .u_comment_list .u_title padding-bottom:5pxcolor:#999; line-height:12px; }

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

    CODE: [COPY]
  • .u_comment_list .u_title a color:#369;}

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

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


23

满意

不满意

本篇文章用到的Tags : 模板 相册 样式 uchimage

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