We recently started an effort to provide a centralized and secure collaboration space for information sharing and collaboration across the enterprise using SharePoint 2007 and WSS.
The first phase of the project consists of a complete site redesign to provide the organization a consistent navigation and “Look and Feel” along with a consolidation of all existing SharePoint sites into a unified and secure SharePoint platform.
As part of the site redesign effort we investigated which approach would be most efficient for implementing the “Look and Feel” while also avoiding disrupting our existing WSS sites and users.
The two primary choices for customizing the look and feel of both MOSS 2007 and WSS sites we evaluated were using custom alternate CSS stylesheets or using SharePoint themes. These choices would not require making significant changes to the sites’ existing masterpages and templates. For our approach we decided to start with one of the existing SharePoint themes and customize it to match our branding.
What is a SharePoint theme?
SharePoint themes represent a collection of graphics and cascading style sheets that can modify how a Web site looks. Themes can be customized using SharePoint Designer or using the Visual Studio 2008 extensions for SharePoint.
Screenshots of a customized version of a corporate theme template:
|Home page||News template|
|Search page||Site settings|
Advantages of using SharePoint themes:
- The SharePoint site settings interface provides the ability for both site administrators and site owners to customize the look and feel of their site by selecting from a pre-defined list of available site themes.
- The site settings interface provides the ability to display a preview/screenshot of the selected theme before they choose to apply it to their site.
- Themes can be easily removed via the SharePoint site settings interface.
- Themes packaged and deployed as a site feature simplify deployment across a SharePoint farm for IT administrators.
- Developers can take advantage of the set of ten Visual Studio 2008 extensions for SharePoint projects containing design themes for SharePoint provided by Microsoft as a starting point for developing a custom theme.
Applying a site theme:
From Site Actions select Site Settings and then Modify All Site Settings. Under the Look and Feel section choose Themes.
You will find the selection of available themes to apply to your site.
Development of a custom site theme:
- Developers can install the set of ten Visual Studio 2008 extensions for SharePoint projects containing design themes for SharePoint provided by Microsoft as a starting point for developing a custom theme.
- You can download theme templates from: http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=0a87658f-20b8-4dcc-ad7a-09ad22641f3a
- Navigate to the installed theme folder (the default location is C:\Program Files\Microsoft\TenThemesForSharePoint)
- Open one of the Visual Studio theme solutions in Visual Studio 2008
- Modify the CSS classes directly in theme.css classes as needed.
- Drop in the necessary graphics/images into the projects local image directory.
- Build the project.
Source code for the customized version displayed above available by clicking the icon below.
Visual Studio 2008 Project files Download .zip
- Copy the Visual Studio project’s bin folder to your production server.
- Locate the setup.bat file in the debug folder.
- Open the setup.bat file in Notepad and modify the DefaultWebUrl and DefaultSiteUrl to point to the web application where you would like to install the theme.
- Save setup.bat and run as administrator.
- Navigate to a site and from the Site settings page select Site features, locate your theme and activate the feature.
- Open your portal site as Administrator and go to Site Actions>Site Settings>Modify All Site Settings. Under the Look and Feel Section, click on Site Theme and choose the newly installed theme.
Observations on developing and deploying themes using the Visual Studio 2008 extensions:
- The Visual Studio Extensions and associated theme templates are much less cumbersome than using alternate CSS style sheets IMO.
- Being able to simply activate and de-activate the theme as a feature for both existing MOSS 2007 sites and WSS sites is a huge plus.
- Although the ten default themes are OK as a start be prepared to make significant changes to the theme.css and providing overrides for core CSS styles as well. For example the corporate theme looks nice in the homepage screenshot but doesn’t provide sufficient white space for readability on publishing pages, list view toolbars, list item menus, and certain viewstyles required CSS overrides.
- Watch out when making changes to ms-vb and other core CSS styles that are referenced in a variety of related classes and can yield interesting results.
- Themes do not inherit from parent sites so for automating deployment I developed a feature staple and attached to the default site definitions where I needed to have the them activated by default.