Customizing the SharePoint/WSS UI – Part 1
Have you noticed that you can almost always spot a SharePoint site when you encounter one on the web? They all seem to have the same layout, with the familiar blue menus, and the little team icon in the upper-left hand corner. It’s always bugged me that “all SharePoint sites look alike” (which I know isn’t really true, but that’s what it feels like) and few people customize the look and feel. Why is that? I use SharePoint a lot as an end user, but haven’t spent a lot of time customizing it – at least not customizing the UI. Until now.
I have been spending some of my spare time recently looking into just what it takes to customize the SharePoint UI. I knew going in that WSS (the foundation for SharePoint) was based on ASP.NET 2.0 and heavily utilized Master Pages, Server Controls and CSS, but I wanted to see just what it took to make s SharePoint site not look like a SharePoint site. As it turns out, it can be pretty challenging to do since there is SO MUCH going on inside the UI, but it is possible, and I wanted to share some of the resources I found to help me get into this interesting area.
DISCLAIMER: I’m neither a SharePoint expert nor an accomplished designer, but I am interested in becoming smarter about SharePoint – specifically around UI customization, design, building custom web parts and finding ways to use WSS as a tool for teams to collaborate better together.
NOTE: Everything that I discuss in this post applies equally to WSS and SharePoint. Since SharePoint is based on WSS, and it’s the WSS bits that control the look and feel as well as layout, branding and themeing, for the purposes of this post WSS = SharePoint.
So – how do you get started? First, become a big fan (as I have) of Heather Solomon. Heather is a SharePoint MVP in the Houston area who is an accomplished designer and has a particular expertise in branding SharePoint sites. She provides on her blog a couple of great resources for the aspiring SharePoint designer - the first, is the SharePoint Base Master Page, the second is the CSS options you have with Master Pages. These two resources are the key to successful SharePoint branding. The base MasterPage is basically a copy of the default.master that comes out-of-the-SharePoint-box with all the layout removed – all that ‘s left are the base required (and optional) SharePoint user controls. The CSS reference will help you understand which CSS styles are defined in SharePoint, and where they’re applied. If you want to alter the look and feel (and sometimes behavior) of any SharePoint element, this style reference will be a GREAT help to you figuring out which styles to change. The other tools I’d recommend are (of course) the SharePoint designer, for directly editing and managing your SharePoint master pages, and the IE Developer Toolbar (or FireBug if you’re still using that other browser). Note that as of this writing, FireBug only works on v2 of that other browser – it doesn’t (yet) run on the newly released v3.
Get down to it
Now – this is where the real fun begins. Open your web site using the SharePoint Designer and create a new MasterPage in the /_catalogs/masterpage folder. Replace the contents of the system-created MasterPage with the contents of the base MasterPage you downloaded from Heather’s web site. You won’t need to keep ANY of the system generated MasterPage as Heather hath provideth everything thou dost needeth. After saving your new MasterPage, right-click on it MasterPage and choose “Set as default MasterPage”:
After selecting this option, your home page will dramatically change - you get essentially a big vertical scrolling list of content in no particular order, with almost no formatting :-). Whaa? Remember that since SharePoint web pages are based on the MasterPage framework, and you’ve just made massive changes to the default MasterPage, things are going to look a little weird for a while.
With the easy part done, now it’s time to figure out what your site is going to look like. Since I’m about as creative as a jar of mayonnaise, I chose to cheat. Remember – good developers steal good code, but great developers steal great code. Luckily for all of us non-designer types, there are several free CSS template sites on the net that we can use on our sites with no royalties required. I looked around the net at the various free CSS template sites looking for cool-looking layouts and chose one I thought looked easy to work with. One word of advice on this though – you should at least start off by picking a CSS layout that is NOT designed for a fixed width display – if you do, you have to be more careful about managing the content in your web site because the CSS won’t allow the page to automatically expand when your site content & layout change. I went with a “flow” format that took up the whole screen and was easier for me to modify.
After choosing your CSS template, you have to upload the selected CSS into a folder on the server (I chose a new, custom folder called CSSStyleLibrary) and edit the base MasterPage to utilize it. Some of the styles (well, probably most of the styles) also have images and other resources to go with them. For them, you’ll want to create a sub folder usually called “images” in the CSSStyleLibrary and place all of the style’s images in there so the CSS can find them.
Tip: Since I was fooling around with several new MasterPages and using different templates, I used the power of SharePoint designer to rename the “images” folder to something tied to the style I was using (usually the same name as the CSS file). SharePoint designer will automatically update the styles in the CSS file to point to the new folder!
On or about line 24 of the MasterPage file, there is an "@import” statement that should point to your custom CSS file. Since I put mine in the CSSStyleLibrary folder on the root, my URL was “/CSSStyleLibrary/Line2.css”. If you have more than one CSS file to add, this is the place to do it. You can also use this area in conjunction with the CSS tags detailed in the CSS Options page to further customize the styles that are used by SharePoint uses to map to your theme.
Once the MasterPage and CSS files are in place, you can start to add your layout. Most of these free CSS files come with a sample HTML page that contains something that looks like a blog site. Copy the HTML code out of the sample page and paste just after the SPWebPartManager. You’ll have to take out all the sample data, leaving the core DIV tags and their associated style assignments to make this work. At this point, you should still have a big list of SharePoint data, but the page should start to look like the page shown in the sample HTML page that came with the style.
With the HTML in place, it’s time to begin the hardest part – migrating the various SharePoint server controls from the base MasterPage into the HTML DIV content areas, including the possibility of creating some new DIVs to handle things like the editor window, etc. For this part, you’ll have to wait for the next post in this series because this post is long enough for now, it’s really late here, and I need to get up really early tomorrow :-)
Technorati Tags: sharepoint,css,asp.net,wss