Branding SharePoint Portal – don’t let the numbers scare you

Andy May posted some quick notes about asking your clients if they really want to customize the UI for portal, his points being the large number of elements in the style sheet and the large number of images.

Being a SharePoint UI Diva, I have to disagree.  I am a big supporter of branding your SharePoint site, and that doesn’t necessarily mean editing the gazillion site definition files.  At its core, portal has a solid, well accepted layout.  Header at the top, main nav under the header, supporting nav to the left and content pane to the right.  Its solid and it works.   By making some changes to the CSS and to a few images you can brand the Microsoft right out of SharePoint.

Let’s review the hurdles listed:

OWS.CSS has over 300 elements in the style sheet
SPS.CSS has over 250 elements in the style sheet

Hey don’t forget OWSPERS.css, MENU.css, OWSMAC.css and OWSNOCR.css.  Yeah there are a lot of stylesheets and elements, but you don’t have to edit each one to brand a site.  Some of the elements are empty, others affect stuff you don’t really need to change, many are duplicates in the two main stylesheets, and even more can be mass updated with a global search and replace of hexidecimal colors.

The main thing I see is people asking what styles run what on the page.  People tend to forget about the trusty View Source.  Plus there are gads of tools available now to let you see the DOM using your browser. It is easy to figure out the styles used for stuff in SharePoint and to update accordingly.

So yes, there are over 550 elements, but you can brand a site using existing styles and do it using under a 100. A typical large custom application could easily reach 100 styles, so don’t let SharePoint daunt you with its bloated style sheets.

There are over 1200 images in the standard build
Yes but how many to run the real UI?  There are a ton of little icons for all the actions and document types… little bitty checkmarks and delete marks and icons for assorted purposes.  The majority of the images in SharePoint can be left alone, and some of them I have yet to even see used in the application.  For example there are 4 files that is an icon of a cartoon dog.  6 other files are obviously for some sample site.  45 images are for the theme previews….  you get my drift.  You don’t have to edit 1200 images to brand a site.  It is more like 65 or less, and that is including the icons that appear in the upper left corner of each page (37 of those).


So 30 something images and 100 or so styles later you can rebrand SharePoint.  That easily would be what you would have to do for a custom application or site.

Customers love customization.  Everyone wants their logos, their colors, and their feel.  It is time consuming to build web parts, custom lists and to update the site definition files, but you can brand a SharePoint site relatively easily.

UPDATE: E. Shupps posted a nice summary of common branding and design options for customizing SharePoint.