How to use the itemcolor parameter?

This tutorial explains how to change the color of a menu item and the style of the page it links to.

Adding a specific color by using the Page Class Suffix

How to change a menu item's color and the style of its page

To change a menu item's color you first need to navigate to the menu item you want to modify in your Joomla backend and assign an "itemcolor" Page Class Suffix. Let's call it "orange". The syntax is "itemcolor-orange".

The body tag

The string behind the key-term "itemcolor-" gets inserted as a class in the <BODY> tag. Note: The class is only inserted on the page of the menu item for which the page class suffix is set, as we only want to style the page our menu item links to.

<body class="orange">

This CSS class makes a total different styling for this specific page possible.

The menu item

Also the same class is added to the <LI> of the menu item and the <A> inside it:

<li class="orange">
  <a class="orange">
  ...
  <\a>
<\li>

Note: The CSS class is set on every Joomla page. This makes it possible to style the menu item regardless of which page is displayed, so a menu item can always be green, the next one always blue and so on, indicating which color the page will have when you click them.

You can also access the item color in the template.js file and use it for JavaScript effects. It can be accessed by using the variable "YtSettings.itemcolor".