Sharepoint 2007 Customization Ramp Up – Part 3: Basic Customization

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.

Basic Customization:

  • 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:

  • Master Page – Controlling the outermost shell of the design including headers, nav, css, body content, javascript, and footer. Also includes Content Placeholders which are required to mark where the specific SharePoint features will be located in your design
  • 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.

 

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.

 

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:

 

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.

 

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.

Customizing Navigation
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.

 

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: