I have just recently started using Joomla for a site I am trying to build. I am using the YouGrids template for my site, and I have slightly modified it on my own. I just downloaded this extension to use for the menus of my page and I love it so far.

However, the thing that I am having trouble with is changing the colors of individual menu items as they appear on the menu module.

For example:
I have three menu items that are being displayed in the ARI Ext Menu extension, named: Home, Article 2, and Article 3 (They are just test items so I can figure everything out.) And I want them to be colored orange, red, and blue respectively. I have searched through the forums and have been unable to find anything that can help me solve this problem. And any help would be appreciated.

Eventually I would like to use different background images entirely for each menu item. I have images that I have created of what I want the tabs of my website to look like that I would like to use for the background of each respective menu item. If this is a different issue then I would like to know how to do this also, but if I can change this similarly to changing the color, then I am sure I can figure it out if I am told how to change the color.

Thanks in advance.
Tyler

Hello,

Each menu items has a CSS class based on menu item ID. For example if you want to change background for menu item with ID = 10, use the next CSS rule:



Regards,
ARI Soft

So if I wanted to make it an image for the background would I just do something like this:


Code:

.ux-menu LI.ux-menu-item10>A
{
background:url(images/menu-item-bg-477.png);
}

And does the code you gave just go into the CSS Styles box in the Module Editing page?

Thanks a lot!

It is possible to add custom CSS rules to "CSS Styles" parameter in module settings.

Regards,
ARI Soft

Thank you!

I got the different colors to work but I am still struggling with getting background images to work. This is the code I tried:

ul.ux-menu li.ux-menu-item477>a, a:focus, a:active {
background-image:url('images/OrangeTab.jpg');
height: 30px; width: 100px;
}

I saved the image to mod_ariextmenu>js>css>images>OrangeTab.jpg and then rezipped the file and reuploaded it. This didn't change the background image at all.

How should I go about this differently

Thanks in Advance
Tyler

Save the image to <joomla_directory>/images/ folder.

Regards,
ARI Soft