Help with CSS for specific menu item

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

This thread is closed to new posts. You must sign in to post in the forums.
4/5/2011 11:14:14 AM
tommyjones117
Gravatar
Total Posts 6
View Posts

Help with CSS for specific menu item

I set up a new class in the

\Data\Sites\1\skins\mitchinson-earthy-alt1\style.css

as follows:

.PinkMenu{
color: #ff66cc;
}

then, i entered PinkMenu in the Custom Menu CSS Class field

the CSS viewer in FireBug shows the class when I point it to the specific menu item, but the color of the text does not change

is this class being overridden by another class in that skin or am I just doing it wrong?

Thanks

4/5/2011 11:20:34 AM
Joe Audette
Gravatar
Total Posts 18439
View Posts

Re: Help with CSS for specific menu item

You need to be aware of CSS caching in the browser and on the server.

See Skinning Overview for details.

You need to also make sure that the custom class in your css comes in lower than the menu style. ie move the menu css up in the style.config file so your custom css comes in after it.

Hope it helps,

Joe

4/5/2011 11:52:32 AM
tommyjones117
Gravatar
Total Posts 6
View Posts

Re: Help with CSS for specific menu item

Thanks for your super quick response.

I'll post my results.

4/5/2011 12:48:01 PM
tommyjones117
Gravatar
Total Posts 6
View Posts

Re: Help with CSS for specific menu item

Ok, apparently I had things set up to work correctly. When i added a background-color element to the .PinkMenu rule, it worked.

 

So, the solution was to add the !important keyword to the color element of the CSS rule as such:

.PinkMenu { color: #F6C !important; }

 

This tested fine in Firefox 4, IE8, and IE9

I haven't had a chance to test in other browsers yet.

 

Thanks again for your help.

You must sign in to post in the forums. This thread is closed to new posts.