So, I’ve had a interesting problem – I’ve been asked to style up a site which uses a very dark colour for the area behind the ‘global links’ at the top of the page. “No problem”, I thought, “I’ll just make the colour for the hyperlinks up there white”. Wrong! The styles which are applied to the Welcome control and the My Links menu are Shared with other page elements – such as on the publishing console. See below for what I mean – the areas sharing a the ms-splink and ms-hovercellinactive styles are bordered in red.

This posed a problem – some elements needed dark text, others light, and SharePoint gave them all the same style. Looking at the master page, I couldn’t see any way of directly applying my own style – they seem to be built into the delegate controls (though I must confess, I can’t see where). Anyway, I didn’t fancy the delegate controls.

After much head scratching, I realised my mistake – CSS always overrides with the latest applicable style. Thus, in the end all I needed to do was make sure that there was a style which only applied to the items in the ‘global links’ section, and that it came after the ‘normal’ ms-splink and ms-hovercellinactive styles.

Thus, I found that the following style did what I wanted:

/* Style to make the link menus for 'Welcome' and 'My Links' light coloured text */
.ms-globallinks .ms-SPLink a,
.ms-globallinks .ms-SPLink a:link,
.ms-globallinks .ms-SPLink a:visited,
.ms-globallinks .ms-SPLink a:active{
color:#ffffff;
}