Patrick's SharePoint Blog

SharePoint's Booming world

Posts Tagged ‘Master Pages’

Styling the Welcome menu

Posted by Patrick Boom on February 22, 2011

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.


Advertisements

Posted in SharePoint 2010 | Tagged: , , , , | 11 Comments »

Branding SharePoint Sites, how to get started

Posted by Patrick Boom on February 17, 2011

Many of us out there have encountered it before; How do I make SharePoint look the way I want it to, without destroying any of the functionality that comes out of the box? In my current project, we face the same challenges that leave us sometimes puzzled on why Microsoft has chosen certain design approaches.

One of those things is the use of table style design, especially in the WebPartZone and WebPartChrome controls. It really frustrates designing based on DIV’s, which is the standard nowadays.

The second thing is the complete overload on CSS that SharePoint applies to pages to handle the styling of the various elements. In one way, this allows for very detailed control over UI elements, but in the other hand makes it almost impossible to apply a generic style across all pages and controls.

Fortunately, I was not the only one facing this issue. So here are some of the links I found very useful when starting to design Intranet en Internet web sites based on SharePoint 2010.

To start off, Andrew Connell and Randy Drisgill provided a quite extensive article on how to approach Branding with SharePoint 2010. This article is excellent and will provide you a flying start in any design and helps to understand the various elements contained in a SharePoint master page and the styles that are applied to them.

When web designers start developing their front-end design their first course of action is to reset all the css styles that are applied by default. Doing that on SharePoint will, well, confuse SharePoint to say it mildly. Kyle Schaeffer has developed a reset css specific for SharePoint 2010 that gives front-end designers a head start in applying their custom css on SharePoint.

CSS is basically the keyword in styling SharePoint. Not by introducing your own classes, but understanding the 200+ classes Microsoft introduced themselves and which does what. One of the absolute guru’s on this front is Heather Solomon that also provided a complete reference to all the styles that are applied to certain UI elements and what they said. A must read for any developer that needs to style SharePoint. Unfortunately, only for SharePoint 2007 now, but I am sure she will also provide one for SharePoint 2010.

Master pages and Page Layout form the basics on any SharePoint site and customizing can be challenging. Andrew and Randy provide a good starter.master that has all the essential elements in place and also contains good comments on which section does what. Couple of things I encountered that are crucial:

  • Do not remove the s4-workspace, s4-bodyContainer and MSO_ContentDIV divs.
    Doing so will really mess up your user experience with SharePoint, especially when entering the edit modes.
  • When going for a fixed width site, which is quite common these days, apply the s4-nosetwidth class to your workspace div. This will instruct the javascript behind the scenes not to touch the widths set in the CSS definitions.
  • Use the s4-notdlg class for any element you do not want to show in the modal dialogs of SharePoint. Failing to do so will show your beautiful header in full power within small dialog boxes.
  • Accept that SharePoint controls output their HTML in a certain way. Yes, some use tables to structure it, deal with it. If have played around with ControlAdapters and basically found that they do more damage than they solve. For one thing, because a lot of the html rendering methods of controls are a) internal and b) sealed, there is no way of reaching it, only to completely override it. Thing is, they introduce the object DOM in the HTML that you will then omit…and shake up SharePoint.

In short, styling SharePoint can be a tedious task. With these links, I hope you guys get in the right direction quick. I wished I knew them before finding out the hard way 😉

CU

Posted in SharePoint 2010 | Tagged: , , , | 1 Comment »

 
%d bloggers like this: