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