Css定製Drupal主題風格
“主題”是Drupal站點的基本外貌和感覺。有時一個特定的站點會安裝不止一個的主題。如果站點管理員提供了多個主題,你可以爲你的帳號選擇你喜歡的默認主題。
Drupal的官方站點提供了許多主題風格,具體見:
http://drupal.org/project/Themes
其中,Spreadfirefox是我最喜歡的主題風格,著名的 spreadfirefox.com 使用的就是這款主題。
除Drupal的官方站點外,還有許多其他機構或個人提供Drupal的主題風格,通過Google可以搜索到這些風格。
Drupal 主題風格安裝
Drupal 主題風格的安裝非常簡單:
+ 在 http://drupal.org/project/Themes 下載新的主題風格
+ 閱讀主題風格包中的 README 和 INSTALL 文件,看該主題風格包的安裝是否需要一些特殊的步驟
+ 檢查一下主題風格需要的模板引擎是否已安裝
+ 將主題風格上載到Drupal的themes目錄中
+ 通過“管理-》主題”啓用該主題風格,並將其設置爲默認風格
Drupal的主題定製非常靈活,可以定製每個區塊定製的風格。如果懂PHP的話,幾乎可以做出可以想得到風格來。實際上,在大多時候我們主要是通過圖片+CSS來定製,這是一種最簡單的定製,也不需要懂得太多的PHP知識。
在themes目錄下的每個主題目錄中,有一個style.css文件。定製CSS的關鍵是搞清楚CSS元素控制的對象。但許多人搞不清楚CSS元素控制的對象,在這方面花了不少時間。其實只要選對工具,這實際上是非常容易做的。
這個強大的工具就是Firefox。大多數人只知道Firefox是一個瀏覽器,實際上Firefox提供了大量網頁開發的工具。例如:
+ 選定一部分網頁內容,通過右鍵菜單的View Selection Source功能,可以查看選定部分網頁的源碼。這是一個殺手級的功能,再也不必爲在龐大的HTML源碼中找不到相應的目標內容而頭痛了。
+ 菜單 Tools-》Page Info 可以看到非常詳細的網頁內容,包括表單、鏈接、多媒體等信息
+ 菜單 Tools-》DOM Inspector 可以對網頁的HTML、JavaScript、CSS等內容進行很方便的分級瀏覽
Firefox的功能太多,一時半刻說不完,我們還是回到CSS定製上面來。這需要用到一個Firefox的插件,插件名稱是Web Developer,可以在Firefox的網站上下載到這個插件。
安裝好Web Developer插件後,就可以用其提供的功能來定位對象的CSS控制元素:
+ 插件的CSS菜單下有一個View Style Information功能非常好用,當你的鼠標電擊到網頁的某項內容,就能看到該項內容所使用的相關CSS內容。
+ 在Information菜單下有一個Display ID & Class Details功能,能在網頁上顯示所有的ID和Class信息。
Web Developer插件是專門爲網頁開發人員提供的一把寶刀,功能太豐富了,你們就慢慢去體會吧。