Using Default SharePoint 2010 CSS Files (Wrox)

Summary: Learn how to brand a Microsoft SharePoint 2010 site, and how to use SharePoint CSS web server controls to enhance and customize the user interface.

Wrox logo

Wrox SharePoint Books

Applies to: Business Connectivity Services | Open XML | SharePoint Designer 2010 | SharePoint Foundation 2010 | SharePoint Online | SharePoint Server 2010 | Visual Studio

Author: Johnny Harbieh

Editors: WROX Tech Editors for SharePoint 2010 Articles

Contents

  • Introduction to Using Default SharePoint 2010 CSS Files

  • Prerequisites

  • SharePoint Branding Activities

  • Locating SharePoint Branding Artifacts

  • CSS Web Controls in SharePoint

  • Applying Custom Styles to a SharePoint Site

  • What to Consider When you Apply Custom Style Sheets to SharePoint

  • Deployment Considerations

  • About the Author

  • Additional Resources

Introduction to Using Default SharePoint 2010 CSS Files

Microsoft SharePoint 2010 has many ways to customize its user interface. Site owners can configure an alternative CSS file, apply a custom theme, or modify an existing one. In addition to what you can do in the browser, you can configure SharePoint to enable customization tools, such as Microsoft SharePoint Designer 2010, to customize and override default appearance and behavior.

Note

SharePoint is built on top of ASP.NET technology, which provides the underlying infrastructure and resources such as ASP.NET pipeline, web server controls, layout pages, content pages, and master pages. Together, this provides the structure and the platform on which to build and brand your SharePoint site.

Prerequisites

Table 1 lists the items that you need before you can apply all the information in this article.

Table 1. Prerequisites

Item

Description

SharePoint Server 2010 or SharePoint Foundation 2010.

Access to a SharePoint development environment is recommended. Follow the steps outlined in Setting Up the Development Environment for SharePoint 2010 on Windows Vista, Windows 7, and Windows Server 2008 to set up your own development environment.

General SharePoint development knowledge. For more information, see the Microsoft SharePoint 2010 SDK.

General SharePoint development knowledge is required to work with master pages, web server controls, HTML, and CSS and XSL files.

Microsoft Visual Studio 2010 or SharePoint Designer.

These provide the tools that you must have to modify SharePoint sites and pages.

SharePoint Branding Activities

SharePoint branding can include one or more of the following activities:

  • Locating and reviewing style sheets (CSS) and XSL files.

  • Modifying and updating CSS files.

  • Adding new CSS classes, images, and colors.

  • Creating new themes or modifying existing themes.

  • Removing, hiding, or commenting out existing CSS classes.

  • Hiding the new ribbon or changing the background colors of windows.

  • Overriding some rich editor control styles.

The following sections show how to find and use the default branding artifacts, tools, and resources.

Locating SharePoint Branding Artifacts

SharePoint branding-related artifacts are files and resources that are installed and deployed with SharePoint, or are added later by site owners and developers.

This section shows how to locate and manipulate the default style sheets and master pages in SharePoint.

CSS Files (.css)

To change the appearance of your SharePoint site, locate the CSS files that SharePoint uses by default. Table 2 lists some of the core CSS files that SharePoint uses.

Table 2. Core SharePoint style sheets

File Name

Location (C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14)

Search.css

TEMPLATE\LAYOUTS\{Locale-ID}\STYLES\Themable\Search.css

Wiki.css

TEMPLATE\LAYOUTS\{Locale-ID}\STYLES\Themable\Wiki.css

Corev4.css

TEMPLATE\LAYOUTS\{Locale-ID}\STYLES\Themable\Corev4.css

Controls.css

/Style Library/{Language-Culture}/Themable/Core Styles/Controls.css

Page-Layouts-21.css

/Style Library/{Language-Culture}/Themable/Core Styles/Page-Layouts-21.css

Nightandday.css

/Style Library/{Language-Culture}/Themable/Core Styles/Nighandday.css

{Language-Culture} is a placeholder for language and culture; for example, en-us. The {Locale-ID} is another placeholder for locale ID; for example, US English is 1033.

Tip

For more information, see Locale IDs assigned by Microsoft.

Some style sheets in Table 2 are located on the file system; others are located in the SharePoint Styles library. Files in the Styles library are stored in the content database. If you want to modify these files, you must do one of the following:

  • Download the files from the Styles library, modify them locally on your computer, and then upload them.

  • Use SharePoint Designer to open the site and then modify the files there.

Microsoft recommends that you back up files while you work, and store them in a secure-code repository.

Note

Do not modify the files directly. Instead, apply overrides, or create new files that override the CSS classes that are provided in those files.

Internet Explorer has tools that enable you to view the CSS classes that are used on SharePoint pages; for example, the IE Developer Toolbar.

Figure 1. IE Developer Toolbar

IE Developer Toolbar

Figure 1 shows links to two style sheets that are used on the team site, Wiki.css and Corev4.css. Both CSS files are located on the file system.

Table 3 lists some of the classes that are frequently used in SharePoint. These classes provide the base selectors and default behavior.

Table 3. Common CSS classes in SharePoint

Class

Description

File Name

V4master

Global HTML BODY element

Corev4.css

S4-pr

s4-ribbonrowhidetitle

ms-cui-ribbon

ms-cuiribbonTopBars

ms-cui-topBar2

Ribbon

Corev4.css

S4-title

S4-lp

Title area

Corev4.css

S4-tn

Global navigation

Corev4.css

Ms-quickLaunch

Quick-launch navigation

Corev4.css

Ms-dlgContent

Ms-dlgOverlay

Modal dialog

Corev4.css

 

Use the Internet Explorer Developer Toolbar to study these classes and their properties, as shown in Figure 2.

 

Figure 2. Discover CSS classes with IE Developer Toolbar

Discover CSS classes with IE Developer Toolbar

XSL Files (.xsl)

By default, SharePoint installs some XSL files that are used by the RSS Reader Web Part, Summary Links Web Part, TOC Web Part, and Content by Query Web Part (CQWP), which all require result sets to be formatted into readable HTML. You can find XSL style sheets, together with several XSL templates, in the Styles library, as shown in Figure 3.

Figure 3. XSL style sheets and templates

XSL style sheets and templates

Tip

For more information about how to customize these XSL files, see Customize XSL for Content By Query Web Part.

CSS Web Controls in SharePoint

Web server controls are responsible for managing and rendering CSS file links and style sheets. By default, the web server controls are located in the SharePoint master pages. To find master pages, look in the Master Page and Page Layout Gallery, or, in SharePoint Foundation, in the master pages gallery. The relative path to the gallery is /_catalogs/masterpage/Forms/AllItems.aspx.

Locating the Master Page

To examine the CSS web server controls in SharePoint, you must get copy of the master page that is used on the site. But to download a copy of the master page for your site, you have to know which master page your site uses.

Use one or more of the following to determine what master page your site uses:

  • On a SharePoint Server 2010 site where Publishing Features are enabled and activated, access the Site Master Page Settings page via Site Actions, Site, Settings. Then, under the Look and Feel section, click the Master Page link.

  • Instead of using the menu to locate the Site Master Page Settings page, append the following URL snippet to the end of the server address for your site: /_layouts/ChangeSiteMasterPage.aspx; for example, https://contoso.com/\_ layouts/ChangeSiteMasterPage.aspx

  • On a SharePoint Foundation site, you can use Windows PowerShell to determine what master page the site uses, as shown in Figure 4. The following is an example script.

    $web = get-spweb("https://contoso.com");$web.masterurl
    

    Tip

    For more information, see Windows PowerShell and SharePoint.

Figure 4. v4.master on a SharePoint team site

v4.master on a SharePoint team site

Table 4 lists all the web server controls that are related to CSS and that are available in SharePoint Server. You can find these controls in the Microsoft.SharePoint.WebControls namespace, which is part of the Microsoft.SharePoint.dll assembly.

Table 4. CSS web server controls in SharePoint 2010

Control

Description

Find the Control in . . .

CSSLink

<SharePoint:CssLink runat="server" Version="4"/>

Master Pages

Theme

<SharePoint:Theme runat="server"/>

Master Pages

CSSRegistration

<SharePoint:CssRegistration Name="minimalv4.css" runat="server" />

Master Pages, Page Layouts

The following sections describe each control that is listed in Table 4, and summarizes the benefits of each.

The CSSLink web control is in SharePoint master pages and is responsible for rendering the HTML <LINK> element. The CSSLink control works with the CSSRegistration controls. If there are CSSRegistration controls on the page, the CSSLink control registers and renders the additional CSS file references that the registration control makes.

The CSSLink control has the following members:

  • UIVersion (optional) — Lets site owners change the look and feel of an upgraded or migrated SharePoint site. Enables site preview in the SharePoint user interface or the Microsoft Office SharePoint Server (MOSS) 2007 user interface. Set the value to 4 for SharePoint and set it to 3 for MOSS 2007 sites.

  • Version (optional) — Overrides the control version of the SPControl class.

  • Alternate (optional) — Flags whether the core CSS (Core.css or Corev4.css) is rendered with other CSS file references, or an alternative CSS is rendered. The default value is False, which specifies that the core css (core.css or corev4.css) file is rendered.

  • DefaultUrl (optional) — Sets or gets the default URL that is used for the CSS file.

    The following example shows how this control might render.

    <link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themable/search.css?rev=Uoc0fsLIo87aYwT%2FGX5UPw%3D%3D"/>
    <link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themable/wiki.css?rev=9pXM9jgtUVYAHk21JOAbIw%3D%3D"/>
    <link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themable/corev4.css?rev=iIikGkMuXBs8CWzKDAyjsQ%3D%3D"/>
    

The CSSLink control adds a ?rev= query string parameter to the file reference in order to control browser caching and to force the browser to grab a new copy of the file.

The CSSLink control is also responsible for the behaviors described in the following section.

CSSRegistration

The CSSRegistration web control is used with the CSSLink control to register CSS files so that they can be rendered on the page. Register CSS files by relative or static URL.

The CSSRegistration control has the following members:

  • Name (required) — The file name to register. If the name is not supplied, SharePoint throws the error shown in Figure 5. The value of the Name property should be a file name or a URL. If a file name is used, the CSS file must exist in the LAYOUTS Style folder.

    The following example shows how to use the custom.css file that was referenced above and that was deployed to the Styles folder (C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\{Locale-ID}\STYLES).

    <SharePoint:CssRegistration runat="server" Name="custom.css" />
    

    The following example shows how the CSSLink control renders the custom.css registration.

    <link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/custom.css?rev=pFayZ3XaoWhaMymtxOLHNA%3D%3D"/>
    

    In addition to referencing a file that is located in the LAYOUTS\{Locale ID}\Styles directory, you can register a file by using a URL. Specify a single URL in the Name property by using tokens. Some well-known URL tokens are: ~site, ~sitecollection, and ~language. Use these tokens together with an expression builder, such as SPUrl. The ~language token maps to a language-culture string, such as en-us.

    Adding an entry similar to the following example…

    <SharePoint:CssRegistration Name="<%$ SPUrl:~sitecollection/Style Library/~language/Custom/2ndcustom.css %>" runat="server" />
    

    …generates the following HTML, as shown in Figure 5.

    <link rel="stylesheet" type="text/css" href="/Style%20Library/en-US/Custom/2ndcustom.css"/>
    

Figure 5. SharePoint page error

SharePoint page error

  • After (optional) — Specifies the rendering order of the CSS file that you are registering. For example, if you want to render a custom style sheet that is named custom.css after core4.css, you use the following code to configure the registration control.

    <SharePoint:CssRegistration Name="<%$ SPUrl:~sitecollection/Style Library/~language/Custom/2ndcustom.css %>" runat="server" After="core4.css" />
    

    Doing this forces the CSSLink web control to render your custom file after the core4.css file link.

    <link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themable/corev4.css?rev=iIikGkMuXBs8CWzKDAyjsQ%3D%3D"/>
    <link rel="stylesheet" type="text/css" href="/Style%20Library/en-US/Custom/2ndcustom.css"/>
    

    Note

    You can use the expression builder SPUrl only on SharePoint Server sites; it is not available in SharePoint Foundation.

  • EnableCSSTheming — Flags whether you want your style sheets to be themable, which means that they can be applied as part of customized SharePoint themes.

    • Set the EnableCSSTheming property of the CSSRegistration control to true.

    • Add theming comments to your CSS style classes. To see some examples, examine the Themable directory that is installed with SharePoint (C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\{Locale-ID}\STYLES\Themable).

      The following example shows the ms-toolbar CSS class in the Themable Corev4.css. If you apply a theme, every time that the ms-toolbar class is used, the theme replaces the color #0072BC with the Hyperlink theme color that is defined in the theme itself.

      .ms-toolbar{
      font-family:verdana;
      font-size:8pt;
      text-decoration:none;
      /* [ReplaceColor(themeColor:"Hyperlink")] */ color:#0072BC;
      }
      
  • ConditionalExpression — Used to specify whether to apply this style sheet for a specific browser version. For example, a value of IE 9.0 specifies that the registration is applied for Internet Explorer version 9.0. The CSSLink control detects the value.

Theme

The Theme web server control applies a theme to a SharePoint site. There are several tools available that you can use to create themes; for example Theme Builder on Microsoft Connect. After you create a theme (.thmx files), you upload it to the Themes gallery, which is located on the Settings page (/_catalogs/theme/Forms/AllItems.aspx). To apply a theme, access the Site Theme page (/_layouts/themeweb.aspx).

The following is an example.

<link rel="stylesheet" type="text/css" href="/_catalogs/theme/Themed/54E2D43/search-7E1AFF02.css?ctag=1"/>
<link rel="stylesheet" type="text/css" href="/_catalogs/theme/Themed/54E2D43/wiki-ECF524AA.css?ctag=1"/>
<link rel="stylesheet" type="text/css" href="/_catalogs/theme/Themed/54E2D43/corev4-8A0ABD2F.css?ctag=1"/>

When you apply a theme, SharePoint creates a new theme folder that includes all CSS and image files that are required to render the theme. The new theme folder does not appear in Site Settings or in View All Content. By using SharePoint Designer, you can view theme files, as shown in Figure 6.

Figure 6. SharePoint themes

SharePoint themes

Applying Custom Styles to a SharePoint Site

After you create a CSS file that has the overrides and styles you want, you are ready to implement it.

First, to apply a custom style sheet to your SharePoint site, decide where to place the file and how to apply it. You can deploy your style sheet to the SharePoint file system — for example, the Layouts directory (C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS) — or you can save it on your SharePoint site in the Styles Library. Alternatively, you can host the style sheet somewhere else and reference it in SharePoint — for example, on a media web server. You can see that many variations are possible. A recommended best practice is that you store the file in a location where you can manage its versions and where you can recover it easily. If access to SharePoint server is prohibited in your organization, or you do not have access to Visual Studio or any automated deployment process, it is better to store your CSS files in the Styles library. It is more accessible that way. Style sheets in the Styles library can be versioned and accessed by using SharePoint Designer, and by using the SharePoint Asset Picker through a web browser.

Options for applying a custom style sheet

Use one of the following methods to apply your custom style sheet to your SharePoint site.

Alternate CSS URL

The Alternate CSS URL is a property of the Web object in the SPWeb and PublishingWeb classes. You can set this property through the user interface via the Site Master Page Settings page or with Windows PowerShell. Child sites can inherit the settings and your styles can propagate downward. To use this option, follow these steps:

  1. Upload a custom CSS file to the Style Library.

  2. To apply the style sheet, click Site Actions>Site Settings, and then under the Look and Feel group, click Master Page.

  3. In the Alternate CSS URL section, select the Specify a CSS file radio button, click Browse, and then locate your custom style sheet.

  4. Click OK, and then click OK again to save the setting, as shown in Figure 7.

    Figure 7. Alternate CSS setting

    Alternate CSS setting

    Alternate CSS URLs are applied to top-level site collections, and they require the publishing features to be activated before you can configure them on that site. Subsites that you create underneath require the publishing features to be activated also. Alternate CSS URL can also be supplied as part of the project element in the onet.xml file of the site definition. The onet.xml file is installed when SharePoint is installed and requires that you have access to the server.

Windows PowerShell

To use Windows PowerShell from the SharePoint server to apply a custom style sheet, do the following:

  1. Click Start>All Programs>Microsoft SharePoint 2010 Products.

  2. Right-click SharePoint 2010 Management Shell, and then choose Run As Administrator.

  3. Type the following script to apply a custom CSS file to your SharePoint site.

    $spweb = get-spweb("https://contoso.com");$spweb.alternatecssurl = "/Style Library/en-us/CustomFolder/custom.css";$spweb.update();
    

What to Consider When you Apply Custom Style Sheets to SharePoint

The preceding section discussed several ways to help you brand SharePoint sites. You can also use the following to apply custom styles:

  • Static HTML LINK elements. For example, <link rel="stylesheet" type="text/css" href="/Style%20Library/en-US/Custom/2ndcustom.css"/>. This is not generally recommended because it is static and the designer manages it manually. SharePoint does not treat the static HTML LINK element in any special way.

  • Inline styles on master pages or page layouts.

  • CSS markups and JavaScripts. You can use the Content Editor Web Part to insert CSS markup and JavaScript onto the page. Page authors or designers can use Content Editor Web Parts to add HTML markup on the page. For example, you could add a rotating image or format specific dates on a calendar.

    Tip

    For more information about how to use this Web Part, see Using the Content Editor Web Part.

  • Custom web server controls that require code behind. Ultimately, custom controls give you more control over what the browser renders.

  • Delegate controls. SharePoint uses several delegate controls to insert custom client-side and server-side code in its pages. You can write a custom control, deploy it to a SharePoint server, and then reference the delegate control ID in its feature elements.xml file. The following is an example delegate control in the master page.

    <SharePoint:DelegateControl runat="server" ControlId="AdditionalPageHead" AllowMultipleControls="true"/>
    

Deployment Considerations

Before you deploy your branding solutions, consider the following:

  • Style sheets are global branding resources. CSS files are typically authored and managed by power users, graphic artists, designers, and site owners. Enterprise developers use managed code to deploy their applications to SharePoint. Consider deploying style sheets to SharePoint servers by using Sandboxed solutions.

  • Deploying to the SharePoint server file system requires Administrator access and possibly custom code. This option affects the entire server and all web applications that are hosted on that server. Any SharePoint site can use a CSS file that is deployed to the Layouts directory.

  • If you deploy to the Styles library of a SharePoint site, be aware that it is central to that site collection. You can use or reference a style sheet from another site collection, but that would defeat the purpose of having the style sheet in the Styles library. In this case, deploy to the SharePoint server file system.

About the Author

Johnny Harbieh is a Lead Consultant who works for Avtex Solutions LLC, a leading Microsoft partner that optimizes client interactions by using technologies based on the Microsoft platform. As an experienced Information Worker consultant, Johnny focuses on the SharePoint platform and what it brings to his clients. His work ranges from Strategy Briefings, Planning and Architecture, to Development, Deployment and Support of SharePoint-based solutions. Johnny holds several certifications in .NET, SQL Server, and the Portals and Collaboration space, including MCTS and MCITP in SharePoint Foundation and Server 2010. Johnny can be reached at Johnny.Harbieh@live.com or on Twitter as @jharbieh. Johnny also keeps a public blog.

The following were tech editors on Microsoft SharePoint 2010 articles from Wrox:

  • Matt Ranlett is a SQL Server MVP who has been a fixture of the Atlanta .NET developer community for many years. A founding member of the Atlanta Dot Net Regular Guys, Matt has formed and leads several area user groups. Despite spending dozens of hours after work on local and national community activities, such as the SharePoint 1, 2, 3! series, organizing three Atlanta Code Camps, working on the INETA board of directors as the vice president of technology, and appearing in several podcasts such as .Net Rocks and the ASP.NET Podcast, Matt recently found the time to get married to a wonderful woman named Kim, whom he helps to raise three monstrous dogs. Matt currently works as a senior consultant with Intellinet and is part of the team committed to helping people succeed by delivering innovative solutions that create business value.

  • Jake Dan Attis. When it comes to patterns, practices, and governance with respect to SharePoint development, look no further than Jake Dan Attis. A transplant to the Atlanta area from Moncton, Canada, Dan has a degree in Applied Mathematics, but is 100% hardcore SharePoint developer. You can usually find Dan attending, speaking at, and organizing community events in the Atlanta area, including code camps, SharePoint Saturday, and the Atlanta SharePoint User Group. When he's not working in Visual Studio, Dan enjoys spending time with his daughter Lily, watching hockey and football, and sampling beers of the world.

  • Kevin Dostalek has over 15 years of experience in the IT industry and over 10 years managing large IT projects and IT personnel. He has led projects for companies of all sizes and has participated in various roles including Developer, Architect, Business Analyst, Technical Lead, Development Manager, Project Manager, Program Manager, and Mentor/Coach. In addition to these roles, Kevin also managed a Solution Delivery department as a Vice President for a mid-sized MS Gold Partner from 2005 through 2008 and later also served as a Vice President of Innovation and Education. In early 2010 Kevin formed Kick Studios as a company providing consulting, development, and training services in the specialized areas of SharePoint and Social Computing. Since then he has also appeared as a speaker at numerous user group, summit, and conference type events across the country. You can find out more about Kevin on his blog, The Kickboard.

  • Larry Riemann has over 17 years of experience architecting and creating business applications for some of the world’s largest companies. Larry is an independent consultant who owns Indigo Integrations and does SharePoint consulting exclusively through SharePoint911. He is an author, writes articles for publication and occasionally speaks at conferences. For the last several years he has been focused on SharePoint, creating and extending functionality where SharePoint leaves off. In addition to working with SharePoint, Larry is an accomplished .Net Architect and has extensive expertise in systems integration, enterprise architecture and high availability solutions. You can find him on his blog.

  • Sundararajan Narasiman is a Technical Architect with Content Management & Portals Group of Cognizant Technology Solutions, Chennai, with more than 10 years of Industry Experience. Sundararajan is primarily into the Architecture & Technology Consulting on SharePoint 2010 Server stack and Mainstream .NET 3.5 developments. He has passion for programming and also has interest for Extreme Programming & TDD.

Additional Resources

For more information about the topics, concepts, and features mentioned in this article, see the following resources: