Css定製Drupal主題風格

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插件是專門爲網頁開發人員提供的一把寶刀,功能太豐富了,你們就慢慢去體會吧。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章