Discuz模板修改教程演示

1、Discuz 模板修改教程演示Discuz 教程演示 , Discuz 模板修改 近幾天做了幾套模板先將心的整理一下發(fā)給大家以供各位參考借鑒。 在做模板之前大家最好具備一些基本的網(wǎng)頁(yè)制作方面的知識(shí)。 那么咱們先來(lái)看看如何制作一 套簡(jiǎn)單的模板流程。1、在 Photoshop 中制作風(fēng)格頁(yè)面并切圖保存；2、制作 html 文檔， css 調(diào)整；在開始前，先了介紹一下discuz! 的幾個(gè)模板文件：1、header.htm-頁(yè)面頭部2、discus.htm- 論壇首頁(yè)3、index_header.htm-頭部發(fā)帖按鈕，和公告內(nèi)容頁(yè)。4、footer.htm- 頁(yè)面底部5、viewthread.htm

2、- 查看帖子內(nèi)容6、css_common.htm-公共樣式 css樣式頁(yè)面7、css_script.htm-其他常用 css樣式頁(yè)面首先我們要制作的這套模板叫test,那么我就在templates目錄下建立一個(gè)test目錄。在 test 目錄下再新建一個(gè) images 文件夾用于存放這套模板的圖片，把切好的所有圖片保 存到這個(gè)文件夾中。templates/test 文件夾用于存放這套模板的 htm 文件,首先我們先到 default 默認(rèn)模板下面去 復(fù)制 header.htm、 discuz.htm、 footer.htm 這三個(gè) htm 文件。然后分別打開著三個(gè)文件,可能 這里你需要一些常用

3、的htm語(yǔ)言常識(shí)，和一些基本的css語(yǔ)法。如果你不會(huì)的話可以去查閱一些資料。我們大多時(shí)候我們不必完全去重新做。默認(rèn)模板的head 等頭部信息我們還是非常有必要要保留。將你做好的靜態(tài)文件的切圖我ps縮小成一個(gè)110X120大小名為preview.jpg的圖片放到test目錄下（這是后臺(tái)安裝界面顯示的縮略圖） 。接 下來(lái)的工作要在論壇后臺(tái)設(shè)置中來(lái)完成（1） 進(jìn)入論壇點(diǎn)擊 “系統(tǒng)設(shè)置 > 界面 > 模板管理”, 在新增模板后填入模板 名稱,模板文件所在目錄,板權(quán)信息然后提交即可！如（3）然后切換到“系統(tǒng)設(shè)置 > 界面 >風(fēng)格管理” ,您就可以 在界面風(fēng)格 中看到您所定義的新的

4、風(fēng)格方案。點(diǎn)擊安裝就可以了！如下圖：（4）然后點(diǎn)擊 編輯 后就可以進(jìn)入該模板的風(fēng)格配色方案的編輯頁(yè)面,此根據(jù)你的界 面風(fēng)格配色方案設(shè)置一下你的配色方案。具體的設(shè)置參數(shù),主要對(duì)應(yīng)的前臺(tái)顯示效果參照如下鏈接地址的標(biāo)注：_f填寫好后,點(diǎn) 擊“提交”,更新一下緩存,就 ok 了。在這里我只是簡(jiǎn)略的介紹一下安裝成 品模板的方法。在制作模板的過(guò)程中我們大多數(shù)的精力主要集中在樣式的調(diào)整。不過(guò)dz 給我們提供了簡(jiǎn)單快捷的調(diào)試方式。你可以將需要修改的樣式寫到css_appendhtm ,它的代碼是：$extraheadsubtemplate css_script根據(jù)css的特點(diǎn)，在css_appendhtm里的

5、樣式將覆蓋 css_commen.htm中的文件的。注意只是 覆蓋原有的屬性。沒(méi)有修改的屬性將依舊調(diào)用 css_commen.htm 的樣式。這樣我們各以節(jié)省 很多的代碼。同樣對(duì)于 css_script.htm 同樣如 css_commen.htm 一樣。 你只需要在新建一個(gè)文件css_script_appe nd.htm文件。將所需修改的樣式拷貝到css_script_appe nd.htm，但需要注意的是一定按dz的規(guī)范，將css樣式寫入你所修改的代碼所在的標(biāo)簽中。例如：CURSCRIPT = index/CURSCRIPT下面我將逐步介紹如何簡(jiǎn)單的調(diào)整htm模板文件和css，文件以幫助大

6、家更好的了解如何更好的來(lái)了解模板文件。一、首先我們將 default 默認(rèn)模板文件夾下的：1、header.htm-頁(yè)面頭部2、discus.htm-論壇首頁(yè)4、footer.htm- 頁(yè)面底部同時(shí)新建一個(gè)css_append.htm文件。用來(lái)填寫你需要記錄的css樣式。一般我們通常需要移動(dòng)的元素和樣式主要有以下集中元素。網(wǎng)站頭部： header.htm1 頭部登錄注冊(cè)菜單菜單，主要對(duì)應(yīng)的 htm 代碼標(biāo)簽為 <div id="umenu"> </div>主要對(duì)應(yīng)的 css樣式為 css_commen.htm 中的：#menu position: a

7、bsolute; right: 0; bottom: 0; _bottom: -2px; height: 26px; #menu li display: inline; float: left; margin-left: 5px; MENUBGCODE; #menu a float: left; padding: 0 14px; height: 25px; border: solid MENUBORDER; border-width: 1px 1px 0; background: transparent none; line-height: 25px; color: MENUTEXT; tex

8、t-decoration: none; overflow: hidden; #menu a.dropmenu padding-right: 20px; background-image: url(IMGDIR/arrow_down.gif); background-repeat: no-repeat; background-position: 95% 50%; #menu a:hover border-color:HEADERBORDERCOLOR; background-color:MENUHOVER; color: MENUHOVERTEXT; #menu li.current a hei

9、ght: 26px; border-color: HEADERBORDERCOLOR; background-color:MENUHOVER; color: MENUHOVERTEXT; 2. 網(wǎng)站 logo.gif 我們一般通過(guò)后臺(tái)來(lái)調(diào)節(jié)他。主要對(duì)應(yīng)的 htm 代碼標(biāo)簽為：<h2><a href="$indexname" title="$bbname">BOARDLOGO</a></h2>主要對(duì)應(yīng)的樣式為： #header .wrap position: relative; padding: 24px 0

10、 22px; #header h2 float: left; 當(dāng)然有些css并不是直接加大元素上的有時(shí)候他們需要間接，復(fù)合來(lái)控制。至于效果你要自 己修改看看。3. 頭部的導(dǎo)航欄對(duì)頂主要對(duì)應(yīng)的htm 代碼標(biāo)簽為：<div class="menu"></div>主要對(duì)應(yīng)的樣式為 css_commen.htm 中的 :#menu .menu1 background:url(STYLEIMGDIR/menu_bg.gif) no-repeat scroll 0 0 transparent;height:35px;margin:0;padding-left:2

11、5px;#menu .menu1 ul float:left; width:700px; #menu a font-size:14px; border:medium none; color:#7FA1C4; font-size:14px; line-height:27px;#menu a:hover background-color: transparent; #menu li.current background:url(STYLEIMGDIR/menu_cur.gif) no-repeat scroll 0 0 transparent;#menu li.current a *height:

12、 35px; border:0 solid HEADERBORDERCOLOR; background: MENUHOVER url(STYLEIMGDIR/menu_cur.gif) repeat-x right -27px; overflow: hidden; height:35px; #menu li display:inline; float:left; margin-left:5px; height:27px; margin:4px 0 0; list-style:none outside none; 一般都不文件大體上包含著三個(gè)元素至于一些細(xì)節(jié)問(wèn)題你就要自己親自動(dòng)手試一試了。二、下

13、面是 discuz.htm 文件需要修改的地方。 主要對(duì)應(yīng)得 htm 代碼為 discuz.htm 中的： <div id="nav"></div>主要對(duì)應(yīng)的樣式為 css_commen.htm 中的：#nav margin: -8px auto 0; background: url(IMGDIR/icon_nav.gif) no-repeat 0 50%; text-align: left; text-indent: 25px; line-height: 3em; #nav, #nav a color: MENUHOVERTEXT; 通常在大家修改

14、邊內(nèi)容區(qū)的時(shí)候需要修改： 板塊下面的背景和版塊前面的默認(rèn)圖標(biāo)。 這里主 要是通過(guò)以下 css 來(lái)控制實(shí)現(xiàn)的：.list border-top: 3px solid COMMONBORDER; .content .list h3 padding-left: 6px; color: MIDTEXT; line-height: 35px; .list td, .list th height: 50px; padding: 6px 0; border-top: 1px dashed COMMONBORDER; color: MIDTEXT; .list th background: url(IMGDI

15、R/forum.gif) 5px 10px no-repeat; padding-left: 45px !important; .narrowlist th vertical-align: top; .list th.new background-image: url(IMGDIR/forum_new.gif); .list th h2 em font-weight: 400; .list th h2 em strong color: NOTICETEXT 注意這里的變量 IMGDIR 這種 php 變量在。后臺(tái) -界面 -風(fēng)格管理 -編輯 -高級(jí)模式 中都有。他會(huì)到你置頂?shù)哪夸浵氯ニ褜D片。

16、如圖：內(nèi)容列表：主要對(duì)應(yīng)得 htm 代碼為：<div id="nav"></div>主要對(duì)應(yīng)的樣式為 css_commen.htm 中的： 友情鏈接：主要對(duì)應(yīng)的 htm 代碼為 discuz.htm 中的<!-if$_DCACHE'forumlinks'0 | $_DCACHE'forumlinks'1 |$_DCACHE'forumlinks'2-><div class="mainbox list"><h3><span class=&quo

17、t;headactions"><img id="forumlinks_img" src="STYLEIMGDIR/$collapseimgforumlinks.gif" alt="" /></span>lang board_links</h3><div id="forumlinks" style="$collapseforumlinks"><!-if $_DCACHE'forumlinks'0-><

18、div class="forumlinks"><ul class="s_clear">$_DCACHE'forumlinks'0</ul></div><!-/if-><!-if $_DCACHE'forumlinks'1-><div class="forumimglink">$_DCACHE'forumlinks'1</div><!-/if-><!-if $_DCACHE'

19、forumlinks'2-><div class="forumtxtlink"><ul class="s_clear">$_DCACHE'forumlinks'2</ul></div><!-/if-></div></div><!-/if->主要對(duì)應(yīng)的樣式為 css_script.htm 中的：.forumlinks, .forumimglink, .forumtxtlink padding: 6px; border-top: 1p

20、x solid COMMONBORDER; .forumlinks ul li float: left; width: 49%; height: 50px; line-height: 1.4em; .forumimglink a margin-right: 8px; .forumimglink img margin: 2px 0; .forumlogo float: left; padding-top: 2px; width: 100px; .forumcontent padding-right: 18px; height: 50px; .forumcontent p overflow: hi

21、dden; height: 17px; color: MIDTEXT; .forumtxtlink li float: left; margin-right: 5px; width: 8em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 在線會(huì)員：對(duì)應(yīng)的 dscuz.htm 中的標(biāo)簽為：<div class="mainbox list" id="online"></div>#online h3 font-weight: 400; #online h

22、3 a, #online h3 em, #online h3 strong font-weight: 700; 三、下面是 index_header.htm 文件需要修改的地方。主要對(duì)應(yīng)的 htm 標(biāo)簽風(fēng)別為：頭部 <div class="pages_btns s_clear"></div> 主要涉及到的需要修改的 css 為 css_commen.htm 中的：.pages_btns padding: 5px 0 1em; line-height: 30px; 和.postbtn, .replybtn width: 67px; height: 30

23、px; background: url(IMGDIR/newtopic.gif) no-repeat 0 0; font-size: 14px; font-weight: 700; line-height: 28px; *line-height: 32px; text-align: center; overflow: hidden; .replybtn background-image: url(IMGDIR/reply.gif); .postbtn a, .replybtn a display: block; padding-left: 5px; color: #FFF; letter-sp

24、acing: 5px; .postbtn a:hover, .replybtn a:hover text-decoration: none; 底部公告內(nèi)容 - - <div id="ann"></div>主要涉及到的需要修改的css 為#ann margin: 5px 0 10px; padding: 2px 5px; line-height: 30px; border: solid COMMONBORDER; border-width: 1px 0; background: COMMONBG; #ann dl overflow: hidden; #

25、ann dt float: left; width: 5em; background: url(IMGDIR/ann_icon.gif) no-repeat 0 50%; text-indent: 2em; font-weight: 700; #ann dd margin-left: 30px; #ann li padding-left: 10px; white-space: nowrap; #ann em margin-left: 5px; color: MIDTEXT; font-size: 0.83em; #annbody height: 30px; overflow: hidden;

26、padding-right: 16px; 三、下面是 index_navbar.htm 文件需要修改的地方。 主要涉及到的需要修改的css 為 css_commen.htm 中的：.itemtitle clear: both; overflow: hidden; margin-bottom: 10px; line-height: 23px; 四、首頁(yè)邊欄對(duì)應(yīng)的 html 代碼為：<div id="sidebar" class="side" style="$collapsesidebar"></div>五、首頁(yè)底

27、部對(duì)應(yīng)的 html 代碼為：<div id="footer"></div>主要涉及到的需要修改的css 為 css_commen.htm 中的：#footer padding: 1em 0; #rightinfo float: left; #footlink float: right; text-align: right; #footer, #footer a color: FOOTERTEXT; 在修改之前你應(yīng)該了解一下有關(guān)模板的知識(shí)。默認(rèn)的 discuz 的模板文件時(shí)存放在根目錄的 ./template/default/文件下的htm文件。在這個(gè)

28、文件夾下以css_頭的文件時(shí)控制默認(rèn)模板的css樣式表。所有的關(guān)于樣式的文件你都可以在這里修改。如果你是個(gè)新手，建議你不要去修改 css_common.htm 文件中的文件。你可以吧你需要修改 后的樣式拷貝到 css_append.htm文件。就是受你不需要?jiǎng)觕ss_common.htm的任何代碼，只需要把你修改后的 css代碼寫到css_append.htm這個(gè)文件夾下。(這方便將你的代碼和源程序 代碼分開。如果你想要恢復(fù)默認(rèn)的樣式，直接清空css_appe nd.htm文件就可以了。)另外一個(gè)經(jīng)常需要修改的 css 文件就是 css_script.htm 文件。中的代碼不可以拷貝到 css

29、_append.htm 文 件 中 。 如 果 你 要 修 改 可 以 單 獨(dú) 在 重 新 新 建 一 個(gè) 文 件 命 名 為 css_script_append.htm文件把，你需要修改的樣式按照css_script中的樣式規(guī)范寫入這個(gè)文件例如一下形勢(shì)。 ：CURSCRIPT = index(此處為當(dāng)前應(yīng)用此 css樣式的頁(yè)面文件。) #ann margin: 5px 0 10px; padding: 2px 5px; line-height: 30px; border: solid COMMONBORDER; border-width: 1px 0; background: COMMONB

30、G; /CURSCRIPT默認(rèn)模板頭部修改視圖：2010-3-17 10:41 上傳 下載附件 (15.92 KB)header如上圖所示：此頭部文件對(duì)應(yīng)的元素主要對(duì)應(yīng)三個(gè)元素。頭部的logo :這個(gè)部分你可以通過(guò)在后臺(tái)設(shè)置界面-模板風(fēng)格-編輯-高級(jí)模式。2010-3-17 10:41 上傳 下載附件 (65.12 KB) admincp 在這里來(lái)替換你自己的 logo 就課可以了。當(dāng)然你可以調(diào)節(jié)你的頭背景。顏色，或者給頭部 替換一個(gè)背景圖片而不是單純的顏色。你也可以在后臺(tái)進(jìn)行設(shè)置。還是圖二所在的頁(yè)面 -找到2010-3-17 10:41 上傳 下載附件 (21.29 KB) header_b

31、g 在這里你可以設(shè)置頁(yè)頭的背景顏色。 也可以設(shè)置背景圖片來(lái)設(shè)置你單調(diào)的頭部背景色。 但要 注意的是在添加背景圖片的時(shí)候一定要注意他的附加屬性。 這一點(diǎn)很重要如果你的背景想居 中顯示的話可以設(shè)置為 熱 no-repeat 50% 50% 這里的 no-repeat 控制的是當(dāng)您的圖片不足以 鋪滿整個(gè)頭部時(shí)。是否平鋪該背景。我們?cè)俅嗽O(shè)置成不平鋪。默認(rèn)的是以 images/default 的 header.gif 圖片水平平鋪。所以一條西線就成了一個(gè)夠?qū)挼漠嫴急尘傲?。在你順利設(shè)置完這些元素后， 你可能發(fā)現(xiàn)由于元素尺寸的改變而導(dǎo)致了整體尺寸布局的不協(xié) 調(diào)這樣我們就需要調(diào)節(jié) css 了。如我上面所說(shuō)的。

32、如果我們是初學(xué)者可以再不動(dòng)原樣式的情 況下修改。Logo 默 認(rèn) 放 置 的 位 置 是 在 ： header.htm 中 的 <h2><a href="$indexname" title="$bbname">BOARDLOGO</a></h2> 標(biāo)簽中的。如果你想調(diào)節(jié)它的上下左右邊距可以 將 css_common.htm 中需要修改的代碼拷貝到css_append.htm 中。#header h2 float:left; padding:10px 60px; 通過(guò)設(shè)置它的各項(xiàng)屬性來(lái)控制 logo 的位置。

33、 當(dāng)然具體的屬性值例如margin ，padding 的含義再次我就不多說(shuō)了，你可以到網(wǎng)上搜索一下。下面我來(lái)介紹第二個(gè)元素 <div id="umenu"></div> 關(guān)于它的設(shè)置我在這里具體說(shuō)兩點(diǎn)。一它的位置調(diào)節(jié)樣式為 css_common.htm 中的：#umenu position: absolute; right: 0; top: 0; line-height: 20px; 二它的顏色， 你可以通過(guò)后臺(tái)同意設(shè)置它的顏色。不過(guò)可能會(huì)改動(dòng)其他元素的顏色。如果你要單 獨(dú)設(shè)置 的話去 修改：#umenu, #umenu a, #umenu .pip

34、e color: HEADERTEXT; 去掉這個(gè)樣式的顏色變量，來(lái)單獨(dú)給他設(shè)置。這樣既不影響頁(yè)面原有顏 色基礎(chǔ)上，單獨(dú)更改它的顏色。第三個(gè)元素導(dǎo)航欄：此元素默認(rèn)是可以再后臺(tái)修改的如下圖：2010-3-17 10:41 上傳 下載附件 (89.48 KB)menu他在header.htm中包含在下面的元素中：<div id="menu"></div>它的位置樣式調(diào)節(jié)為：#menu bottom:0; height:26px; position:absolute; right:0; 由英文直譯可知他在頭部盒模型(不懂的去搜索一下 )中定位方式為絕對(duì)定位

35、， 距離 bottom 為0，右邊距為 0；所以他出現(xiàn)的位置為右下方。如果你不滿足于已有的 最后在頭部文件中海包括一個(gè)風(fēng)格切換的按鈕這個(gè)元素也是頭部元素中的。它對(duì)應(yīng)于header.htm 文件中的：<ul id="style_switch"></ul> 它的位置調(diào)節(jié)樣式為： #style_switch position: absolute; right: 0px; bottom: -25px; 現(xiàn)在我已經(jīng)基本介紹完了頭部元素。大家可以參照著對(duì)官方皮膚做一些嘗試了。 上篇我已經(jīng)介紹過(guò)了最主要頭部文件現(xiàn)在我們接著 header 篇的教程接著往下將。下面就

36、到 了內(nèi)容區(qū)的內(nèi)容了。 也就是默認(rèn)模板文件中的 discuz.htm 中的內(nèi)容。 這個(gè)文件里所包含的內(nèi) 容比較多下面我們來(lái)逐個(gè)分析一下它 :第一部分 :2010-3-26 12:57 上傳 下載附件 (5.48 KB) 這個(gè)區(qū)域放置在 discuz.htm 中的頭部最右側(cè)的風(fēng)格切換按鈕并不是這一部分的.它是 header部分的 .在這部分通常需要修改的地方不多 .他的 htm 文件內(nèi)容放置在 : <div id="nav"></div> 標(biāo)簽 樣式主要放在 css_commen.htm 中的：#nav margin: -8px auto 0; bac

37、kground: url(IMGDIR/icon_nav.gif) no-repeat 0 50%; text-align: left; text-indent: 25px; line-height: 3em; #nav, #nav a color: MENUHOVERTEXT; 如果你想知道以上代碼的意思。 可以的奧網(wǎng)上去查查每個(gè)屬性的意思， 然后根據(jù)你要修改的 要求給予其適當(dāng)?shù)闹?。接著下面到了?yè)面的主題內(nèi)容區(qū)域： 下面我分塊給大家一部分一部分的剖析，首先是如下圖的這部分：2010-3-26 12:57 上傳 下載附件 (21.47 KB) 我們這里通常需要注意的是： 1發(fā)帖按鈕和他旁邊的一

38、行字，還有下面的整個(gè)公告并不是在discuz.htm 文件中的。他們統(tǒng)一放在 index_header.htm 的文件中。結(jié)構(gòu)很清晰得分為上下兩部分。 在這里需要重點(diǎn)介紹的是 發(fā)帖按鈕 我們通常會(huì)替換這個(gè)按鈕成我們自己的按鈕。 那么我們 需要去改動(dòng)它的樣式。我們?nèi)?./tempaltes/default/css_script.htm 中找到如下代碼： .postbtn, .replybtn width: 67px; height: 30px; background: url(IMGDIR/newtopic.gif) no-repeat 0 0; font-size: 14px; font-we

39、ight: 700; line-height: 28px; *line-height: 32px; text-align: center; overflow: hidden; .replybtn background-image: url(IMGDIR/reply.gif); 你可以更換你的 圖片， 添加如下代碼 到你的 模板 文件夾下的 css_script.htm 或 者 css_script_append.htm 中。background: url(IMGDIR/ 你的圖片 .gif) no-repeat 0 0; 在這里需要注意的是變量 IMGDIR 變量。他帶表的是系統(tǒng)中的默認(rèn)文件的

40、路徑。對(duì)應(yīng)得 是./images/default/.當(dāng)然如果你安裝了其他模板，一般情況下在它的目錄下會(huì)有一個(gè)images文件。我們通常把與模板套系相關(guān)的圖片放到里面。如果你想以用里面的圖片可以這么寫： background: url(STYLEIMGDIR/ 你的圖片 .gif) no-repeat 0 0;就可以引用到你的圖片地址 了。當(dāng)然你在這里改了之后帖子列表頁(yè)和帖子內(nèi)容也得發(fā)帖按鈕也會(huì)變。 因?yàn)樗鼈儜?yīng)用的是同一 套樣式。另外一個(gè)經(jīng)常需要修改的地方莫過(guò)于公告的樣式了。你經(jīng)常需要來(lái)改變它的各部分顏色值，以便能更好的額融合到你模板中。那讓我們來(lái)看看我們需要修改那些地方：#ann margin

41、: 5px 0 10px; padding: 2px 5px; line-height: 30px; border: solid COMMONBORDER; border-width: 1px 0; background: COMMONBG; #ann dl overflow: hidden; #ann dt float: left; width: 5em; background: url(IMGDIR/ann_icon.gif) no-repeat 0 50%; text-indent: 2em; font-weight: 700; #ann dd margin-left: 30px; #a

42、nn li padding-left: 10px; white-space: nowrap; #ann em margin-left: 5px; color: MIDTEXT; font-size: 0.83em; 好了控制它的外形的就是這幾個(gè)了。你至于每一項(xiàng)代表的是什么意義你自己試試就會(huì)知道 了。當(dāng)然公告的小喇叭你想換的話按照上面的發(fā)帖按鈕的方法就可以了。 在這里需要特別注意的是形如 COMMONBORDER 的這種代碼是一般我們可以在后臺(tái)自 己編輯的。 可能有好多元素應(yīng)用了這種樣。 如果你改變的他的值可能好多地方需也會(huì)跟著修 改。在這里我建議你直接用你的顏色代碼直接替換這個(gè)變量。 這樣就可

43、以單獨(dú)修改此元素的屬性 了。2.至 于最 下方的論 壇版 塊和 論 壇動(dòng) 態(tài)。 這 連個(gè) 按鈕 的代碼 文件 單獨(dú)放 在index_navbar.htm 中。他們一般很少改動(dòng)。 不過(guò)經(jīng)常出現(xiàn)的一種情況是更換背景的藍(lán)色底紋， 你需要給他換個(gè)顏色，那就去修改它的背景圖吧- images/default/btn_block.gif至于它右側(cè)的發(fā)帖數(shù)和會(huì)員數(shù)。你能會(huì)修改它的位置。那么就去移動(dòng) discuz.htm 中的 <p class="right forumcount">lang index_today: <em>$todayposts</em&g

44、t;, lang index_yesterday: <em>$postdata0</em>, lang index_members: <em>$totalmembers</em></p> 這段代碼吧，將它放到你需要的地方。 下面我們來(lái)介紹正文了這也是大家最常用的部分，和修改最頻繁的部分： 我以默認(rèn)的和大家通常修改完后的樣式對(duì)照著個(gè)大家說(shuō)明一下這部分2010-3-26 12:57 上傳 下載附件 (17.68 KB) 以上是默認(rèn)的模板樣式。我們通常想要將他改成如下這種類型的。2010-3-26 12:57 上傳 下載附件 (50.93

45、KB) 下面我們一部分一部分的來(lái)看首先是 -頭部的一條 3px 的粗線和板塊名稱，右上部的分區(qū) 版主和展開收縮的圖片按鈕。對(duì)應(yīng)的 html 代碼為：<span class="headactions"><!-if$cat'moderators'->langforum_category_modedby: $catmoderators<!-/if-><img id="category_$catfid_img" src="IMGDIR/$catcollapseimg" title=&q

46、uot;lang spread" alt="lang spread" /></span><h3><a href="$indexname?gid=$catfid" style="if $catextranamecolorcolor: $catextranamecolor;/if">$catname</a></h3> 我們通常要給這一塊區(qū)域加一個(gè)背景這時(shí)候。你需要做的就是去掉頂部的淡紅色粗線：我們需要到 css_commen.htm 中去修改這么一行代碼 :.li

47、st border-top: 3px solid COMMONBORDER; 你只要將他修改為 0 就可以將這條線去掉了。當(dāng)然你可能需要給整個(gè)區(qū)域加一條框如第二幅圖展示的那樣， 那么你只要將行代碼稍加修改 改為：.list border: 1px solid COMMONBORDER; 就可以了。 下面就是給個(gè)頭部添加你已經(jīng)準(zhǔn)備好的圖片背景。為此我們需要添加這么一行代碼：.content .list h3 padding-left: 9px; line-height: 31px; background: #D1E3EE url(STYLEIMGDIR/header_bg.gif) repeat

48、-x; color: LINK; ；這里需要注意的是我們所準(zhǔn)備的圖片經(jīng)常是很細(xì)的一條線。 我們只要平鋪?zhàn)屗谒椒较蚱?鋪就可以了。 另外經(jīng)常遇到的一個(gè)問(wèn)題是。 Line-height 你可以通過(guò)調(diào)節(jié)這個(gè)數(shù)值使你的標(biāo)題 在垂直方向上上下便宜。 當(dāng)然要確保這里只有一行。 如果是多行的話會(huì)很大程度的影響你的 布局。我們接著往下將：下面我們經(jīng)常用到的兩個(gè)地方時(shí)為每個(gè)版塊添加一個(gè)主題圖標(biāo)： 或者將他默認(rèn)的前綴背景圖標(biāo)替換掉。首先如果你希望給你的版塊添加一個(gè)前綴圖標(biāo)的話， 可以登錄后臺(tái) -版塊，找到版塊圖標(biāo)配置好圖片的路徑就可以了。例如： ./images/forum_logo/forum1.jpg 。

49、 第二個(gè)就是替換前綴背景圖片。 你可以直接覆蓋掉默認(rèn)的圖標(biāo)。 當(dāng)然會(huì)出現(xiàn)圖片大小的問(wèn)題。 你只要去 css_common 中去修改如下代碼就可以了：.list th padding-left: 45px !important; background-image: url(STYLEIMGDIR/forum.gif); background-position: 5px center ;你需要調(diào)節(jié) padding-left 這個(gè)值去適應(yīng)圖片背景的距離。每個(gè)版塊的高度代碼控制樣式為：.list td, .list th height: 50px; padding: 6px 0; border-top

50、: 1px dashed COMMONBORDER; color: MIDTEXT; 當(dāng)然這是你要注意調(diào)節(jié) background 的位置調(diào)節(jié)。 background-position: 5px center ; 雖然我這里只介紹了一個(gè)分區(qū)。但下面的所有分區(qū)都是統(tǒng)一用的這一種樣式。 好了基本的已經(jīng)解決完了。線面我們?cè)趤?lái)看看下一個(gè)元素 :友情鏈接版塊：<!-if$_DCACHE'forumlinks'0 | $_DCACHE'forumlinks'1 |$_DCACHE'forumlinks'2-><div class="

51、mainbox list"><span class="headactions"><img id="forumlinks_img" src="IMGDIR/$collapseimgforumlinks.gif" alt="" /></span><h3>lang board_links</h3><div id="forumlinks" style="$collapseforumlinks">&

52、lt;!-if $_DCACHE'forumlinks'0-><div class="forumlinks"><ul class="s_clear">$_DCACHE'forumlinks'0</ul></div><!-/if-><!-if $_DCACHE'forumlinks'1-><div class="forumimglink">$_DCACHE'forumlinks'1&l

53、t;/div><!-/if-><!-if $_DCACHE'forumlinks'2-><div class="forumtxtlink"><ul class="s_clear"> $_DCACHE'forumlinks'2 </ul></div><!-/if-></div></div><!-/if->這是他的版塊代碼。 一般甚少改動(dòng)， 而且他的樣式的大都是繼承的分區(qū)的展示樣式。 當(dāng)你改 變了分區(qū)樣

54、式后，刷新頁(yè)面就可以看到效果了。下面一段代碼是在線會(huì)員的代碼在這里我只是將他展示出來(lái)具體的你可以在本地修改著試 一試：<div class="mainbox list" id="online"><!-if $whosonlinestatus-> <!-if $detailstatus-><span class="headactions"><a href="$indexname?showoldetails=no#online" title="lang p

55、m_close"><img src="IMGDIR/collapsed_no.gif" alt="lang pm_close" /></a></span><h3><strong><a href="member.php?action=online">lang onlinemember</a></strong>- <em>$onlinenum</em> lang onlines- <em>$membercount</em> lang index_members(<em>$inv