4

I've used some CSS to restyle the titlebar breadcrumbs in a SharePoint 2010 mysite.

.s4-title h1 a, .s4-title h2 a, .s4-titlesep h2, .s4-title h2, .ms-ltviewselectormenuheader .ms-viewselector a
{
    font-family: Verdana;
    color: #777777;
    font-weight: bold;
    font-size: 10pt;
}

.s4-title h1 a:hover, .s4-title h2 a:hover, .ms-ltviewselectormenuheader .ms-viewselector a:hover
{
    font-family: Verdana;
    color: #454545;
    font-weight: bold;
    font-size: 10pt;
    text-decoration: underline;
}

This gives me menus that look exactly like I want them to. And they underline and go darker as required when you hover over them (sorry not enough rep to show the image) enter image description here

However, some SharePoint javascript is overriding my efforts when I navigate to a document library such as Dave Hooper > Share Documents > All Documents and hover over the 'all documents' link: enter image description here

I presume the styling is changing due to some built in javascript as disabling it makes it behave like the 'Shared Documents' links. But obviously the site needs javascript and I still want the popup to appear and allow users to change views etc.

So I presume I need to override some Javascript somehow? Any ideas?

Thanks @dandroid and @sig-weber! In the end I had to do a little more work (should I put the complete answer in a comment or is editing my original post the right thing to do?) but @sig-weber did the hard work:

.ms-ltviewselectormenuheader .ms-viewselectorhover
{
    border: 0px;
    padding: 2px 0 0 0px;
    text-decoration: underline;
}

.ms-ltviewselectormenuheader .ms-viewselectorhover A
{
    font-family: Verdana;
    color: #454545;
    font-weight: bold;
    background-color: #FFFFFF;
    font-size: 10pt;
    text-decoration: underline !important;
    background-image: none;
    padding: 2px 0 0 0px;
    margin: 0 0 0 6px;
}
Improve this question
4
  • 2
    You could just override that styling as well. Doesn't hurt the functionality by doing so. No need to change any javascript – user2536 Jan 23 '12 at 9:55
  • I assumed (I may be wrong as I'm a n00b at SharePoint and Javascript after coming from a pure ASP.NET and SQL background) that the javascript is happening AFTER I've styled it in CSS - it all works fine with Javascript disabled. So how can I override it? – dmch2 Jan 23 '12 at 10:55
  • 1
    The JavaScript applies some CSS styles which are defined in the core.css which is easily overridden by any other css if you css is loaded after the core.css. – user2536 Jan 23 '12 at 11:01
  • ah right - thanks for the clarification. I'll go hunting in core.css – dmch2 Jan 23 '12 at 15:57
2

The SharePoint built-in JavaScript changes the CSS class, so you need to apply your style like this:

.ms-viewselectorhover a
{
    font-family: Verdana;
    color: #454545;
    font-weight: bold;
    font-size: 10pt;
    text-decoration: underline;
}
Improve this answer
1
  • In the end I needed: .ms-ltviewselectormenuheader .ms-viewselectorhover { border: 0px; padding: 2px 0 0 0px; text-decoration: underline; } .ms-ltviewselectormenuheader .ms-viewselectorhover A { font-family: Verdana; color: #454545; font-weight: bold; background-color: #FFFFFF; font-size: 10pt; text-decoration: underline !important; background-image: none; padding: 2px 0 0 0px; margin: 0 0 0 6px; } – dmch2 Jan 24 '12 at 8:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.