Heather Solomon's Blog

SharePoint 2007 Branding

Article Categories
Post Categories


  Jump to: Follow speheather on Twitter Follow Heather Solomon on Facebook
Heather's SharePoint 2010 Blog is located at blog.sharepointexperience.com
Loading

One of the more powerful tools in user interface (UI) customization is cascading style sheets (CSS). CSS allows you to control the display of numerous items from one central location or central group of files.  Through a series of selectors and corresponding declarations, the display of nearly any item can be modified on screen.

CSS -  a quick lesson in components and concepts

Know CSS? Skip to the SharePoint stuff.

For sake of this article, let's quickly outline the parts of a style sheet.  A style sheet is a collection of statements (or 'rules'). The first part of the statement is a selector with an optional name and it is followed by a declaration.  The selector refers to what will be changed, and the declaration refers to how it will be changed.  You can extend the power of CSS by adding names via classes or IDs to the selectors to further refine and target modifications. Class is intended for general formatting across numerous instances while ID is meant for specific formatting for a single instance.  You can list both the selector and the class/ID in the statement, or you can list the class/ID alone to apply it to any HTML tag that uses that references that class/ID.

Parts of a Statement Example Effects...
Selector {Declaration} H1 {color: red} Any H1 tag used in the site (<H1>)
Selector.Class {Declaration} H1.Alert {color: red} Any H1 tag that uses the class name of Alert (<HI Class="Alert">)
-OR- -OR-  
.Class {Declaration} .Alert {color: red} Any tag that uses the class name of Alert (<XXX Class="Alert">)
Selector#ID {Declaration} H1#Alert {color: red} A H1 tag that uses the ID Alert (<HI ID="Alert">)
-OR- -OR-  
#ID {Declaration} #Alert {color: red} A tag that uses the ID Alert (<XXX ID="Alert">)

One CSS concept that is important to understand is inheritance. Page elements with or without CSS properties will inherit CSS properties of dominant tags higher in the hierarchy.  So a page element could be effected by not only the properties in it's corresponding statement, but also by properties in statements assigned to parent elements. For example, a table cell can be affected by a containing DIV tag, and the DIV tag could be affected by a containing BODY tag. This is an important concept to remember as you edit and work with CSS, an element may be mysteriously acting differently than you are coding or expecting, due to properties of a parent tag.

SharePoint and CSS

SharePoint utilizes CSS quite heavily, and it is both a curse and a blessing.  Since nearly all of the SharePoint 2003 UI is hard coded in the site definitions, CSS provides one of the best ways to update the UI.  But the SharePoint CSS is also pretty unruly and can be quite daunting at first glance. Let's go ahead and get the numbers out on the table.

For a SharePoint 2003 Portal and WSS install, there are 7 separate style sheets (excluding themes), totaling to 7,403 lines of code and 1,227 style statements.   Ouch! Luckily some of that we can slash off pretty quick. Four of the seven style sheets I have yet to ever have to edit to affect a site (Menu.css, OWSmac.css, OWSnocr.css, Paystub.css).  The other three are pretty easy:

  • SPS.css:  SharePoint 2003 Portal style sheet
  • OWS.css: SharePoint 2003 Portal style sheet AND Windows SharePoint Services style sheet
  • OWSPERS.css: SharePoint 2003 Portal Personal Sites (My Sites) style sheet. 
    OWSPERS.css is a combination of a copy of SPS.css and OWS.css with a few things tweaked here and there.  You can condense the style statements in OWSPERS.css to something more manageable and less repetitive.  I tell you how here.

SPS.css and OWS.css have a few quirks. There are style selectors that are repeated in each.  In some cases, the duplicate styles are not connected and control WSS and Portal separately, but in other cases the two are connected and what you have in one can possibly override the other, making for a confusing and frustrating situation.   Additionally, the styles may share the same selector, but list different properties in the declaration.

When a portal page is rendered, it pulls in several style sheets, in this order 1) OWS.css; 2) MENU.css; 3) SPS.css.

When a WSS site is rendered, it pulls in the OWS.css style sheet and then the theme style sheet if a theme has been applied to a site.

The order of which the style sheets are called in the code is important.  The way CSS works, generally the last property specified in a declaration for a selector is the property that is used for rendering the element.  So if the same selector is in both SPS.css and OWS.css, a portal will use the declaration listed in SPS.css for the element because SPS.css is called after OWS.css in the code.  This is the basis behind how themes work as well.  In a theme, you only need to include updated declarations in the theme style sheet, and when the site is rendered the new declarations in the theme style sheet will override anything set in OWS.css.

Style Sheet Code Result in Portal
Code in OWS.css:
.ms-sample {color: red}
Code in SPS.css:
.ms-sample {color: green}
<XXX Class="ms-sample">Text will be GREEN.</>

When it comes to customization, it can get a little trickier than that.  When you want to replace properties used in a declaration with your own, you must override the declarations in the original code unless you want to inherit that property.

Style Sheet Code Result in Site
Code in OWS.css:
.ms-sample {color: red; font-size: 3.5em}
Code in custom CSS:
.ms-sample {color: green}
<XXX Class="ms-sample">Text will be GREEN, with a font size of 3.5em.</>
Code in OWS.css:
.ms-sample {color: red; font-size: 3.5em}
Code in custom CSS:
.ms-sample {color: green; font-size: 2.5em}
<XXX Class="ms-sample">Text will be GREEN, with a font size of 2.5em.</>

Now that we are familiar with the SharePoint style sheets and the basics with editing styles, we can look at all the different ways to change the CSS for SharePoint. Once you have selected a method and setup the custom style sheet, you can start changing styles and seeing the effects on your SharePoint site(s).

 

Methods for CSS Replacement

The following list is some methods for updating or specifying a custom style sheet for a SharePoint site.  Several of these methods reference copying the custom style sheet to an accessible location for the web server.  One common way to handle this is to store the style sheet in the \60 directory with the other files, but in an organized custom folder(s). For example, the custom style sheet could be stored in the following directory on the web server:
Local Drive\Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\LAYOUTS\1033\STYLES\CustomFolder

» Specify an Alternate CSS in Portal settings (Portals only)
» Edit the CSS files on the web server
» Specify a custom style sheet in the existing style sheet
» Specify a custom style sheet in the site definition
» Change the directory in IIS
» Themes (WSS Only)
» Individual page only styles using a Content Editor Web Part


Specify an Alternate CSS in Portal settings

Portal/WSS:  Portal
Sites affected: Individual portal

Probably one of the easiest and least evasive ways to specify your own styles is to specify a custom style sheet in the portal site settings.

  1. Copy the custom style sheet to the web server or other accessible location for the portal site.
  2. Go to the Portal Site Settings (http://site/_layouts/1033/default.aspx)
  3. Under General Settings, select Change portal site properties and SharePoint site creation settings.
  4. The fourth section at the bottom is Custom Cascading Style Sheet. In the input box specify the custom style sheet from step 1.
  5. Select OK.


Edit the CSS files on the web server

Portal/WSS:  Both
Sites affected: Entire environment

Editing the style sheets directly used by SharePoint requires zero duplication of code and fast results, but can cause maintenance issues further down the road.  With any patch or upgrade you run the risk of losing your changes.  Your changes would have to be reapplied as opposed to other approaches of just resynching up pointers to custom style sheets.  The other hindrance is that the SharePoint style sheets are very long and the number of styles you will actually end up needing to edit will pale in comparison to the final statement count in the files. So you will have to deal with a lot of finding of statements and wading through untouched statements. This is not the cleanest way to specify new styles.

  1. On the SharePoint web server, navigate to this directory:
    Local Drive\Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\LAYOUTS\1033\STYLES
  2. Copy the style sheets that will be edited to a safe backup location.
  3. Edit the style sheet(s).


Specify a custom style sheet in the existing style sheet

Portal/WSS:  Both
Sites affected: Entire environment

A step up from editing the default SharePoint style sheets directly is to create a custom style sheet and call that style sheet in the default style sheet.  This way, your changes remain intact in one file and can easily be readded to the default style sheet if any patches or upgrades override your changes. Through declaration overrides (rule that the last declaration will override a previous declaration for the same named element) your style changes will be applied to the site. 

  1. On the SharePoint web server, navigate to this directory:
    Local Drive\Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\LAYOUTS\1033\STYLES
  2. For portal, open SPS.css, for WSS sites, open OWS.css.
  3. At the bottom of the file under all statements, add an import tag:
    @import url(YourStyles.css);
  4. Create a style sheet in the same STYLES directory, or in a custom directory.  Update the import tag accordingly.
  5. Copy and paste statements from the default style sheet(s) to the custom file and override declarations according to needs. 


Specify a custom style sheet in the site definition

Portal/WSS:  Both
Sites affected: Site definition specific

Each site definition file has hard coded links to the style sheet files in the HTML header.  An additional style sheet can be added to the header or an existing link reference can be modified to pull the custom style sheet(s).  This is an effective way to isolate the style changes to just one site definition or it can be used to apply styles in a custom site definition.  This process can become tedious because there are a lot of files in a site definition and most of them will need to be updated to include the new link tag.  

  1. Copy the custom style sheet to the web server or other accessible location for the site.
  2. On the SharePoint web server, navigate to this directory:
    Local Drive\Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\1033\SiteDefinition
  3. Copy the files that will be edited to a safe backup location.
  4. In the ASPX files, locate the HTML header and LINK tags:
    <link rel="stylesheet" type="text/css" href="/_layouts/<%=System.Threading.Thread.CurrentThread.CurrentUICulture.LCID%>/styles/StyleSheet.css">
  5. Update or add an additional LINK tag to include the custom style sheet.

Additional Site Definition Resources:


Change the directory in Internet Information Server (IIS)

Portal/WSS:  Both
Sites affected: Single site, regardless of environment setup

For some sites and environments, it may be possible to control which style sheets are used using  IIS on a site by site basis.  If the site has a Web Site entry in IIS, a copy of the LAYOUTS folder can be created in another location and the style sheets can be updated in that copy, thus affecting only the single site. The style sheet can be directly edited to reflect changes or to pull in a custom style sheet.  The CSS changes will be limited to the single site (portal, WSS site or top level site in a site collection).  This is an effective way to deploy multiple interfaces to several sites that share the same web server.

  1. Navigate to this directory on the SharePoint Web Server:
    Local Drive\Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE
  2. Copy the LAYOUTS folder.
  3. Navigate to the Inetpub folder on the web server.  If the site has a wwwroot folder set up, paste LAYOUTS in that folder. Otherwise, create a site specific folder (based on the name or purpose of the site) and paste LAYOUTS in the new folder.
  4. Open IIS.  In IIS, expand the Computer Name, Web Sites, and then the web site directory for the site.
  5. Right click _layouts and select Properties.
  6. On the Virtual Directory tab, find the Local Path field and Browse button. The path will be set to Local Drive:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\60\template\layouts.
  7. Select the Browse button and navigate to Local Drive:\Inetpub\wwwroot_SiteName. Select the LAYOUTS folder and select OK.
  8. Select OK at the bottom of the _layouts Properties dialog box.  Close IIS.
  9. Edit the style sheet(s) in the new Local Drive:\Inetpub\wwwroot_SiteName\LAYOUTS folder.


Themes

Portal/WSS:  WSS
Sites affected: Single WSS site

WSS sites have an user interface alteration feature called Themes which is a handy and easy way to apply updated styles (and images) to a single WSS site.  Theme application is a manual process and is handled through the site settings. A theme contains style statements from the default style sheets with overriding declarations, and the WSS file calls the theme CSS file after the default OWS.CSS file, resulting in an updated interface.   SharePoint ships with several themes, making this process even easier since an existing theme can be updated with the changes or used as a template for a new theme.

  1. Navigate to this directory on the SharePoint Web Server:
    Local Drive\Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\THEMES
    All available themes are listed in the THEMES directory. Either edit an existing theme or create a new one.
  2. Edit the style sheet in the individual theme directory, THEME.CSS.
  3. Go the the WSS Site Settings (site.com/_layouts/1033/settings.aspx) and select Apply theme to site under Customization. Select the theme name and select Apply.
  4. The site will reload with the theme applied.

NOTE: If changes are made to the CSS file in the theme, the theme must be reapplied to see the changes on the site.  This involves going through the Apply theme to site screen and assigning the site to another theme, selecting Apply, then repeating the steps to change the theme back to the desired theme. For theme development this can become very tedious.  To work around this issue, copy the styles to the bottom of the OWS.CSS file on a development environment so changes will instantly be shown on the site.  Once the theme styles are completed, move the style statements to the theme CSS file and apply it to the site.

--- Coming soon... Instructions on how to add a theme to WSS. ---


Individual page only styles using a Content Editor Web Part

Portal/WSS:  Both
Sites affected: Single pages in a portal or WSS site

An out of the box SharePoint web part can be used to apply style changes to singular SharePoint web pages. The Content Editor Web Part (CEWP) allows for HTML code to be added to the page.  The CEWP properties allow hiding the web part from view, so essentially a hidden CEWP containing style statements can be added to a page to override declarations.

  1. Identify the style statements that need editing or create the custom styles for the page.
  2. Navigate to the page of choice, and add a Content Editor Web Part to the page from the Add Web Parts pane.
  3. In the Content Editor tool pane, under Layout uncheck the Visible on Page checkbox. Select Apply.
  4. Select the Source Editor button and in the source dialog paste in the style statements from step 1.  Make any modifications and select Save. Select OK in the Content Editor tool pane. 
    -OR-
    Store the styles in an HTML file in a central location and use the Content Link feature to include the HTML file on multiple pages, allowing you to keep your source in one central location.

The new styles will be applied to the page each time the page loads.  Depending on the speed of the computer, there may be a slight flicker as the first styles are loaded and then the overriding styles are applied.

 

posted on Wednesday, April 26, 2006 7:45 PM

Copyright © 2005-2011. Heather Solomon.
Site design by Heather Solomon. Yes it is dated and purple. If I changed it, no one would recognize it! Check out my new home at sharepointexperience.com.

Blog Stats:
Posts - 390
Stories - 39
Comments - 1795
Trackbacks - 183
Follow speheather on Twitter

Follow Heather Solomon on Facebook

Branding/UI/UX Courses for SharePoint taught by Heather Solomon

VIEW COURSE SCHEDULE