Apply a custom style sheet to a SharePoint site

This article describes how a customized copy of the default style sheet is created automatically in the Folder List of a site when you change a default style in that site. This article also shows you how to apply this new style sheet to other sites or subsites and how to revert to the default style sheet later if you want to. Finally, this article shows you how to do this for both Windows SharePoint Services 3.0 sites and Microsoft Office SharePoint Server 2007 sites.

What do you want to do?


Make changes to the styles in a site

With Microsoft Office SharePoint Designer 2007, you can customize the look and feel of a single SharePoint site by making changes to the default styles that are applied to that site. You can also apply your customized styles to other sites or choose at any time to remove all customized styles and revert to the default style sheet that resides on the server for that site collection. You can make any of these changes for Windows SharePoint Services 3.0 sites and Office SharePoint Server 2007 sites.

By working with the default.master page for the local site and by using the CSS Properties and Manage Styles task panes, you can identify which styles are applied to the visual element that you want to change and then modify those styles.

 Important   If you want your changes to appear on all pages in the site, make sure that you are working with the default.master page for the site and not the default.aspx page.

Modify Style dialog box opened from CSS Properties pane

By default, the styles for all SharePoint sites in a single site collection are defined in a single style sheet that resides on the server. In Windows SharePoint Services 3.0, the name of this file is Core.css. In Office SharePoint Server 2007, this file may have any of several names. For example, the styles for the custom master page named BlackBand.master are defined in a style sheet named Band.css.

The first time that you modify any style on a page in any site, Office SharePoint Designer 2007 automatically opens a new local copy of the default style sheet and updates it with your changes. When you save or close the page or the copy of the default style sheet, you are prompted to confirm your customizations.

The confirmed customizations are reflected in the new local version of the style sheet, which is stored in a new folder named _styles that is created automatically in the Folder List of your site. Any subsequent changes made to styles in the same site will be reflected in this local version of the style sheet, which can also be edited directly.

Folder List with  _styles folder and customized Core.css style sheet

When you customize the default style sheet (such as Core.css) so that a copy appears in the _styles folder of your Folder List, the customized style sheet is used to display all of the pages in your site. You can revert to using the default style sheet at any time by either renaming or deleting the customized style sheet.

 Important   After you customize a style sheet, do not move the customized file or the _styles folder (by using, for example, either a drag-and-drop or a cut-and-paste operation). If you do move the file or the folder, each page in your site will be displayed with a broken link to the customized style sheet, and none of the styles will be applied on any page.

There are two options for recovering from this situation:

  • To display pages by using the customized style sheet, move it back into the _styles folder at the top level of the site directory.
  • To restore the site to the default style sheet, move the customized style sheet back into the _styles folder at the top level of the site directory, and then either delete the style sheet or rename it.

If the customized style sheet no longer exists, create an empty file that has the same name (such as Core.css) in the _styles folder at the top level of the site directory, and then either delete the empty file or rename it to trigger the process of restoring the default style sheet.

Top of Page Top of Page

Apply a customized local style sheet to other sites

By default, a customized local style sheet is applied to only the site or subsite in which it is customized, as shown in the following illustration.

Site collection with default style sheet and single customized style sheet

However, it is also possible to apply your customized local style sheet to other sites. The following two sections explain how to do this.

If you want to apply a single customized local style sheet both to a site and to some or all of that site's subsites, it is usually easiest to begin by creating the customized style sheet in the site itself and then to use one of the following methods to apply it to the subsites.

Attach a style sheet to another single site

In either a Windows SharePoint Services 3.0 or an Office SharePoint Server 2007 environment, you can manually attach a customized style sheet that is located in one site to a second site.

When you want to apply a style sheet to another site, make sure that you attach the style sheet to the default master page of that site.

  1. In Office SharePoint Designer 2007, open the site to which you want to apply an existing customized style sheet.
  2. In the site, open the default master page.
  3. On the Format menu, point to CSS Styles, and then click Attach Style Sheet.
  4. In the Attach Style Sheet dialog box, click Browse to locate and select the customized style sheet that you want to apply.
  5. In the Attach to section, click Current page.
  6. In the Attach as section, click Link, and then click OK.

The specified customized style sheet is applied to the default master page and to all content pages that are attached to that master page.

 Tip   To see the updated styles in Design view, you may have to press F5 to refresh the view.

  1. To save the master page with the new style sheet link, on the File menu, click Save. (Alternatively, you can press CTRL+S.)

To apply the same style sheet to other sites, repeat this procedure for each site, one site at a time. If you are working in an Office SharePoint Server 2007 environment and you want to apply a single customized style sheet to a site and all of its subsites, see the following section.

Apply a style sheet to a site and all of its subsites

If you are working in an Office SharePoint Server 2007 environment, you can use the browser interface to apply a customized style sheet to multiple sites in a single operation.

 Note   This functionality is available only in Office SharePoint Server 2007 and not in Windows SharePoint Services 3.0.

This process takes advantage of a functionality called inheritance. A site can be configured to inherit the styles used by its parent site — the site directly above it in the site hierarchy. In the following illustration, the second-level site on the right contains a customized local version of the default style sheet. Each of the six subsites in that site collection is configured to inherit its styles from its parent site. Thus, all seven sites in the site collection use the same customized version of the default style sheet. Arrows indicate inheritances.

Site collection with default style sheet and customized style sheet

To apply an existing customized style sheet that resides in an Office SharePoint Server 2007 site to all of that site's subsites:

  1. In the browser, open the Office SharePoint Server 2007 site in which the existing customized style sheet resides.
  2. On the Site Actions menu, do one of the following:
    • Click Site Settings.
    • Point to Site Settings, and then click Modify All Site Settings.
  3. On the Site Settings page, under Look and Feel, click Master page.
  4. On the Site Master Page Settings page, in the Alternate CSS URL section, click Specify a CSS file to be used by this publishing site and all sites that inherit from it, and then type the full path for the customized style sheet, including the file name, in the box.

 Notes 

  • Because the _styles folder is a hidden folder and cannot be viewed in the browser, you cannot use the Browse button to find and select a customized version of a style sheet file that is stored in a _styles folder.
  • You can copy and paste the first part of the path, including the site name, from the Address box at the top of the browser. Be sure to stop after the site name, however, and don't include any extraneous folder or file names within the site. For example, if the path in the Address box is http://My_site/Subsite_1/_Layouts/ChangeSiteMasterPage.aspx, copy and paste only the http://My_site/Subsite_1/ portion, and then type the rest of the path manually. (The rest of the path will usually be _styles/customized_style_sheet, where customized_style_sheet is the name of the customized style sheet that you want to apply.)
  1. Select the Reset all subsites to inherit this alternate CSS URL check box, and then click OK.

The customized style sheet, which was already applied to the current site, is now also applied to all of its subsites.

 Tip   To see the updated styles in the subsites, you may have to refresh the view.

In the following illustration, a second customized local version of the default style sheet was added to the site collection on the right and applied to all of the subsites of the site where it resides. Again, arrows indicate inheritances.

Site collection with default style sheet and 2 customized style sheets

Configure a subsite to inherit styles from its parent site

If you are working in an Office SharePoint Server 2007 environment, you can use the browser interface to configure a single subsite to inherit the styles used by the site immediately above it.

 Note   This functionality is only available in Office SharePoint Server 2007 and not in Windows SharePoint Services 3.0.

To configure a single subsite to inherit the styles used by the site immediately above it:

  1. In Office SharePoint Server 2007, open the subsite to which you want to apply the styles.
  2. On the Site Actions menu, do one of the following:
    • Click Site Settings.
    • Point to Site Settings, and then click Modify All Site Settings.
  3. On the Site Settings page, under Look and Feel, click Master Page.
  4. On the Site Master Page Settings page, in the Alternate CSS URL section, click Inherit Alternate CSS URL from parent of this site.
  5. Select or clear the Reset all subsites to inherit this alternate CSS URL check box, and then click OK.

 Tip   To see the updated styles, you may have to refresh the view.

Top of Page Top of Page

Stop using a customized local style sheet

If you no longer want to use a customized local style sheet for one or more sites, you have several options. You can:

  • Stop applying the customized style sheet to other sites to which it is attached or by which it is inherited    If you want to continue to use the customized style sheet in at least the site where it resides, you can stop applying it to other sites where it is currently applied.
  • Stop applying the customized style sheet in the site where it resides, but retain a copy in that site for future use or reference    With this option, you can easily return to using the customized style sheet at any time.
  • Delete the customized style sheet and the _styles folder from the site where they reside    This is the simplest, surest, and most complete way to remove a customized style sheet from use.

Stop applying a style sheet to other sites

If you want to continue to apply a customized style sheet in at least the site where it resides, but to stop applying it to other sites to which it is attached or which reference it through inheritance, use one of the following two procedures.

If the style sheet is attached (Office SharePoint Server 2007 or Windows SharePoint Services 3.0)

  1. In Office SharePoint Designer 2007, open the site where you want to stop applying a customized style sheet.
  2. In the site, open the default.master page.
  3. On the Format menu, point to CSS Styles, and then click Manage Style Sheet Links.
  4. In the Link Style Sheet dialog box, click All pages.
  5. In the URL list, click the URL of the style sheet that you want to remove, click Remove, and then click OK.

The customized style sheet is no longer applied to this site.

 Tip   To see the updated styles, you may have to refresh the view.

If the style sheet is inherited (Office SharePoint Server 2007 only)

  1. In Office SharePoint Server 2007, open the site that you want to stop inheriting a customized style sheet.
  2. On the Site Actions menu, do one of the following:
    • Click Site Settings.
    • Point to Site Settings, and then click Modify All Site Settings.
  3. On the Site Settings page, under Look and Feel, click Master Page.
  4. On the Site Master Page Settings page, in the Alternate CSS URL section, click Use Windows SharePoint Services default styles, and then click OK.

The customized style sheet is no longer inherited by this site.

 Tip   To see the updated styles, you may have to refresh the view.

Stop applying a style sheet, but retain a copy

If you want to stop using a local, customized style sheet and revert to the default style sheet, but you still want to keep a copy of the customized version for future use or reference, do the following:

  1. In the Folder List, in the _styles folder, right-click the customized style sheet file, and then click Reset to Site Definition on the shortcut menu.
  2. In the Site Definition Page Warning dialog box, click Yes to confirm that you want to reset.

A copy of the customized version is made, and a local copy of the default server version is created.

 Notes 

  • Both the sites that inherit from this site and the sites to which the customized style sheet are manually attached automatically switch to using the local copy of the default server version.
  • To see the updated styles, you may have to refresh the view.

Delete a style sheet entirely

If you want to stop using a local, customized style sheet and revert to the default style sheet, and you do not want to keep a copy of the customized version for future use or reference, do the following:

  1. Right-click the local _styles folder where the customized version resides, and then click Delete on the shortcut menu.
  2. When prompted, confirm that you want to perform the deletion, to undo customizations, and to revert to the default style sheet. (There may be multiple messages.)

 Notes 

  • Sites that inherit from this site automatically switch to using the default style sheet.
  • Sites to which the customized style sheet are manually attached must have the style sheet manually detached before they correctly switch to using the default style sheet. Use the If the style sheet is attached procedure earlier in this section.
  • To see the updated styles, you may have to refresh the view.

Top of Page Top of Page

Change or replace the default style sheet for the entire site collection

If you want to make changes to the default style sheet so that your changes are applied to all sites in the site collection, or if you want to replace the default style sheet in the top-level site of the collection with another style sheet altogether, contact your server administrator. This must be done on the server and cannot be done in the browser or Office SharePoint Designer 2007.

Top of Page Top of Page

 
 
Applies to:
SharePoint Designer 2007