Styling the Welcome menu

Sometimes I wonder why MS makes some things so hard to do. During the styling of our project, we wanted to move the Welcome menu, also known as the user menu or Personal Action menu to another location on the page.

The control is easy to find and is basically a user control located in the ControlTemplates folder in the 14 hyve. However, that control only defines the menu structure of the control, not the appearance. I started to worry a little, as that probably means that the appearance of the control is defined in code.

Posts by Erik Svenson and Shehan Peruma showed how to change the link color. But I hope that is not the only stuff you can change in the control. How would you ever integrate this into a new publication design?

Hence, I decided to call my favourite friend called Reflector again and dive into the code of SharePoint. Turns out the behaviour of the control is determined by two classes in the CSS, called ms-SPLink ms-SpLinkButtonActive ms-welcomeMenu and ms-SPLink ms-SpLinkButtonInActive ms-welcomeMenu, controlling the active and inactive state respectively.

Basically, the most important part to look for in the Corev4.css (in the Themable folder for publishing sites) is the ms-welcomeMenu class and the classes derived from that. Controlling the font color, family, background and other options is quite easily done through these classes:

.ms-welcomeMenu {
   padding:2px 5px 3px;
   margin:0px 3px;
   font-size:1em;
   font-family:Verdana,sans-serif;
   border:0px solid transparent;
   display:inline-block;
}
.ms-welcomeMenu a:link {
   color:#00259b;
}
.ms-welcomeMenu a:hover {
   text-decoration:none !important;
}
.ms-welcomeMenu.ms-SpLinkButtonActive {
/* [ReplaceColor(themeColor:”Dark2-Lighter”)] */
/* [RecolorImage(themeColor:”Dark2-Lightest”,includeRectangle:{x:0,y:489,width:1,height:11})] */
   background: url(../img/backgrounds/bg-sprite-tabbar.png) 100% 0 no-repeat;
/* [ReplaceColor(themeColor:”Dark2″,themeShade:”0.8″)] */
  background-color:#21374c;
}
.ms-welcomeMenu.ms-SpLinkButtonActive a:link {
/* [ReplaceColor(themeColor:”Light1″,themeTint:”0.9″)] */
   color:#00259b;
}

What I did in above CSS override is changing .ms-welcome a:link and .ms-welcome a:hover to change the font color of the inactive state.
To change to color of the font as soon as the mouse is over it, add the style ms-welcomeMenu.ms-SpLinkButtonActive a:link.

Secondly, I have overridden the background in .ms-welcomeMenu.ms-SpLinkButtonActive to show a custom made image. If IU left it, it would show the dark background of the top bar, which is something I do not want on a white background ;-).

By default, the ms-welcomeMenu has a transparent background in the inactive state, as it should be and therefore blends in into its container. Remember though that you should override these classes in a separate CSS file and be sure it is loaded last (or at least after Corev4.css) in the master page. Also, you cannot remove any styles, just override the settings already made.

Finally, you can do the same for the SiteActions menu. You can do that by looking for the classes called .ms-siteactionsmenu.