3 Answers
3

Using developer tools in IE, use the 'select element' tool to pick out a link that should be styled, and look at the Trace Styles tool to have a look and see what CSS is being applied. Use this to see if your style is being overridden by the corev4.css. If it is, make your CSS selectors more specific. If you can't see your selectors at all, use the source view to make sure your CSS is being loaded.

Try to not use !important in your CSS wherever possible, this can and will create nothing but headaches further down the line if you wish to customise your styles further with other CSS files.

I beg to defer. !important is highly necessary if you want to overwrite a class. I agree with it might cause problems further down, but that very depends on how you build your CSS.
–
Daniel ZigaOct 5 '11 at 7:46

2

James is spot on here, so I won't write my own answer. He is also accurate in that !important should not be used. If your classes are loaded in the correct order and named correctly, !important is not needed to override OOTB styles. I tend to prefer Chrome's developer tools since you can modify and test CSS on the fly, but that's just a personal preference. James' approach will get you going in the right direction.
–
webdes03Oct 5 '11 at 13:54

No need to use important; if your selectors have the same precedence as those in the original file and your file is linked later, your styles will override the originals.
–
RawlingOct 5 '11 at 8:35

1

Well, I guess the styling of the quicklaunch I've been working on for the past week can't be working nearly as well as I thought, then. @edit: it's the same even if you have two rules in the same file; with the same precedence, the second overrides the first.
–
RawlingOct 5 '11 at 8:42

3

@Ziga, there are cases where !important is necessary, but this isn't one of them. If you have your classes and selectors written correctly, and loaded in the correct order, there is no need for !important. The class/selector that's loaded last will override any other class/selector of the same name. Using !important is a very bad practice. Sometimes it is needed, but in this case it absolutely is not.
–
webdes03Oct 5 '11 at 13:51

1

I have tested the solution I put and it works without important keyword. Follow my steps and see the results.
–
Ashish PatelOct 5 '11 at 14:00

1

It works because it's modifying core files. While it does avoid using !important; it's still not the "right" way to do this.
–
webdes03Oct 5 '11 at 16:45

First, you have added the custom class Sharepoint:SPNavigationManager instead of which corresponds to the Quicklaunch menu.

You open the master page in sharepoint designer and mouse hover to CssClass="s4-ql". This will take to corev4.css where you can find following css markup which you can modify to change the hover styles:

UPDATE: I think the purpose of this answer to be specific on what syles needs to be updated and help the user to locate those styles and I am sure the specific answer would have helped the user. Ofcourse, the user should follow branding best practice on top of that.

You can also use Jquery and add accrodion to it.Just google quicklaunch accordion
–
naijacoderOct 5 '11 at 2:59

3

Never, ever, ever, modify core files such as corev4.css or the core master pages. These files can be updated or even replaced with SharePoint upgrades or patches and would wipe out your customization. Additionally, if you customize these files, you are no longer in a supported state with Microsoft.
–
webdes03Oct 5 '11 at 13:49

Do you know that when you modify that file, sharepoint puts a copy under _styles directory and uses that copy? And that your changes to that file is limited to that site only? I think its perfectly fine.
–
Ashish PatelOct 5 '11 at 13:58

3

It is a bad practice to modify core files; plain and simple. The best practice is to deploy custom masterpages and CSS via a Visual Studio solution. This not only makes things easier to manage, but also makes them reusable. If that's not an option, deploy custom CSS to the style library, reference it in your custom master, and add your custom master to the Master Page Gallery. Never modify the core and OOTB files, pure and simple.
–
webdes03Oct 5 '11 at 16:43

It's also easier to undo site-wide changes and revert to the default styles when the branding is is deployed via a customised masterpage, or CSS loaded via delegate control.
–
James LoveOct 5 '11 at 18:05