Welcome to Part 3 of the series. In the previous two sections I covered things you should know before getting started with SharePoint Customization, while in this section I will cover actually doing some customization. Firstly, let me state for the record that most of what I’ve learned on this topic has been from reading blogs from Heather Solomon and Liam Cleary, along with just playing with things myself. Many of the topics covered in this article can seen in much more detail in some of their posts.
- Using SharePoint Designer
- Understanding How Pages are Rendered in SharePoint
- Minimal Master Page
- Overriding Cascading Style Sheets
- CSS Friendly Adapters
- Customizing Navigation
- Customizing Search Results
- More Customization Examples
Using SharePoint Designer
I covered some basic concepts of using SharePoint Designer and the pitfalls of UnGhosting in my previous article. That being said, this article will be centered mostly around customization by using SharePoint Designer, while the next installment will cover making Site Definitions for customization. I like proofing all of my designs using SharePoint Designer first and then when I am happy with the results I package them up into a Site Definition. I find this method much more fluid because you can see your changes right away just by refreshing the site in your browser. See my previous article for some tips on getting started with SharePoint Designer.
Understanding How Pages are Rendered in SharePoint
As I mentioned before Heather’s article on this is really the cream of the crop, but I will cover a brief overview of it here. Basically, your rendered page is made up of several dynamic parts which SharePoint merges together on the fly as a page is requested. You can think of the rendered content from the outside in as:
- Page Layout – Controls the actual main body content including field controls and web part zones
- Content Types – Field Controls point to specific Content types and can be thought of as something like a grouping of data fields (or Columns) which make up a document type
- Columns – Columns are the most atomic type of data storage in SharePoint. They are literally the actual data column that is located in a table in the SharePoint Content Database. Think of them as areas that reusable content is stored (examples: author, publish date, byline, content, roll-up image, etc.)
When customizing your SharePoint 2007 sites, you will probably want to work in this order from Master Page down to Columns.
- MOSS 2007 Design Component Relationships and Diagrams – Heather breaks down SharePoint page rendering in the most understandable way I have seen to date
Minimal Master Page
The Master Page is really where any SharePoint design begins, it contains much of the layout shell and must include specific Content Placeholders to tell SharePoint where specifically you want things like the navigation and Site Actions to be located. If you omit the required Content Placeholders, SharePoint will error on you. Because of this, it makes sense to start with a bare bones Master Page that contains no styles and just the sections that are absolutely required. Thankfully Microsoft has included an easy way to create an empty site with an empty master page… OH WAIT… that would be too easy… no, in fact there is nothing like this included with SharePoint out of the box. Thankfully, once again, Heather to the rescue. Go to her site and download her Base Master Page asap.
- Heather’s Base Master Page File for SharePoint 2007 – Heather’s base Master Page is the one I usually start with
- How to: Create a Minimal Master Page – Microsoft’s minimal Master Page. Heather’s is better, but this is good for reference
Take a look at those Master Pages, notice how they handle the Content Placeholders that they don’t want to show. You can simply place the unwanted Content Placeholders in a hidden panel via:
Overriding Cascading Style Sheets
Overriding CSS is another key to customizing SharePoint designs. Almost everything in SharePoint can be styled with an overriding Cascading Style Sheet. To better understand this concept, check out some info from Heather’s blog, specifically check out the second link listed here which is a gigantic list of all the major SharePoint elements and their css classes:
- CSS Options with Master Pages – There are several options for how you override the SharePoint css files, Heather goes over the pro’s and con’s of each method
- CSS Reference Chart for SharePoint 2007 – Heather’s gigantic list O’ SharePoint style classes
When it comes to overriding the css, I find it incredibly helpful to have Firebug at my disposal. If you have never tried Firebug I can’t recommend it enough. When installed in Firefox you can load an interface that not only allows you to pinpoint what classes are being assigned to an element but also if they are overriding other classes, and probably even more importantly, allows you to modify them and see the changes in real time. Its probably the single most important weapon in my SharePoint customization toolkit. I only wish that it would work in Internet Explorer for those times when IE and Firefox diverge in their handling of css. I have also included a link to the Internet Explorer Developer Toolbar which is worth downloading, but is not nearly as useful as Firebug.
CSS Friendly Adapters
When it comes to CSS, one area that SharePoint is lacking is the actual ASP.net 2.0 controls that it relies on (asp:menu and asp:treeView as examples). Many of these pump out extremely verbose and non con formant table structures. If you require very specific styling of these, or are interested in w3c and government compliance you are going to be sorely disappointed in Microsoft’s out of the box implementation. To get around this Microsoft has released to the community a set of CSS Friendly Control Adapters that work nicely with SharePoint 2007. Essentially what they do is replace the standard html stream that ASP.net is sending to the browser with a very minimal css friendly layout. They can be rather tricky to install, so I have an article on how my team put them to use (see below). For example the standard code for the Menu control outputs a table structure that includes many many elements, some with classes defined (for overriding) and some witho
ut. With the adapters installed it outputs a simple unordered list with each element having unique classes defined. I have found this MUCH easier for customizing.
- ASP.NET 2.0 CSS Friendly Control Adapters 1.0
- CSS Friendly Control Adapters in SharePoint 2007 (A Walk-Through)
One quick word of warning on the CSS Friendly Adapters: my team is running into issues with the treeView adapter crashing some of the SharePoint out of the box admin pages. Some folks are working on a solution now, you can follow the story at the asp.net forums.
A big part of any SharePoint customization is making the menu’s your own. Besides customization with CSS you may want to user various dataproviders to show different navigation schemes or play around with the amount of static or dynamic menu items that show at any one time.
- Moss Navigation Deep Dive Series – The Microsoft ECM Team goes into excruciating detail about the various menu options that are available
Customizing Search Results
Searching is a huge deal in SharePoint 2007, and you may want to customize the search results page. You can either edit the results page by using the SharePoint web interface (just use the Site Actions menu to edit the page) or use SharePoint Designer. From SharePoint Designer go to Open Site and pick your website. At the top of the Folder List you will see Search listed. Double click this, and it will open the Search site. From here, you can see the results.aspx page listed. Be warned that this file is extremely dense (mine clocks in at 1200 lines).
- Search Results – Liam gives a great overview of using the SharePoint web interface to customize the search results
More Customization Examples
There are several great SharePoint UI customization examples on the web right now that give thorough walk throughs of the entire customization process, here are a few of them:
- Building tylerbutler.com, Part 1: Planning and Basic Branding – Tyler Butler posts a six part feature on customizing MOSS to look like his old site
- Customizing and Branding Web Content Management-Enabled SharePoint Sites – Patrick Tisseghem’s three part article on customizing a WCM site
- hello its liam – Rebuild Corporate Website (Parts 1 – 7) – Liam’s seven part SharePoint customization series