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.
- Copy the custom style sheet to the web server or other accessible
location for the portal site.
- Go to the Portal Site Settings (http://site/_layouts/1033/default.aspx)
- Under General Settings, select Change portal site properties
and SharePoint site creation settings.
- The fourth section at the bottom is Custom Cascading Style Sheet.
In the input box specify the custom style sheet from step 1.
- 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.
- 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
- Copy the style sheets that will be edited to a safe backup location.
- 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.
- 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
- For portal, open SPS.css, for WSS sites, open OWS.css.
- At the bottom of the file under all statements, add an import tag:
@import url(YourStyles.css);
- Create a style sheet in the same STYLES directory, or in a custom
directory. Update the import tag accordingly.
- 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.
- Copy the custom style sheet to the web server or other accessible
location for the site.
- On the SharePoint web server, navigate to this directory:
Local Drive\Program Files\Common Files\Microsoft Shared\web server
extensions\60\TEMPLATE\1033\SiteDefinition
- Copy the files that will be edited to a safe backup location.
- 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">
- 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.
- Navigate to this directory on the SharePoint Web Server:
Local Drive\Program Files\Common Files\Microsoft Shared\web server
extensions\60\TEMPLATE
- Copy the LAYOUTS folder.
- 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.
- Open IIS. In IIS, expand the Computer Name, Web
Sites, and then the web site directory for the site.
- Right click _layouts and select Properties.
- 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.
- Select the Browse button and navigate to
Local Drive:\Inetpub\wwwroot_SiteName. Select the
LAYOUTS folder and select OK.
- Select OK at the bottom of the _layouts Properties dialog
box. Close IIS.
- 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.
- 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.
- Edit the style sheet in the individual theme directory, THEME.CSS.
- 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.
- 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.
- Identify the style statements that need editing or create the custom
styles for the page.
- Navigate to the page of choice, and add a Content Editor Web Part
to the page from the Add Web Parts pane.
- In the Content Editor tool pane, under Layout uncheck the
Visible on Page checkbox. Select Apply.
- 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.