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.

8 thoughts on “Branding SharePoint Portal – don’t let the numbers scare you”

  1. Spot on! Full-bore customization IS a daunting task but rebranding can be done in just a few days. With practice, you can create CSS templates that will allow you to completely rebrand a portal in a few hours; once you’ve identified the key references in OWS.CSS and SPS.CSS (there are about 150 or so), then it’s just a matter of search-and-replace.

    Let not the fear of customization deter you!

  2. Personally I think the misconception of what "branding" actually is, is the major hurdle.

    Branding takes place long before a portal implementation so generally all you want to accomplish is either a) a common layout b) a common colour scheme/theme or c) both.

    In any event 90% of this can be accomplished by a single site definition that draws in a custom theme.

    I think initially Sharepoint customization can be intimidating but you quickly realise that you accomplish a lot with relatively low effort.

    That is of course "after" you’ve smacked your head on the desk a few dozen times during the R and D phase. 🙂

  3. Personally I can "rebrand" a portal or WSS site in under an hour. Why? because I leave the layouts and everything the f*%$ alone and create a new stylesheet with only the styles I override. Seriously only takes an hour to come up with a completly new look and about 40 elements. Themes for WSS take a little longer, but they’re pretty straight forward. What really bogs you down is when they want a banner image in a WSS site, or they don’t like the width of the zones. Then you end up mucking about in aspx pages and doing all kinds of crazy tricks.

  4. How about creating your own templates with your own stylesheets, which could be edited copies of core CSS?

  5. This would be a good time to chime in on the need for a week thought out ‘layout/structure’ overall.

    If all the presentation, including layout was controlled via CSS/DIV’s customization would about 150% more effective not to mention less painful.

    Don’t get me wrong tables ‘can’ be fine, they can defiantely be much easier but 90% of the time when you are dealing with layout, CSS is more flexible to change, not to mention much more lightweight.

    If you could switch around a few floats to swap the top bar, side bar, content area you could change the layout with ease.

    If things like the sitelogo.gif were background-image:URL(); you could swap them out and manipulate them (per occurance) versus hacks, or worse global replacements.

    I guess the best we can do at this point is preach about things that should be done to better the product and cross our fingers.

    If Microsoft is serious about making an investment in this product then I think it’s inevitable that they make the switch to a more standards compliant layout at some point. Especially when IE catches up in that race. 🙂

  6. Poor design by Microsoft – I’ve never seen such a tangled mess in my life.

    SP is a major step backwards – I’m not impressed 🙁

  7. Yet another horrifying bit of the SharePoint quagmire. I’d like to see some actual working examples in someone’s blog instead of idle chit-chat like "yeah I can do the whole thing in five minutes".
    Even Dan MacPhearson’s "Branding SharePoint.." article on MSDN doesn’t work properly.

  8. I agree Steve. I just finished a 5 day training class on SPD in hopes that the mystery of the custom design and CSS mess would be solved for me, but alas, it seems there is no solution. It remains a convoluted mess. Like finding one needle in many hay stacks! NOT impressed AT ALL. Funny thing is, this SW is supposed to make it easier for non-coders. That may be, but it makes it harder for designers. ARRRGGGGG

Comments are closed.