Thursday, June 14, 2007

I had to create a custom CSS for a SharePoint portal, and ended up struggling a bit with the SharePoint CSS classes. Not being much chop at CSS, the only way I could get the job done was with Firefox’s Web Developer plugin and Heather Solomon’s excellent SharePoint 2007 CSS Resource Chart (http://www.heathersolomon.com/content/sp07cssreference.htm).

In this latest project I had to modify the colours of the top menu bar. Easy enough, but I noticed when I viewed the dropdowns that if the submenu text was too long, it caused discolourations to appear in the flyout menu.



Notice that there is a light blue bar next to the submenu item I was hovering over. Personally I think with the default SharePoint colour scheme this looks quite nice. However, as I was asked to make the row all the same colour, I had to modify the menu flyout classes as follows:

.ms-topNavFlyOuts tr td
{
background-color: #C0C0C0;
}
.ms-topNavFlyOuts a:visited
{
background-color: #C0C0C0;
color: white;
}
.ms-topNavFlyOuts a:link
{
background-color: #C0C0C0;
color: white;
}
.ms-topNavFlyOutsHover a:link
{
background-color: #ffeaad;
color: black;
}
.ms-topNavFlyOutsHover a:hover
{
background-color: #ffeaad;
color: black;
}
.ms-topNavFlyOutsHover a:visited
{
background-color: #ffeaad;
color: black;
}
.ms-topNavFlyOutsHover tr td
{
background-color: #ffeaad;
}

The final result:

4 comments:

  1. really helped me a lot

    ReplyDelete
  2. Thank you for the feedback, Kris. Glad it helped.

    ReplyDelete
  3. Good find- I left this item as the last to tweak on my customized portal since it proved so annoying. :)

    Adding the .ms-topNavFlyOutsHover tr td{ } passage in my custom CSS did the trick. The original theme was bleeding through until I explicitly overrode the tr and td styles.

    Thanks!

    ReplyDelete
  4. You're very welcome, Chris. I appreciate the positive feedback.

    ReplyDelete

Note: only a member of this blog may post a comment.