Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

I can't get to style the Quick Launch menu links: the 'hover' and the 'selected'.

I've tried this:

  1. Open your site using SharePoint designer
  2. Select the master page
  3. Add class name to Sharepoint:SPNavigationManager

      <Sharepoint:SPNavigationManager
            id="QuickLaunchNavigationManager"
            runat="server"
            QuickLaunchControlId="QuickLaunchMenu"
            ContainedControl="QuickLaunch"
            EnableViewState="false"
            CssClass="ms-quicklaunch-navmgr customclass">
    
  4. Navigate style library and add new css file.
  5. in the file add your own site; ex:

    .customclass a:hover
    {
      color:#01852b;
      text-decoration:none ;}
    
  6. Attached style file to the master page

...But still

share|improve this question

migrated from stackoverflow.com Oct 4 '11 at 21:35

This question came from our site for professional and enthusiast programmers.

    
Should probably be on SharePoint.SE –  SHug Oct 4 '11 at 14:05
    
Based on the answers received to this question, I've written a blog post addressing this topic. Custom CSS and SharePoint Branding (The Right Way): ow.ly/6OtJN –  webdes03 Oct 5 '11 at 18:21
add comment

3 Answers 3

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:

.s4-ql ul > li > a:hover,.s4-ql ul.root > li > a:hover,.s4-qlheader:hover{
text-decoration:none;
color:red;
}

.s4-ql ul.root ul > li > a:hover{
/* [ReplaceColor(themeColor:"Accent1-Darker")] */ color:#44aff6;
text-decoration:none;
color:red;
}

Change the styles as needed.

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.

share|improve this answer
    
You can also use Jquery and add accrodion to it.Just google quicklaunch accordion –  naijacoder Oct 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. –  webdes03 Oct 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 Patel Oct 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. –  webdes03 Oct 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 Love Oct 5 '11 at 18:05
show 1 more comment

You are trying to overwrite another CSS class, so what you have to do is add !important after you set the values.

.s4-ql ul > li > a:hover,.s4-ql ul.root > li > a:hover,.s4-qlheader:hover{
text-decoration:none !important;
color:red !important;
}

.s4-ql ul.root ul > li > a:hover{
/* [ReplaceColor(themeColor:"Accent1-Darker")] */ color:#44aff6 !important;
text-decoration:none !important;
color:red !important;
}
share|improve this answer
2  
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. –  Rawling Oct 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. –  Rawling Oct 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. –  webdes03 Oct 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 Patel Oct 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. –  webdes03 Oct 5 '11 at 16:45
show 1 more comment

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.

More info on the Developer toolbar in IE on MSDN: http://msdn.microsoft.com/en-us/library/dd565627(v=vs.85).aspx

share|improve this answer
    
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 Ziga Oct 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. –  webdes03 Oct 5 '11 at 13:54
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.