很多 Joomla! template 的 menu 和 module 標題都是 text-based,有沒有辦法可以更改為圖像呢?以前本網誌介紹過的使用圖像取代文字技巧製作網頁標題正好用來解決這問題。假如你所選用的模版,標題有使用 Header Tags,則只需要在後台設定 menu / module 的 suffix,然後使用 image replacement 的技巧修改 css,就能做到以圖像作為標題。
例如我想把 Latest News 的標題更改,首先進入後台,選 module manager 找出 Latest News (一個以標準 mod_latestnews 製作的 module),在 Module class suffix 上加入自訂的 suffix (如 _mystyle),然後增加一段 css 設定這標題的背景圖片就完成。
-
h3.latestnews_mystyle {
-
width: 280px; height: 50px;
-
background: url("../images/section_title_latestnews.png") no-repeat;
-
text-indent: -9999px;
-
}

不過如果你的設計比較複雜,不能單靠 css 就做到,則需要更改模版。Joomla! 提供了2個可行的方法,分別是 output overrides (或者可稱為 layout overrides) 和 module chrome。Joomla! 對 template 和 layout 兩個詞分得很清楚,layout 是指每一個 component 和 module 的顯示方式。Joomla! 上每一個 component 和 module 的式樣都是獨立和可以讓 template 自訂的方法覆寫,因此使用 output overrides 可徹底地更改網站的面貌。有關教學可參看官方網站的 Understanding Output Overrides。要留意 layout overrides 會更改使用同一 module type 製作的 module,假如你的網站用 mod_latestnews 製作多個 modules,則所有 modules 的顯示方式也會變得一致。筆者極不建議你在 template 內加入 programming logic 來區分顯示方式,或者 module chrome 更合你的要求。
Woof and Wraf 為 module chrome 做了簡介和示範,文中可見同一 module ,放在不同的 module position ,其標題的背景圖片亦會改變,這正是 module chrome 的特點。假如你用 mod_latestnews 製作了兩個 modules,一個放在 sidebar ,需要使用圖像標題的 Latest News module,另一個放在內文下方,用來顯示某一類別文章的相關內容,這一區塊不需要標題,在這情況下 module chrome 就很合用。Module chrome 不能深入更改一個 module 的細節,但設定上比較容易,及可以預先製作不同的式樣,待有需要時使用。



留言
寫下留言