Dynamic Body CSS Classes

With the dynamic body CSS classes you can assign individual CSS declarations for specific sites.

Help Add is homepage class

If enabled, the CSS-Class is-homepage is added in the <body> tag, when the current active page is the home-page.

CSS-Example: body.is-homepage { background: orange; }

Add Itemid classes (menuitem ID)

If enabled, the CSS-Classes itemid-xx (current menuitem) and parent-itemid-xx (parent menuitems) is added in the <body> tag. The Itemid is in Joomla! the ID of a menu items.

CSS-Example: body.item-21 #main { border-color: #000; }

Add component relevant classes

If enabled, CSS-Classes of current active component actions is added in the <body> tag. For example the task, view or id, etc. Take a look in the source code to figure out the class names, since each component is individually.

The class 'option-com_[component-name]' is added always when this option is enabled.

CSS-Example: body.com_content-view-article p { color: #777; padding: 0.4em; }

Add category classes

If enabled, the CSS-Classes of the current category (category-xx) and their parent categories (parent-category-xx) is added in the <body> tag.

CSS-Example: body.category-20 { background: purple; }

Add browser class

If enabled, a CSS-Class with the Browser Engine of the client (browser-xv) is added in the <body> tag.

Note: This does not work if the System Cache Plugin of Joomla! is enabled! Then it is only the class inserted that was first stored in the cache.

CSS-Example: body.browser-mozilla50 div { /* any Bugfix */ }

Add client platform class

If enabled, a CSS-Class with the client platform (platform-xx) is added in the <body> tag.

Note: This does not work if the System Cache Plugin of Joomla! is enabled! Then it is only the class inserted that was first stored in the cache.

CSS-Example: body.platform-win a { /* any Fix */ }


Extra tip: Menu item 'Page Class' suffix

If you type in a menu item, one or several 'Page Classes', JYAML automatically adds the CSS class with the page-sfx-[class] in the <body> tag. So you can access the whole HTML-Document over these page classes for a specific menu item.