SupeSite7.0是康盛創(chuàng)想(Comsenz)公司于2009年3月推出的一款社區(qū)CMS產(chǎn)品,作為Comsenz旗下的社區(qū)產(chǎn)品SupeSite7.0全面支持對Discuz!、UCenterHome的聚合功能。
對于那些已經(jīng)安裝使用Discuz!和UCenterHome的站長來說,通過SupeSite7.0可以快速搭建一個社區(qū)門戶。我們以默認(rèn)模板為例分析一下其模板樣式,SupeSite7.0默認(rèn)模板的樣式表為/templates/default/css/common.css,所以只需要修改該文件即可更改default模板樣式。
注意:修改默認(rèn)模板之前最好復(fù)制一份進(jìn)行修改,保留默認(rèn)的default目錄,方便以后的產(chǎn)品升級。
1、日志首頁日志首頁的幻燈片樣式同首頁幻燈片樣式,“最新日志”、“本周熱門日志”、“本周熱評日志”幾個模塊樣式同首頁資訊模塊,所以此處不再贅述。
1)圖片故事在common.css樣式表中對應(yīng)的常見修改樣式有: #blog_pic_story{height:140px;overflow:hidden;border:1pxsolid#D8D8D8;background:#F8F8F8;} //“圖片故事”模塊樣式控制,常見修改有更改模塊邊框樣式border:1pxsolid#D8D8D8以及更改模塊背景色background:#F8F8F8。 #blog_pic_storyh3{padding:8px20px4px;} //“圖片故事”模塊標(biāo)題樣式控制,如需更改標(biāo)題顏色可在此添加對應(yīng)的樣式代碼。
2)最近更新在common.css樣式表中對應(yīng)的常見修改樣式有: #blog_new{height:467px;border:1pxsolid#D8D8D8;background:#F8F8F8;} //“最近更新”模塊樣式控制,常見修改有更改模塊邊框樣式border:1pxsolid#D8D8D8以及更改模塊背景色background:#F8F8F8。 #blog_newh3{padding:8px20px4px;} //“最近更新”模塊標(biāo)題樣式控制,如需更改標(biāo)題顏色可在此添加對應(yīng)的樣式代碼。 .global_avatar_listliimg{display:block;width:48px;height:48px;padding:1px;border:1pxsolid#D8D8D8;} //“最近更新”模塊用戶頭像樣式控制,常見修改有更改頭像邊框樣式border:1pxsolid#D8D8D8。 #blog_newul.txtli{height:28px;overflow:hidden;fontsize:14px;lineheight:28px;} //“最近更新”模塊下方日志列表樣式,常見修改有更改字體大小fontsize:14px,或者在此加入控制字體顏色的代碼來更改日志標(biāo)題顏色。
3)日志之星在common.css樣式表中對應(yīng)的常見修改樣式有: #blog_top{height:301px;border:1pxsolid#D8D8D8;background:#F7FDFD;color:#999;} //“日志之星”模塊樣式控制,常見修改有更改模塊邊框樣式border:1pxsolid#D8D8D8,更改模塊背景色background:#F7FDFD,以及更改模塊字體顏色color:#999。 #blog_toph3{padding:8px15px10px;color:#EB1C26;} //“日志之星”模塊標(biāo)題樣式控制,常見修改有更改標(biāo)題顏色color:#EB1C26。 #blog_topdtimg{display:block;width:48px;height:48px;padding:1px;border:1pxsolid#D8D8D8;} //“日志之星”模塊用戶頭像樣式控制,常見修改有更改頭像邊框樣式border:1pxsolid#D8D8D8。 #blog_topdda{color:#369;} //“日志之星”模塊日志標(biāo)題樣式控制,常見修改為更改標(biāo)題顏色color:#369。
4)熱門空間 “熱門空間”的邊框和背景色、標(biāo)題欄樣式同首頁資訊模塊,所以此處不再贅述。用戶頭像樣式同上面介紹過的“最近更新”里面的用戶頭像樣式:.global_avatar_listliimg
5)本月熱評/本月點擊排行 “本月熱評”、“本月點擊排行”兩個模塊的邊框、背景、標(biāo)題樣式完全同首頁的“版塊帖子數(shù)排行”,所以此處不再贅述。在common.css樣式表中對應(yīng)的常見修改樣式有: .global_tx_list6{marginbottom:10px;paddingbottom:0;background:url(../images/zebra_bg.gif)repeat031px;} //“本月熱評”、“本月點擊排行”兩個模塊樣式控制,常見修改為更換背景圖片/images/zebra_bg.gif。 .global_tx_list6ul{padding:015px030px;background:url(../images/top10_bg.gif)norepeat15px10px;} //“本月熱評”、“本月點擊排行”兩個模塊文章背景樣式控制,常見修改為更改背景圖片/images/top10_bg.gif。 .global_tx_list6.box_ra{color:#999;} //“本月熱評”、“本月點擊排行”兩個模塊文章作者用戶名字體顏色控制。
2、日志查看頁日志查看頁也有一部分樣式是跟其他頁面相同的,比如左側(cè)模塊的邊框和標(biāo)題背景等,所以這里我就不再詳細(xì)說明,圖片上標(biāo)注出來了。在common.css樣式表中對應(yīng)的常見修改樣式有: .blog_usera{color:#369;}//日志作者用戶名/“查看TA的全部日志”字體顏色。 #blog_detail.box_r{width:770px;}//日志正文寬度控制。 #blog_articleh1{paddingbottom:8px;color:#369;fontsize:16px;fontweight:400;}//日志文章標(biāo)題樣式控制,常見修改有更改日志標(biāo)題字體顏色color:#369、字體大小fontsize:16px、字體粗細(xì)fontweight:400。 #blog_article.blog_tipinfo{padding:8px015px;background:url(../images/dashed_bg.gif)repeatxcentertop;color:#999;}//“發(fā)布/作者/來源/查看/字號”樣式控制,常見修改有更改字體顏色color:#999。 #articleimg,#blog_bodyimg{maxwidth:565px;width:expression(this.width>565?563:true);}//日志文章縮略圖顯示控制,這里同資訊文章縮略圖控制,圖片最大顯示寬度為565px,如果寬度大于565px則縮略為563px顯示。 #blog_article.blog_op{padding:8px0;background:url(../images/dashed_bg.gif)repeatxcentertop;textalign:right;color:#369;}#blog_article.blog_opa{color:#369;textdecoration:underline;}//“打印收藏此頁推薦給摯友舉報”模塊樣式控制,常見修改有更改字體鏈接顏色color:#369。 .bg_f8{background:#F8F8F8;}//評論部分背景色控制。 .u_comment_list.u_avatarimg{width:48px;height:48px;padding:1px;border:1pxsolid#D8D8D8;}//評論用戶的頭像樣式控制,常見修改為更改邊框樣式
border:1pxsolid#D8D8D8。 .u_comment_list.u_title{paddingbottom:5px;color:#999;lineheight:12px;}//評論日期時間樣式控制,常見修改有更改字體顏色color:#999。
新聞熱點
疑難解答
圖片精選