SupeSite7.0 Default template style resolution album

Source: Internet
Author: User

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

Supesite 7.0 is a community CMS product launched by Sing (Comsenz) in March 2009 as Comsenz's community product Supesite 7.0 fully supports the aggregation of discuz!, Ucenter home. For those that have been installed using discuz! and Ucenter home webmaster, through the Supesite 7.0 can quickly build a community portal.

We use the default template as an example to analyze its template style, Supesite 7.0 default template style sheet is \templates\default\css\common.css, so just modify the file to change the default template style.

Note: It is a good idea to make a copy of the default template before modifying it, leaving the default defaults directory to facilitate future product upgrades.

1, Album Home

1 Recent updates (slides)

The border of the entire recently updated module is controlled by the. Global_module style, which controls the border styles of many modules, which we have already analyzed before, so we don't repeat them here.

The common modified styles that correspond to the COMMON.CSS style sheet are:

#image_focus_big img {width:350px; height:276px}

Slide Large Size Control

#image_focus_small h3 {padding:8px 15px 12px;}

Recently updated module heading style control, if you want to modify the title font, you can add the appropriate style code here.

. 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; }

Slide thumbnails outer frame style control, common modifications have changes to the small chart border style border:1px solid #E0E9F2, background color background: #FFF, and font size font-size:85px.

. global_piclist Li div img,. user_photolist DL dt div img {max-width:100px; max-height:100px width:expression (this.width > && this.width > This.height? 100:true); Height:expression (This.height > 100:true); Vertical-align:middle; }

Slide thumbnail style control, set the maximum width and height of thumbnails is 100px, if the picture width is higher than this number is abbreviated to 100px, and the thumbnail center display.

2 album Talent this month

"This month's Got Talent" module's border and title background style is the same as the Home page information module, so do not repeat here.

The common modified styles that correspond to the COMMON.CSS style sheet are:

. image_user_list DL dt img {width:48px; height:48px padding:1px; border:1px solid #D8D8D8; background: #FFF;}

User avatar Style control, common changes have changed user avatar border style border:1px solid #D8D8D8 and change background color background: #FFF.

. image_user_list dl A {color: #369;}

Album name font Color control.

. image_user_list dl A {color: #369;}

Photo Album owner user name body color control.

3 Wonderful Album

"Wonderful album" module border and title background style are the same as the Home page information module, so do not repeat here.

The common modified styles that correspond to the COMMON.CSS style sheet are:

. 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; }

Single photo album module style control, common modification has to modify a single album of the high width, and replace its background picture/images/image_shadow_bg.gif.

. image_gallery_list DL dt img {max-height:100px max-width:100px width:expression this.width > && this.h Eight < this.width? 100:true); Height:expression (This.height > 100:true); Vertical-align:middle; }

Album cover picture Style control, set the maximum width of 100px, more than the thumbnail to 100px, vertical center display.

. image_gallery_list dd h6 a {color: #333!important;}

Album name font Color control.

. image_gallery_list dl A {color: #369;}

Photo Album belongs to the description "XX album" Font Color Control.

  

2. Album List (ImageList)

The common modified styles that correspond to the COMMON.CSS style sheet are:

. image_list_userinfo DL dt Div {display:table-cell; width:50px; height:52px; *height:50px; overflow:hidden; border:1px s Olid #E0E9F2; Text-align:center; Vertical-align:middle; *display:block; *font-size:42px; }

Album cover thumbnail style control, common changes have changed border style border:1px solid #E0E9F2, thumbnail size, and so on.

. image_list_userinfo dd H2 {color: #333;}

Album name font Color control.

. image_list_userinfo dd A {color: #369;}

View all albums for XX font Color control.

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

Album Picture list thumbnail bounding box style control, commonly modified to change the border size.

  

3. View photo Album (Imagedetail)

The common modified styles that correspond to the COMMON.CSS style sheet are:

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

"X", "Back to this album", "Previous", "Next" style control, commonly modified to change font colors color: #999.

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

"Back to this album", "Previous", "Next" text link style control, common changes have changed link font color: #369.

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

Photo Album picture display frame style control, common modification has modified picture display width width:900px and background color background: #F8F8F8.

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

Photo album style control, set the maximum width of 870px, if the picture width is greater than 870px then shrink slightly 870px width, if less than the direct display of the abbreviation.

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

Album Comment style control, common modification for change comment box width width:95%.

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

Comment on user avatar Style control, common modifications have changed avatar width height, and change avatar border style border:1px solid #D8D8D8.

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

Comment Head style control, common modifications have changed font color: #999.

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

Reviewer user name body color control.

  

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.