Customize your sites background on different pages with page class suffixes

If you add a page class suffix via the "Parameters (System)" tab of any menu item, this class is automatically appended to the body element and gives you a "hook" to provide alternate styling.

Page class suffix input box on menu items:

Outputs as a class on the body element:

Here are some css examples:

Page class suffix = "home":

body.home{
    background:url(../../../../morph_assets/themelets/vanilla/images/bg-home.jpg);
}

Page class suffix = "blog":

body.blog{
    background:url(../../../../morph_assets/themelets/vanilla/images/bg-blog.jpg);
}

This same principle can be applied to any element on the page, which gives you complete control over how every page is styled. For example, if you used a static css header in your subhead block, you could change the image for each page, using the method outlined above.

See the css example below:

Page class suffix = "home":

body.home #subhead{
    background:url(../../../../morph_assets/themelets/vanilla/images/header-home.jpg);
    height:500px;
}

Page class suffix = "blog":

body.blog #subhead{
    background:url(../../../../morph_assets/themelets/vanilla/images/header-blog.jpg);
    height:200px;
}

Also take a look at the other classes which are appended, such as the current component you viewing (ie, com_content), the specific view (ie, frontpage), as these will also let you customize the page for an entire component without having to add a page class suffix to each related menu item.

You can read more about the automatic classes here:

• Understanding the automatic body classes
• Using the browser css files