[Plone-UI] Re: Plone 2.1 Navigation css

[MD]

Peter Millar <peter.millar at ...> writes:

> 
> I am trying to remove the shading and border from the currently selected
> item and from the hover. I want to be boring and just have the text change
> colour.
> 
> I have tried changing css as specified below. I have noticed that when I set
> the border to none in .navTreeCurrentItem it doesn't turn it off.  I have
> gone through every css file in the CMFPlone directory, searched for every
> instance of hover, set each of the border properties to 2em pink, and I
> don't see it.  It is almost like something is overwriting changes that I
> make in the custom.css.  For example here is one thing I did.
> 
> .navTreeCurrentItem {
> background-color: none;
> color: &dtml-globalFontColor;;
> border: none;
> }
> 
> I even tried overwriting the classes.  Doing this worked a whole heap better
> I could remove the border from the current item,  but the hover border is
> still there.
> 
> What am I missing here???
> 
> 
> Peter Millar 
> ________________________________
> 

I was just racking my brain on this one myself not too long ago.  First you
should probably rethink rewriting the classes.  I would think upgrading would be
a nightmare otherwise.  When you run into a property that seemingly doesn't want
to listen to your CSS, use !important:

.navTreeCurrentItem {
   background-color: none;
   color: black !important;
   border: none !important;
}

Your custom CSS is actually over-ridding CSS in existing stylesheets and some of
them have !important in them.  When you don't put !important, those rules
over-ride yours and when you put !important your rules over-ride theirs.

http://www.w3.org/TR/REC-CSS2/cascade.html#important-rules

Good Luck!