SharePoint Branding Issues
As promised, I am writing a series of blogposts regarding issues you may encouter when developing a custom branding solution for SharePoint. Customers usually want to customize the out of the box design SharePoint is offering. It often simply does not reflect their company’s branding. SharePoint uses master pages and CSS to provide a consistent look throughout their pages. But when developing a custom design, you will notice it is not that easy to customize the things you want. So how do I tackle this?
I always create a custom master page. Why do you ask? The master pages SharePoint provides do not always provide CSS support on all it tags, and codewise the HTML is not really clean. The number one thing to remember when developing a minimal or custom master page for SharePoint is that SharePoint expects a number of PlaceHolders to be within the master page. If there’s some content in a placeholder you don’t want to be available on the page, don’t simply remove the place holder. Move the place holder within a hidden ASP panel.
So is that it? Obviously, no. SharePoint makes extensive use of controls within its pages. You can add and remove them at your discretion. Though there are a couple one which are pretty critical to ensure SharePoint running correctly. Namely, You better declare a SPWebPartManager on your page, otherwise WebParts won’t work. Another thing is to include the form tag right after the beginning of the body tag. This to ensure pages can be posted. Some other controls you might want to include, but which aren’t necessary include wssuc:Welcome, PublishingSiteAction:SiteActionMenu and PublishingConsole:Console.
In short:
- add a form tag (don’t forget the JS wrapper functions)
- include all place holders
- add a WebPartManager control
So, now you have your master page. What about the CSS? SharePoint uses the CSSLink control to add references to their CSS files, of which core.css is the most important. The default way to do CSS in SharePoint is to overwrite the SharePoint CSS in custom CSS files. Unfortunately this method can be quite cumbersome, as core.css seems to be a SS rather than a CSS. They don’t really use the cascading part of style sheets. So, you have to overwrite multiple classes before a change comes through, and sometimes it’s impossible to overwrite a style whithout changing another style too.
My preferred way to work is to remove the CSSLink control altogether and use my own stylesheets. I have two. The first one is a CoreLight.css. It encapsulates only the most necessary classes from core.css and the ones who mostly do not have to be customized. Of course, I cleaned up this style sheet. This is a file I reuse with each project and keeps getting better with each project. The other file is the CSS specifically for the current project. It’ll define the styles, colors, layouts, typography the project uses.
In short:
- do not use CSSLink
- create a CoreLight, which incorporates the necessary core.css classes (and others)
- create a specific stylesheet, where you define project related resources.
Mind that this way to work may not be the most recommended with SharePoint guidelines. It just makes my work far more easier. I can redesign a whole site within one work week. It is up to you to use the method you’re more at ease with.
This was my global approach for custom SharePoint branding. Following articles will deal with some specific issues when creating a custom SharePoint branding.