Skinning MS SharePoint with standards

~ 30 May 2007 ~

Among the many reasons I might articulate for the relative slowdown in updates and articles around here, Microsoft SharePoint 2007 resides near the top of the list.

For a few weeks now I’ve been completely immersed in not only understanding the app from the viewpoint of a user, but also from that of a developer attempting to skin SharePoint’s templates with our organization’s identity. I’ll refrain from offering a complete analysis of what SharePoint really is (and what it isn’t), but suffice it to say it’s a collaboration tool that offers a lot of nifty features but falls short (way short, in fact) in terms of semantic, accessible markup and “don’t make me think” workflow.

Prior to my arrival, SharePoint was chosen as one of the apps used internally by employees, and I’ve been tasked with not only skinning the look and feel but also cleaning up the code. It’s been an insurmountable task at times, to say the least, but we’ve made some decent progress along the way.

Out of the box, SharePoint looks like this:

Default Sharepoint look and feel

Lovely. And don’t even dare glance at the source code. Our customized install of SharePoint, on the other hand, looks roughly like this:

Sharepoint customized identity

…with much cleaner markup. All of this has required considerable customization, and thus for those of you waging a battle with SharePoint modding, I offer a few resources we’ve used along the way.

Essentials

Customization

Screencasts

Other Link Lists

I’ll keep comments open for the three of you dealing with SharePoint in your organization, but please note I can’t offer support for all things SharePoint customization. For that, you’ll need to summon Quan Yin, Buddhist goddess of mercy.

 

64  Comments

Veer Veer: Visual Elements for Creatives.
Stock photography, type, and killer tees. Genuinely recommended by Authentic Boredom.

1   Matt Williams ~ 30 May 2007

How are you measuring the impact of your code changes in terms of organisational performance improvement?

Does your project have any big goals? I mean, what do you hope to get out of Sharepoint?

If you don’t mind me asking… :)


2   alice ~ 30 May 2007

:O!

that’s a stellar customization! How long did it take in all to reach it?


3   Isaac ~ 30 May 2007

Thanks for all the resources. The organization I work for is just beginning an implementation of Sharepoint, and I’m guessing I’ll have my hands full to make it work. These should get me pointed in the right direction, at least.


4   DaveE ~ 30 May 2007

Your customized layout is extraordinary for anything SharePoint or MS powered. Our organization is considering SharePoint and .Net 2.0 for all of our future development needs. Even with my limited interaction with these platforms, I tend to have nightmares. It’s an ugly, backwards system that defies convention wisdom.

Great job on the customization and thanks for the helpful links!


5   Joshua Marshall ~ 30 May 2007

Having worked with and been horribly frustrated by SharePoint in the past, I’ve got to say that this is the nicest looking customisation of the thing I’ve ever seen, Cameron.

Amazing job by all concerned!


6   Steve Jackson ~ 30 May 2007

Brilliant! I’ve been tasked with doing a “look and feel” customization for out Sharepoint intranet and these resources have come at just the right time.

It’s a horrible, HORRIBLE system but the powers-that-be have made the choice. Your customization gives me hope!


7   tom ~ 30 May 2007

Props to you, Cameron. My organization chose to go with Ektron CMS400.net and I have to say, on the crappy meter, Ektron has the needle pegged all the way to the right. I think we may have you beat!

Our CMS “solution” was born out of the need to have the CMS interact with a MS commerce server and a bunch of other requirements I’m not qualified to repeat. But I’m wondering — what else is out there that would serve as a decent alternative?


8   Michael ~ 30 May 2007

There are more than three of us! I’m about to grapple with a Sharepoint-targeted project, so these resources are timely and fantastic. Plus, you’ve turned a beast into a beauty.


9   jharr ~ 30 May 2007

Cameron,

When customizing past versions of SharePoint we always ran into a huge issue that required us to basically fold and resign ourselves to the MS way - that was upgrades. Any patch or update would inevitably make a change in the XAML or other areas that destroyed customizations or hobbled the product. Has that been resolved in 2007? How are you managing updates and changes to the SP core?


10   Carson ~ 30 May 2007

A) Sharepoint is an abomination, my condolences.

B) What you sir have done there, inspires tears of admiration. Great work. You got skillz.


11   Chris ~ 30 May 2007

This article comes at a most opportune time. My company is about to migrate the employee portal from TIBCO to MOSS 2007 and I am the lead designer/information architect on the project. I am awaiting the vendor we’re working with to come in and get settled before I get into it but I have been concerned about the level of effort and where I would find help if I needed it.

Unlike your customization above, our customization for the employee portal section needs to look like a custom portal and not a collaboration site. The collaboration will occur in team sites but for the global population we’re hoping to get away from the “column-on-the-left, lists, documents, etc” MOSS setup. We want it to look like it wasn’t built with MOSS but have all of the nice CMS features of MOSS.

I think I’m in trouble.


12   Ben ~ 30 May 2007

I’m impressed, looks very slick. If the code is standards compliant as well, that’s even more of an accomplishment. I spent some time working on a previous version of SharePoint - I don’t know how much of an improvement 2k7 is, but it was an absolute nightmare.


13   Bryan Peters ~ 30 May 2007

Awesome job! I’ve been ripping up MOSS 2007 since Beta 2 TR, and found it frustrating at first, but once I understood where everything lives, it turns out it’s a powerful platform with a LOT of flexibility in a corporate environment.

Good tips. My bit of advice: if anyone’s looking to dive in to SharePoint design, plan on giving up a good chunk of your life during the learning curve. My #1 tip to everyone that asks me how I created our intranet design: Firebug and CSS inheritance.


14   rob cherny ~ 30 May 2007

Hey Cameron, I remember your mention of SharePoint at An Event Apart. I feel your pain, we’ve just deployed three sites on the latest version and I have to say: be happy it’s improved a lot since the prior version in terms of customizing it.

This does look stunning, I have to say. Great work.

We have several new projects coming and actually am looking forward in a sort of “up for the challenge” sort of way. Maybe I just like punishment ;-)

Key points we’ve learned along the way:

  • Surrender to SharePoint Designer (as a text editor and file browser interface to the backend, at least)
  • SPD will allow you to easily edit the master pages and add arbitrary files to the site structure as needed
  • Quick launch is your friend, especially in terms of customized, security enabled menus
  • SPD will also allow you to change the “default” addresses and actions for some of the built in components, so you can keep them hidden away if necessary
  • Hardest point constantly for us has been the blurry line between “admin” type screens for maintaining the content vs. user-centric screens which are content only screens

I’ve been thinking about posting to my blog on this very thing, beat me to it! Great stuff, if a difficult product to work with.


15   Ted ~ 30 May 2007

Cameron

If you don’t mind, can we see larger screenshots of both the original Sharepoint interface and your skin.

Thanks :)


16   Ben Bishop ~ 30 May 2007

One of the companies I work for has just started using 2007. This will be very useful information.

By all accounts its a nightmare but presumably, when tamed, the advantages of Sharepoint are too good to pass up? Can someone briefly highlight these? It does seem to cause an awful lot of headaches!


17   Jina Bolton ~ 30 May 2007

Three jobs ago, I had the same task of reskinning SharePoint to match the corporate look & feel, and of attempting to clean the code up. I have a confession. When I quit this job, I did not tell them the reason I quit. Let’s just leave it at that.

Yeah, so… I gave up. It’s nice to see someone who trudged on through and came up with something as beautiful as possible with this horrible piece of software. You did a fantastic job.


18   Pete b ~ 30 May 2007

One of the worst days of my life was spent working with SharePoint 2007. I bet you had to sweat to get it looking like that :)


19   Stephen Capp ~ 30 May 2007

Thanks for the additional resources Cameron.

Anything else you can share will be greatly appreciated. A lot more than 3 people are tasked with making SharePoint not look like SharePoint and resources are few for this cryptic process. I think you are going to receive an avalanche of comments and questions on this.

Could you share your approach in more detail? Were there pitfalls you came across? Did you throw yourself down the stairs in frustration?


20   Paddy C ~ 30 May 2007

I am not familiar with SharePoint but it sounds like an immense waste of resources. Is there not another, better solution?


21   Hamish M ~ 30 May 2007

Oh dear. The company I work for is planning to use SharePoint in the future, and my co-worker has already mocked up a very nice layout, but rather complex layout.

Sounds like working with SharePoint (or as we now like to call it, “ScarePoint”) is going to be quite a task.

Thanks for all the info Cameron!


22   Jared ~ 30 May 2007

Thank you for this post! We’re going to be moving our intranet over to SharePoint 2007 later this year and I know I’ll be ripping my hair out during that time. At least I’ll have some ammo going into the trenches.


23   Ryan Unger ~ 30 May 2007

I simply convinced my last employer not to even bother with SharePoints. As you could have guessed, things were much easier in my life after that.


24   Eoghan McCabe ~ 30 May 2007

Hey Cameron. Give us a bigger screenshot please so I can peep your pixels!


25   Kanwal ~ 30 May 2007

Awesome job. I have had quite a bit of work on my hand too, in completing certain customer requirements.


26   Cameron Moll ~ 30 May 2007

Whoa, lots to respond to…

that’s a stellar customization! How long did it take in all to reach it?

A little too long. Took me about 1 week of full-time work to muscle through just one master page, but admittedly that was while learning the app simultaneously.

Any patch or update would inevitably make a change in the XAML or other areas that destroyed customizations or hobbled the product. Has that been resolved in 2007? How are you managing updates and changes to the SP core?

Great question. I’m not familiar with 2003 at all, but I hear it’s handles customization much better (which isn’t saying much, given the difficulty of 2007 customization). However, we haven’t touched the core too much, so it’s my hope upgrades will have minimal impact on the system.

I’ve been thinking about posting to my blog on this very thing, beat me to it!

Not a chance, Rob — you must still post your thoughts and tips. We’re not out of the woods yet, and we’d happily welcome your advice.

By all accounts its a nightmare but presumably, when tamed, the advantages of Sharepoint are too good to pass up? Can someone briefly highlight these?

Depends on what you mean by “advantages.” Do you mean the ability to check off every feature management is wanting, or a great user experience?


27   kylierose ~ 30 May 2007

This article is incredibly timely. The company I work for is investigating ways to customize MOSS 2007 for a range of different purposes. My task is to re-theme Sharepoint collaboration sites and portals and create solutions for content display modes.

It goes against the grain of everything I believe good web development should be. But I have come to the conclusion that with all content management and portal tools, there has to be a point where you accept what the software developers have decided is the best-practice and bend as much as possible it without breaking it.

Looks to me that’s exactly what you have done here. And kudos for sharing it with the community. However, I’m wondering just how far past this point we can push this product without making it do something it was not designed for? Hopefully, with a growing community of users and developers, this will become an easier task. And hopefully, the push towards a more standards-compliant model will emerge.

Thanks for the article Cameron!


28   Deaf Musician ~ 31 May 2007

That just looks BEAUTIFUL! Cameron… absolutely amazing work. You should totally start selling SharePoint themes, I’ll be the first one to buy it! Everyone is asking for a larger screenshot… please?!!??!


29   Steve Dalgleish ~ 31 May 2007

Good to know that this sort of thing is possible in Sharepoint. We’re just at the planning stage but SP is looking like the frontrunner because we’re a) a Microsoft shop and b) SP and Handshake Software provides an amazing relationship toolkit to link all our line of business applications together.

Keep the Sharepoint articles coming, there’s certainly a demand for them!


30   Shane Perran ~ 31 May 2007

It’s *really* great to have people like you involved with SharePoint and pushing for standards.

Shane
www.graphicalwonder.com


31   Cameron Moll ~ 31 May 2007

Could you share your approach in more detail? Were there pitfalls you came across? Did you throw yourself down the stairs in frustration?

Perhaps later, yes, and yes :D

Everyone is asking for a larger screenshot… please?!!??!

For now, the one posted will have to do.

Good to know that this sort of thing is possible in Sharepoint. We’re just at the planning stage but SP is looking like the frontrunner…

By no means am I endorsing SP here, just pointing all of you to some resources.


32   David Mead ~ 31 May 2007

Thanks for taking the time to share Cameron. My only experience was with the previous version and that was not a “happy time” to try and style that!

We’ve had some clients looking at MOSS recently so this is very timely.


33   Philip Waters ~ 31 May 2007

I’m the Technology Engineer implementing SharePoint for BYU-Idaho. That is quite a collection of useful links. Thanks.

Phil


34   eric ~ 31 May 2007

sounds like a lot of time invested. Were there any productivity gains or just a re-skin job? How many internal users?


35   Aaron ~ 31 May 2007

Could you be wooed into sharing if a PS3 showed up at your doorstep? ;)


36   Tobe Johnson ~ 31 May 2007

Good info here. We recently walked through a Sharepoint 2007 installation and customization for a client intranet site. After setup, we trained their staff on basic site maintenance and usage (a couple admin people, approx. 20+ site managers, and a few hundred viewers). It takes a while to get your mind around how everything is organized and structured, but once we did, for a Microsoft product, I feel pretty comfortable with it.

You need Sharepoint Designer for doing customizations of any depth. Here are a few additional links that we found of interest.

http://www.pptspaces.com/sharepointreporterblog/Lists/Posts/Post.aspx?ID=21

http://www.pptspaces.com/sharepointreporterblog/Lists/Posts/Post.aspx?ID=17

http://geekswithblogs.net/emanish/archive/2006/09/12/90979.aspx

http://alpesh.nakars.com/blog/2007/01/19/create-moss-2007-vpc-images-step-by-step-guide/



37   Darrel ~ 31 May 2007

“I’ll refrain from offering a complete analysis of what SharePoint really is”

I’m in the same boat. I’ve been describing it as ‘duct tape’. It’s rarely the BEST solution, but REALLY useful to having laying around and, as such, will be used for all sorts of things.

“I’ll keep comments open for the three of you dealing with SharePoint in your organization”

Ha! Alas, more of us are going to be sucked into Sharepoint sooner or later. It’s slowly becoming a defacto CMS/DMS for a lot of organizations.

At this point, I haven’t decided what to do…either a) hunker down and plow through it and become a sharepoint consultant on the other side or b) just run away screaming. ;o)


38   Janis ~ 31 May 2007

Thanks for the tips! My company is probably going to head into Sharepoint and asking me to customize it.


39   Chris McGrath ~ 31 May 2007

I think trying to customize SharePoint has driven some people to insanity. I think I escaped insanity (open to debate), but it was close… two years ago we got so ticked off trying to customize SharePoint that we pulled the plug on the project and started coding from scratch. Now it’s ThoughtFarmer — “social software for the enterprise” — and miffed SharePoint customers are a great source of business.


40   Brian Breslin ~ 01 June 2007

wow Cam, this is something i’ve been tackling for MONTHS! thanks for putting this out there.


41   Peter Wooley ~ 01 June 2007

As has been said, your experiences have come at a great time. I will soon be tasked with skinning The Beast, and am quite pleased to hear you were able to tame the mark-up as well. I’m still quite new to ASP.NET 2.0, but I’m hoping I’m dangerous enough to fix the mistakes Microsoft left (I see you <font>s!). Thanks for the resources and encouragement!


42   Kiko ~ 02 June 2007

That is amazing. We were planning to implement SharePoint ‘07 too but for our public website and eventually gave up. It’s just too hard to customize.


43   Sean Schroeder ~ 03 June 2007

Nice job as always, Cameron. A couple of our clients have implemented sharepoint so we’ve seen firsthand the nightmare it can be…as a result, we’ve built an alternative that plays well with our CMS (Sava CMS). It’s a lightweight tool in the tradition of Basecamp but it will be available for enterprise deployment with or without the CMS (a free hosted solution will be avilable soon). The XHTML/CSS is super lean and mean so it can be skinned easily to meet in-house visual standards.

Someone asked for an alternative, here it is: www.wrkspc.com.


44   Jesper Rønn-Jensen ~ 04 June 2007

Thanks a lot for sharing these links. Sure this will come in handy at some point.

I’m a bit worried, though that the general opinion in the comments are “wow, it’s possible to change sharepoint, so it’s a great product after all”.

In my opinion, It’s the defaults that matter. If it doesn’t work out of the box, it doesn’t work. Period. I don’t care if it can be changed, it ships with the wrong defaults.

Projects are often short on time and work, and not all projects have the liberty, time and resources for using week(s) to modify the standard setup.

Microsoft should grow up and change default behaviour. That’s my opinion (slightly exaggerated so that we can have an opinionated discussion about this :)


45   Jesper Rønn-Jensen ~ 04 June 2007

I wrote this to continue my comment on my blog http://justaddwater.dk/2007/06/04/sharepoint-meets-web-standards/


46   Martin ~ 05 June 2007

Nicely done Cameron, like Shane (he’s a guru in the “traditional” SharePoint world) has said, it’s *great* to see people like you involved :-)

I’ve spent many months hacking master pages and SP’s horrible CSS apart since V2, and I’ve found that my problems have been solved by one simple (OK, relatively simple) thing: Taking the time to create a completely stripped of all layout HTML master page. A bare-bones template, so to speak, with only Placeholders left. Although this takes some doing, from there, it’s relatively simpler to build future guises.


47   Stephen Capp ~ 06 June 2007

Sorry to keep banging on your door about this Cameron but I have a question about your approach. Did you use master pages or did you just use stylesheets? Why did you choose one over the other?


48   Cameron Moll ~ 06 June 2007

Both. Merely using CSS doesn’t fix the bloated markup issue. So we built a master page from the ground up by keeping only the necessary placeholders and then throwing away all the other code (replaced with our XHTML markup).


49   Stephen Capp ~ 06 June 2007

Thanks for your reply Cameron.

So if you’re using master pages how did you address the pages that come from _layouts directory? When you drill into certain sections (like document libraries, view all site content etc) these pages are still hanging on to the default SharePoint look and feel.

Any page that comes from the _layouts directory is not affected by a master page but by application.master. You can’t apply a master page to these pages.

This is the pain I’m wrestling with. I have yet to find a way to guarantee consistent styling to ALL pages within SharePoint.

Are all your pages styled the same or do some of them still have that oh-so-sexy out of the box SharePoint look?


50   Kevin ~ 11 June 2007

Thanks for the glimmer of hope with your beautiful design for SharePoint 2007.

Its a huge pain in the a$$!


51   teodz ~ 14 June 2007

Great design you have there! Sexiness!

I’m currently redesigning my company’s website (complete overhaul!), after this task, ill surely be keeping my hands full on customizing Sharepoint.

Thanks for the links, Cameron!


52   Maura ~ 20 June 2007

Hey Cameron,

Thanks so much for sharing all this work with us. We (they:)) are rolling out Sharepoint over the coming months in our University. I was told that we could only customise it using MS Frontpage, but I guess that not true now or maybe for versions before 2007?

Best Regards
Maura.


53   Randy ~ 27 June 2007

Thanks for the resources. These look really great.

We will be moving the “Sharepoint” direction for our intranet in the near future, so thank you for the resources.

You’ve done a wonderful job!

It appears that you have met the challenges that Sharepoint brings to the table. Modifying out-of-the box solutions is really a programmer’s bread and butter isn’t it? My congratulations!

Randy


54   Paige ~ 29 June 2007

I’m not alone!

What a relief to find another person facing the same task as I am. Cameron, you just made my day and thank you for the resources!

The Sharepoint navigation structure is indeed a horrendous design abomination at very least, and it seems the task of rectifying it has fallen to us handful of pioneers.

Fight the good fight.

Paige


55   Jon ~ 04 July 2007

I’ve just been tasked with skinning sharepoint. It would be great if you could answer Stephen Capp’s question as I’m also fighting with this issue and it would be a great help to know if this is possible or not as 2 days of research has failed to come up with any information that may shed light on how to do this.


56   Jon ~ 05 July 2007

After another day of research I have discovered that it is not possible to change the _layout type pages dramatically in an environment where subistes may require their own themeing.


57   Jeff Adams ~ 05 July 2007

@Maura
There is actually a new 2007 MS Office product called Sharepoint Designer that is similar to Frontpage but has integration features specifically for Sharepoint. It’s quite good actually just stick with code view.

@Stephen Capp and Jon
Some of the deep pages use the application.master template and not your customized master template. It is recommended that you not change the application.master directly because it will be updated my Microsoft on occasion. However, there is a way to redirect all requests to that template to one of your custom master templates.


58   Torrance R Miller ~ 05 July 2007

Given all of the graphics, MOSS 2007 is not as hard to customize as you are preaching. It looks like you made a masterpage… That isn’t really modifying any code is it? Did you actually develop anything here? It is hard to tell what you have done exactly. You changed MySites into a Project Workspace? Can you clear this up for me? Thanks.


59   Paul ~ 10 July 2007

Stephen: “So if you’re using master pages how did you address the pages that come from _layouts directory?”

I am not Cameron, but I’ll tell you how I worked around this.

I didn’t touch application.master, per the Very Scary Microsoft Commandment about not doing so. Instead, I modified my default.master to give my body tag an id (amongst other things.) Then in my CSS, I referenced body#mynewid for any default.master-based customizations while omitting that reference for any app.master-based pages.


60   Jeff Adams ~ 17 July 2007

@Paul
I think the point is that you want the application.master to look like your customized master page.

Doing it the way you suggest would leave many front-end accessible pages with a totally different look which may be disconcerting to users. Not to mention something clients will not like either.


61   Paul ~ 23 July 2007

Jeff, maybe I didn’t explain myself fully. The app.master pages actually are in line with the looks of the default.master pages; core.css defines everything within a generic body tag while custom.css defines everything within a body#myspecialid tag.

Only the default.master page - which I have full control over - uses the body#myspecialid styles.

Despite HTML structural differences between the two files, the looks are in sync (same header, sidebar, etc.)


62   Sean Fraser ~ 02 August 2007

Sorry. I didn’t read this when you - Originally - posted it. Little did I know that someday I would - Actually - work on a SharePoint site collection. One week for a master page is encouraging.


63   Stephen Capp ~ 06 August 2007

Hello all - I thought I would follow up with the progress I have made so far.

We have scrapped the idea of using Master Pages for any internal install of SharePoint. Too much effort for too little gain. We put in a “ticket” with Microsoft and they said that there is no supported method that they could recommend. They offered a couple of work arounds but there was no magic bullet. The solutions they offered were similar to others around the interweb.

Maybe in a future edition MS will have sorted this mess out but in the mean time I need something that works consistently so I’m sticking with CSS.

I link one stylesheet (custom.css) and import over-ride-calendar.css, over-ride-controls.css, over-ride-core.css, over-ride-datepicker.css and over-ride-portal.css. I believe that is how others are doing it as well. I strip out everything from all the style sheets and start customizing the CSS to get a “non sharepoint” look and feel. I use Firebug in FireFox to pick out the classes I need and then I cut and paste one class at a time from one CSS to the other and modify those classes as needed.

It’s time consuming and boring but it’s consistent and supported and I know it will not break with updates down the road.

Feel free to drop me a line if you have any new discoveries to add.


64   Andrew Wong ~ 30 August 2007

Hello,

You should check out our externally facing sharepoint site. www.sendtec.com. It is a fully integrated Sharepoint site. I believe one of a kind. The backend just uses a regular sharepoint out of the box template that pushes content the the publically faces site you see.




About

Authentic Boredom is the platitudinous web home of Cameron Moll, designer, author, and speaker. More…


Jobs
Come in, we're hiring

Full-time and freelance job opportunities. Post a job...

...view all jobs »


Recently

A selection of fine reading, available for a limited time only:


In Print

CSS Mastery CSS Mastery: Advanced Web Standard Solutions A solid round-up of indispensable CSS design techniques by Andy Budd, Simon Collison, and Cameron Moll.

Mobile Web Design Mobile Web Design A guide to publishing web content beyond the desktop. Tips, methodology, and resources. Now available.


Recommended

Letterpress Posters Letterpress Posters The unassuming beauty of a freshly letterpressed print.

Wicked Worn That Wicked Worn Look. Techniques for that worn, aged, distressed look.

Mister Retro Mister Retro Machine Wash Filters Turn the dial to “Instaworn” with these filters.

Blinksale Blinksale Dive in and enjoy shamelessly easy invoicing from Firewheel Design.

Basecamp Basecamp My preferred web app for internal and client project collaboration.


Speaking

HOW Conference HOW Conference Austin, June 24–27. Pentagram, Adobe, P&G, et al.

Web Design World Web Design World Seattle, July 20–22. Practical sessions on web design.

An Event Apart Stimulate Salt Lake City, September 2009. Entrepreneurship and design conference.


Feed Me
Articles: RSS
Linkage: RSS

Follow me: Twitter