安裝使用巧用firebug 對(duì)Discuz!模板進(jìn)行樣式調(diào)試修改美化

2018-6-13 12:56| 發(fā)布者: 豬八戒| 查看: 2268| 評(píng)論: 0

摘要: discuz! 模板的教程之前已經(jīng)寫(xiě)過(guò)很多了，Discuz模板問(wèn)題我經(jīng)常都會(huì)說(shuō)推薦大家使用火狐的firebug來(lái)看看，很多同學(xué)在修改一些文件或者模板的時(shí)候都不會(huì)找問(wèn)題，看完今天的內(nèi)容你應(yīng)該會(huì)一些簡(jiǎn)單的使用了首先，推薦大家 ...

discuz! 模板的教程之前已經(jīng)寫(xiě)過(guò)很多了，Discuz模板問(wèn)題我經(jīng)常都會(huì)說(shuō)推薦大家使用火狐的firebug來(lái)看看，很多同學(xué)在修改一些文件或者模板的時(shí)候都不會(huì)找問(wèn)題，看完今天的內(nèi)容你應(yīng)該會(huì)一些簡(jiǎn)單的使用了

首先，推薦大家查看：火狐瀏覽器firebug的使用視頻教程，DiscuzX2.5模板全局樣式表 - common.css 注釋和模板緩存、CSS繼承規(guī)范和CSS緩存機(jī)制這3篇教程

然后，我們?cè)賮?lái)認(rèn)識(shí)下Discuz!的樣式存放的規(guī)律。樣式文件存放在 tempate/default/common目錄下common.css是共用的樣式文件，幾乎每個(gè)頁(yè)面都需要用到其中的樣式， module.css 是每個(gè)模塊中要用到樣式文件，下面我們來(lái)查看module.css樣式文件中的樣式分類(lèi)規(guī)律，module.css樣式，中添加有詳細(xì)的注釋?zhuān)ㄟ^(guò)注釋將樣式分類(lèi)。如：

/** misc::invite,group,forum::viewthread,portal::view,home::space **/

/* .usl -> 用于類(lèi)似群組中邀請(qǐng)好友中的好友列表 by Pony */

.usl { overflow: scroll; overflow-x: hidden; padding: 5px; width: 580px; height: 280px; }

.usl2 { width: auto; border: dashed {WRAPBORDERCOLOR}; border-width: 0 1px 1px; }

.usl li { overflow: hidden; float: left; margin: 3px; width: 134px; height: 64px; }

.usl a { display: block; padding: 4px; border: 1px solid {WRAPBG}; }

.usl a:hover { text-decoration: none; border: 1px solid; border-color: #DDD #999 #999 #DDD; background: {COMMONBG}; }

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

.usl .d { float: left; width: 65px; height: 54px; overflow: hidden; word-wrap: break-word; }

.usl li.a a, .usl li.a a:hover { border-color: #F90; background-color: #FFF1E1; }

.usl li.a .avt span { display: block; margin-left: 2px; width: 50px; height: 50px; background: url({IMGDIR}/mark.png) no-repeat left bottom; }

.usd { padding: 5px 10px 0; border: solid {WRAPBORDERCOLOR}; border-width: 1px 0; background-color: {COMMONBG}; }

.usd2 { border-width: 1px; border-style: dashed; }

.usd li { float: left; margin-right: 1%; width: 48%; }

/** end **/

仔細(xì)查看，注釋開(kāi)始處 /** misc::invite,group,forum::viewthread,portal::view,home::space **/，這表示這些樣式將邀請(qǐng)、群組、帖子內(nèi)容頁(yè)、文章內(nèi)容頁(yè)、個(gè)人空間中通過(guò)。Discuz! 的使用樣式不是直接使用的template/default/common下的樣式文件，而是讀取的緩存文件（通過(guò)將樣式文件進(jìn)行解析），在這里不對(duì)樣式解析函數(shù)進(jìn)行介紹，有興趣的可以閱讀 source/function/cache/cache_style.php 中的代碼。解析之后的樣式文件是存在在 data/cache目錄下。

firebug 與 Discuz! 相結(jié)合

現(xiàn)在，我們來(lái)了解firebug 中樣式的特征，

當(dāng)將鼠標(biāo)放在樣式的加載路徑上會(huì)彈出樣式的詳細(xì)地址，從第二張圖中我們能夠得到結(jié)論，這里的樣式是來(lái)自于common/common.css目錄，從第一張圖中我們能夠得知樣式是來(lái)自于 module.css 中并且在分類(lèi)的時(shí)候應(yīng)該有forum::viewthread

先在firebug的樣式框中，對(duì)樣式進(jìn)行調(diào)試滿足要之后，我們到 template/default/common 目錄下找到中firebug樣式得知的樣式文件，搜索關(guān)鍵字，更改完樣式文件之后。最后，到后臺(tái)更新一次緩存