Home News Contact Us Forum About Us Demos Products F.A.Q.
Shopping Cart
You currently have 0 items in your cart.


Recent Events
  • 31/12/2023 New Year SALE

    We are glad to announce New Year SALE. 25% discount for all our extensions. Use NY24 coupon code. Hurry up the discount is valid till 7 January.

  • 21/11/2023 BLACK FRIDAY 23 is coming

    BIG SALE, 35% discount for all our extensions. Use BF23 coupon code. Hurry up the discount is valid till 27 November.


2Checkout.com, Inc. is an authorized retailer of goods and services provided by ARI Soft. 2CheckOut




Follow us on twitter



Welcome, Guest
Please Login or Register.    Lost Password?

css styling for individual menu item
(1 viewing) (1) Guest
Go to bottomPage: 1
TOPIC: css styling for individual menu item
#15002
css styling for individual menu item 13 Years, 1 Month ago Karma: 0
Hello,

I really like this menu module, thanks.

I'm trying to add individual styles (background images) to each top level menu item. I have had a look at this post but can't work out what the item id is?

Using firebug I can see that the first menu item has and id of ext-gen9

In the module parameters under css styles I have this
Code:

.ux-menu-container .ux-menu  li[ext-gen9] a
{
 background: red;
}



This has no effect. Probably a simple syntax issue?

BTW I can't supply a URL at this stage.

cheers
Mitchell
The administrator has disabled public write access.
 
#15004
Re:css styling for individual menu item 13 Years, 1 Month ago Karma: 748
Hello,

Menu item ID can be found on menu item settings page on Joomla! backend. For example if menu item ID equals to 73, enter the next CSS rule to "CSS Styles" parameter in module settings:

Code:


.ux-menu-container .ux-menu  li.ux-menu-item77 a
{
 background: none red;
}



Regards,
ARI Soft
The administrator has disabled public write access.
 
#15019
Re:css styling for individual menu item 13 Years, 1 Month ago Karma: 0
Thank you. I discovered this just before you replied. Thanks for the quick response.
Cheers
M
The administrator has disabled public write access.
 
#15169
Re:css styling for individual menu item 13 Years, 1 Month ago Karma: 0
Continuing on from my original post - I now need to add an image to each of the last sub menu items.

This css seems to targeting the correct sub menu item - the background for the link is transparent - but the image is not appearing in its place. I can't supply a URL but the general menu structure (id's) are as follows:-

Top Menu item (id=67)
- sub item 1
- sub item 2
- Last sub item (id=71)

Code:

.ux-menu li.ux-menu-item67 ul a.ux-menu-link-last,.ux-menu.ux-menu-vertical li.ux-menu-item67 a.ux-menu-link-last{position:relative;float:left; background:url(images/industriesbottom.png) no-repeat 0 0;margin: 0; background-color:transparent !important;}


I have set submenu background colours in the module parameters - I suspect this is overriding my css?

thanks
M
Last Edit: 2011/05/20 04:02 By mozzy.Reason: correction
The administrator has disabled public write access.
 
#15170
Re:css styling for individual menu item 13 Years, 1 Month ago Karma: 0
The only thing I hadn't looked at - adding !important to the background image URL entry. That fixed the issue.
The administrator has disabled public write access.
 
Go to topPage: 1