風格從5.5升級至6.0實例解析
Discuz!6.0RC1發佈了有一段時間了，不知道大家有沒有進行升級。Discuz!6.0全新改寫的範本採用XHTML 1.0，完全符合W3C國際標準，頁面更清爽、打開速度更快。因此原來的舊風格就不能再使用，那麼我們應該如何對舊的風格進行升級呢，我們先來看一下6.0的css設計。
CSS.htm
6.0的css做了很大的變動，各位看著可能有些頭暈，相對5.5麻煩了不少。大家不要被表面迷倒，慢慢的來分析，你會發現6.0的css其實還是很好理解，查找修改比較方便的。Css檔裡的定義大體可以按如下理解：
Common Style───────────────────全域css定義；
Layout & Block Style────────────────頁面css定義；
Box Style─────────────────────盒子、表格模型的css定義；
Spacial Threads──────────────────特殊主題樣式；
Control Panel───────────────────控制台樣式定義；
DropMenu────────────────────下拉式功能表定義；
Form Style────────────────────表單方面的樣式定義；
Advertisments───────────────────廣告樣式表；
Archiver─────────────────────Archiver樣式；
Header.htm
Header.htm裡主要分成兩個部分，一個是頭部logo（包含廣告代碼），就是id為header的部分，另一個是頭部功能表列，就是id為menu的部分，一般我們修改風格就是修改logo部分，至於功能表列不用做太大的修改，主要是在css裡進行定義就可以了。
Footer.htm
Footer.htm裡主要也是包含兩個部分，一個是廣告部分，id為ad_footerbanner1的部分，另一個就是底部的版權資訊部分，包括id為footlinks的時間、cokies資訊部分和版權資訊部分。
具體的大概部分我在下圖裡勾畫了一下，只是大體的一些東西，大家可以做個參考，如果需要瞭解某些細節，可以發帖問下。
我們先在後臺把介面風格的選項修改添加好，具體的設置，大家可以參考之前dfox發佈的Discuz 6.0範本風格系列教程-- Style Map 風格變數說明簡圖。可以看下我配好的介面。
先看header.htm文件：
在5.5的檔裡，我添加了4個選擇符：.head01 .head02 .body01 #container
看好他們的位置，我們把head01和head02首先複製出來，在6.0的新檔裡，我們先把<div id=”header”></div>這一部分內容刪除掉，用head01和head02代替他們。（當然，你也可以通過修改本身的header屬性以達到目的。）
然後我們看.body01，它是包含在功能表列裡的，所以，我們在新的6.0檔裡也用.body01包含功能表列，即在head02那一行下添加<div class="body01">，然後在header.htm檔的末尾添上一個</div>
在看#container，他是包含中間頁面的，那麼我們先把它的開頭部分添加到header.htm檔的末尾，即<div id="container02">，由於新的css文檔裡已經有container這個命名了，所以在此我們修改我們的為 container02。
再看footer.htm文件：
首先，我們要對header.htm檔裡的#container進行結尾，在6.0的footer.htm檔的廣告代碼的那一行即ad_footerbanner1和ad_footerbanner2的下一行添加上結束符</div>
在footer.htm檔裡，我添加了四個選擇符：.footbg .body02 .zuo .you
我們先把body02添加上去，在剛才添加的</div>後添加上<div class=”body02”></div>(由於剛才抓圖的時候忘記添加這個了。。所以剛才的圖上看不到此處)，然後給body02添加上一個屬性margin-bottom：10px；
然後我們複製.footbg的開始部分，在6.0檔裡，將<div class="wrap">刪除，然後在<div id="footer">的前邊添加上我們自訂的<div class="footbg">（也可以修改css檔裡的footer屬性達到效果）。這樣子，其實就用不著我們先前所定義的.zuo和.you 了。（也可以修改css檔裡的footer屬性達到效果）
修改css.htm文件：
剛才我們已經修改添加了header.htm和footer.htm檔，但是這些選擇符我們還沒有在css裡定義，在5.5的css.htm檔裡我找 到了我自己定義的這些變數（如果各位再次製作風格的話，不妨把這些自訂的變數都放到末尾做個標記，以方便以後確認，由於這是我早些時候做的，並沒有注意 到這個問題，所以造成現在找起來挺麻煩的），複製，然後在6.0的css.htm文件末尾添加上/* zidingyi */,然後換行將剛才複製的粘貼，.zuo和.you由於我們將不再使用，所以不用複製過來。記著把container修改為container02。
更新緩存，我們看一下現在的效果。
首先，我們要去掉頂部那條重複的藍線條。首先想到的應該是menu的定義，打開css.htm檔，查找#menu，修改其屬性為：#menu { height: 30px; border:0; {HEADERMENUBGCODE}; background-repeat: norepeat; }，高度稍高於我們定義的body01，背景設置為不平鋪，無邊框。更新緩存，藍線條消失。
然後我們看底部，只能看到顏色而看不到我們設置的背景。肯定是底部的#footer定義上有問題啦，打開css.htm檔，查找#footer，將其屬 性修改為#footer { color: {TEXT}; padding: 12px 10px; }，即去掉邊框、背景，並修改左右padding為10px。更新緩存，刷新頁面，底部恢復正常。
然後看中間，大家看到表格全部充滿了，而後臺又沒有了主表格寬度這一選項，那我們改怎麼修改呢？根據我勾畫的那個圖，大家可以看到這些表格的屬性使用的是 mainbox，打開css.htm文件，查找.mainbox，就在Box Style區域裡邊。在.mainbox的屬性裡的margin-bottom: {BOXSPACE};之前加上一個屬性：margin:0px 10px;注意一定要在它之前加上，否則，你在後臺定義的板塊間距將不起作用，應為css定義裡後邊的覆蓋前邊的，這樣子我們在前邊定義的margin- bottom為0，在後邊使用者定義的那個屬性就將0覆蓋掉。更新緩存，我們可以看到論壇板塊的問題解決了，可是下邊那些沒有變化。通過圖上我們可以看到， 下邊使用的是.box，打開css.htm文件，搜索.box，同樣在其屬性裡的margin-bottom: {BOXSPACE};之前添加上margin:0px 10px;更新緩存，刷新頁面，我們的問題得到解決。看一下現在首頁的效果。
進論壇，流覽帖子，除了一些圖示問題，並沒有太大的毛病，那麼我們現在是否已經完整的修改好了呢？現在，我們點擊進入統計頁面，有沒有發現左邊的導航緊貼 左邊框呢？再去看看控制台、道具，是不是都是這樣子呢，那我們怎麼修改這些呢？首先確定這些範本檔，應該是左部導航。複製預設範本資料夾裡的 stats_navbar.htm、magic_navbar.htm和personal_navbar.htm三個檔到我們的範本資料夾裡。首先打開 統計範本的導航檔stats_navbar.htm，在其最上的div裡添加一個選擇符special_nav，即<div class=”special_nav”>， 然後在css檔的末尾我們自訂的地方對其進行定義：.special_nav{margin-left:10px;},更新緩存，刷新頁面，OK，同 樣我們修改另外兩個檔。打開道具導航範本檔magin_navbar.htm，將其最上邊的<div>修改為<div class="special_nav">，向下翻，為<div class="credits_info">添加上special_nav屬性即為<div class="credits_info special_nav">。打開控制台導航文件personal_navbar.htm，修改最上方的<div>為<div class="special_nav">，下翻為<div class="credits_info">添加special_nav屬性，即為<div class="credits_info special_nav">。
說到這裡，你是不是感覺有點暈哦。。這麼麻煩的修改，那麼有沒有更簡單的方法呢？當然有的，下面我說一下解決上邊這個問題的更簡單的方法。
大 家現在對範本應該比較熟悉了，大家可以看到#wrap從頁頭一直包含到頁尾的上部，而後臺的外表格寬度就是控制的#wrap的寬度，那麼我們把#wrap 換成主表格是不是就可以在後臺控制主表格的寬度而不那麼麻煩的修改上邊那些檔了呢？這樣子是可以的，那麼我們就要將header.htm文件裡的 <div class="wrap">剪切到header.htm檔的最下部，讓我們的#container02將其包含，那麼我們就可以將 #container02看作是外表格，將#wrap看作是主表格，那麼在後臺我們將外表格（實際上現在是主表格）的寬度設置比#container02 的寬度略小，就可以解決我們的問題而不用修改那麼多檔了。
到此基本上修改的差不多了，再看看，發現顯示發表新貼的那個圖片偏右，太靠邊，不好看，打開css文件，搜索. postbtn，修改其margin-left為margin-right，更新緩存，OK。
為了處理流覽器的相容性，我們修改了另外三處css，一個是#foruminfo，將其上margin設置為0，另一個是.legend，將其下 margin設置為0，並稍微修改了body02圖片，並為body02添加上margin：0 auto；屬性（注：auto屬性值在進行W3C認證的時候不能通過，顯示為未知值），還有就是#nav，修改其上margin為0（其實就是為了讓兩個 流覽器下能夠先是明白，不用！important的原因在於ie7似乎加入了對其的辨認）。對於第二種方法的流覽器相容性，我就不多說了，大家可以參考下 第二個壓縮包裡的檔。（注：如果下載使用第二個的話，請在後臺將外表格寬度設置為880px）
剩下的你要做的就是把不顯示的圖片替換用預設的替換掉，這樣我們的風格就完整的升級為6.0了。還猶豫什麼，趕快升級到6.0RC1哦。如果您還有什麼疑問可以回貼詢問。附上升級後的跑跑卡丁車風格，各位可以對比參考下。
下一次我會教大家如何修改一些細節問題，也歡迎各位朋友指出自己要做修改的地方。
