天天看點

如何在不同頁面上使用不同的Joomla CSS

我們的一位使用者希望其網站首頁具有不同的背景。 Joomla确實提供了幾種自定義單個頁面的方法。本教程将向您介紹兩個Joomla選項。讓我們開始吧 ...

如何在不同頁面上使用不同的Joomla CSS

1:将CSS添加到目前模闆

檢查模闆是否已經使定位特定頁面變得容易。

例如,某些模闆将菜單項ID添加為類。這樣一來,您無需執行其他任何操作即可使用CSS定位頁面。

使用浏覽器的檢查工具或Firebug來檢查HTML輸出。

如何在不同頁面上使用不同的Joomla CSS

如您所見,在此示例中,模闆将菜單項ID添加到标記中。

是以,我可以使用以下CSS定位背景:

body.itemid-101 {

background-color: yellow;

}

2:使用頁面類

如何在不同頁面上使用不同的Joomla CSS

如果模闆沒有為每頁添加任何唯一的标記,會發生什麼?

使用菜單項的Page Class選項,我們可以向HTML标記添加更多CSS類。然後,我們可以使用CSS僅定位該特定頁面。

如何在不同頁面上使用不同的Joomla CSS

如何在不同頁面上使用不同的Joomla CSS

要添加頁面類,請轉到:

編輯菜單項

頁面顯示

頁面類->在此處添加類

儲存

在示例中,我在“首頁”之前添加了一個空格。這将使其成為一個單獨的類。如果希望将它作為字尾附加到最終類的末尾,請改用連字元。

如果幸運的話,模闆會在您需要的地方添加該類。

讓我們在示例中檢視輸出。

如何在不同頁面上使用不同的Joomla CSS

該類“首頁”已添加。但是,沒有在我可以使用CSS作為背景示例定位的地方添加它。我可以使用它來定位内容區域,但不能定位主體的背景。

專家提示:原因是使用CSS我無法定位父元素。我隻能定位元素本身和子元素。