首先,我們來認識下 Discuz! 的樣式存放的規律。   樣式檔案存放在 tempate/default/common 目錄下 common.css 是共用的樣式檔案,幾乎每個頁面都需要用到其中的樣式, module.css 是每個模組中要用到樣式檔案,下面我們來檢視 module.css 樣式檔案中的樣式分類規律,module.css 樣式,中新增有詳細的註釋,透過註釋將樣式分類。如:

  1. /** misc::invite,group,forum::viewthread,portal::view,home::space **/
  2.         /* .usl -> 用於類似群組中邀請好友中的好友列表 by Pony */
  3.                 .usl { overflow: scroll; overflow-x: hidden; padding: 5px; width: 580px; height: 280px; }
  4.                 .usl2 { width: auto; border: dashed {WRAPBORDERCOLOR}; border-width: 0 1px 1px; }
  5.                         .usl li { overflow: hidden; float: left; margin: 3px; width: 134px; height: 64px; }
  6.                         .usl a { display: block; padding: 4px; border: 1px solid {WRAPBG}; }
  7.                                 .usl a:hover { text-decoration: none; border: 1px solid; border-color: #DDD #999 #999 #DDD; background: {COMMONBG}; }
  8.                         .usl .avt { float: left; margin-right: 5px; width: 52px; height: 52px; border: 1px solid {COMMONBORDER}; background-color: {WRAPBG}; background-position: 2px 2px; background-repeat: no-repeat; zoom: 1; }
  9.                         .usl .d { float: left; width: 65px; height: 54px; overflow: hidden; word-wrap: break-word; }
  10.                         .usl li.a a, .usl li.a a:hover { border-color: #F90; background-color: #FFF1E1; }
  11.                         .usl li.a .avt span { display: block; margin-left: 2px; width: 50px; height: 50px; background: url({IMGDIR}/mark.png) no-repeat left bottom; }
  12.                 .usd { padding: 5px 10px 0; border: solid {WRAPBORDERCOLOR}; border-width: 1px 0; background-color: {COMMONBG}; }
  13.                 .usd2 { border-width: 1px; border-style: dashed; }
  14.                         .usd li { float: left; margin-right: 1%; width: 48%; }
  15. /** end **/

仔細檢視,註釋開始處 /** misc::invite,group,forum::viewthread,portal::view,home::space **/, 這表示這些樣式將邀請、群組、帖子內容頁、文章內容頁、個人空間中透過。 Discuz! 的使用樣式不是直接使用的 template/default/common 下的樣式檔案,而是讀取的快取檔案 (透過將樣式檔案進行解析),在這裡不對樣式解析函式進行介紹,有興趣的可以閱讀 source/function/cache/cache_style.php 中的程式碼。 解析之後的樣式檔案是存在在 data/cache 目錄下。

firebug 與 Discuz! 相結合
       現在,我們來瞭解 firebug 中樣式的特徵,

4.jpg

5.jpg

     
當將滑鼠放在樣式的載入路徑上會彈出樣式的詳細地址,從第二張圖中我們能夠得到結論,這裡的樣式是來自於 common/common.css 目錄,
從第一張圖中我們能夠得知 樣式是來自於 module.css 中並且 在分類的時候應該有 forum::viewthread  
       先在 firebug 的樣式框中,對樣式進行除錯   滿足要之後
我們到 template/default/common 目錄下找到中 firebug 樣式得知的樣式檔案 ,搜尋關鍵字,更改完樣式檔案之後。最後 ,到後臺更新一次快取