0

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

Improve this question
2
  • Should probably be on SharePoint.SE
    – SHug
    Oct 4, 2011 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, 2011 at 18:21

2 Answers 2

Reset to default
6

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

Improve this answer
2
  • 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.
    – user2536
    Oct 5, 2011 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, 2011 at 13:54
-1

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.

Improve this answer
6
  • You can also use Jquery and add accrodion to it.Just google quicklaunch accordion
    – naijacoder
    Oct 5, 2011 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, 2011 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, 2011 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, 2011 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, 2011 at 18:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.