How to: Customize Styles in SharePoint Server 2010 (ECM)

Applies to: SharePoint Server 2010

In many cases, a designer wants to preserve the look and feel of a Web page by applying certain custom styles to the page content. Doing so makes it possible to change the definition of style sheets to change the look and feel of the page now, without affecting the page content in the future. The Microsoft SharePoint Server 2010 HTML editor supports the ability for the page author to apply customized styles to the content by using a predefined list of styles that the designer provides.

By default, the HTML editor presents the default set of styles, but a page layout designer may replace the default set by adding references to style sheets in the page layout. If the HTML editor detects new Cascading Style Sheet (CSS) classes whose names have the prefix ms-rteCustom-XXXX, where XXXX is the display name of the classes unique to the page, it displays the new set of custom styles instead of the default set.

The HTML editor detects classes specific to certain tags and displays them to the user only if specified content is selected. The drop-down menu always displays styles that are not defined for a specific tag. For example, a page layout designer may want to make the following custom style available to the page author by using a CSS file included in the page layout. While the page author is editing a page created from the layout, he or she can use the Select button on the HTML Editor toolbar to highlight a list on the page, click the Style button, and choose the list style shown in the code snippet to apply it to the selected list.

Ol.ms-rteCustom-RomanNumberList {
    font-family:Times New Roman; font-size:10pt; color:#000000; 
    text-indent:0; text-align:left; list-  style-type:upper-roman; 
    margin-left:30; margin-right:10; padding-left:10px; margin-top:1; 
    text-transform:capitalize

You can specify a unique CSS class name prefix for each publishing HTML field control so that you can present different custom styles for different sections of the page.

In the page layout where the RichHTMLField control is specified, you can override the PrefixStyleSheet property. For example, if you specify the following code, the HTML editor looks for CSS classes with the PageContentStyleCustom prefix in associated CSS syntax:

<PublishingWebControls:RichHtmlField id="Content" FieldName="PublishingPageContent" runat="server" PrefixStyleSheet-"PageContentStyle"/>

If the HTML editor finds custom styles that contain this prefix, it displays the styles in the Styles drop-down list according to the current selection.

The Summary Link field control and the Content By Query Web Part (CQWP) present authored links on your page. You can base these links on a set of styles available to the Web site.

The Table of Contents Web Part and CQWP display data-driven views of navigation. Both Web Parts can display queries for site contents. You can also style the items and group headers in these Web Parts so that they use a set of available styles to render.

SharePoint Server 2010 uses XSL style sheets to present these Web Parts. You can customize and extend styles to match the color and branding of your Web site.

Table 1 shows the mapping of XSL style sheet files and the corresponding Web Parts.

Table 1. Mapping of XSL style sheet files and corresponding Web Parts

XSL Style Sheet

Purpose

Corresponding Web Part

ContentQueryMain.xsl

"Application" XSL style sheet

Content Query

Header.xsl

Group headers for Content Query and Summary Links, title headers for Table of Contents

Content Query, Summary Links, Table of Contents

ItemStyle.xsl

Content Query and Summary Link item styles

Content Query, Summary Links

LevelStyle.xsl

Table of Contents level styles, which includes the site and its pages

Table of Contents

SummaryLinkMain.xsl

"Application" XSL for Summary Links

Summary Links

TableOfContentsMain.xsl

"Application" XSL for Table of Contents

Table of Contents

Procedures

  1. Navigate to the home page of your Web site, and then click View All Site Content.

  2. Click Style Library.

  3. Click XSL Styles Sheets to display the list of XSL files available in the Style Library for all three Web Part types.

  4. To see an example, open ItemStyle.xsl to modify it. ItemStyle.xsl controls the display of items in Summary Link Web Part items and in CQWP items. Next, consider the file's structure and contents:

    • The XSL template is simply HTML with a few variables (@ImageURL, @LinkURL, @Description, and so on).

    • You can show or hide the Summary Link Web Part data by adding or removing these variables.

    • You can also choose to change how the surrounding HTML makes these variables appear.

    • Each XSL template maps to one style that an author can choose.

    • The first section of the code sample includes XSL templates that SharePoint Server 2010 calls, passes data to, and gets modified versions of the data from.

    • This section includes the rendered HTML with the result of the functions:

    <xsl:template name="Default" match="*" mode="itemstyle">
    // This section includes a set of functions, or xsl templates, which SharePoint Server 2010 calls, passes data into, and gets modified versions of the data from.  The product does this primarily to improve security.
        <xsl:variable name="SafeLinkUrl">
            <xsl:call-template name="OuterTemplate.GetSafeLink">
                <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
            </xsl:call-template>
        </xsl:variable>
        <xsl:variable name="SafeImageUrl">
            <xsl:call-template name="OuterTemplate.GetSafeStaticUrl">
                <xsl:with-param name="UrlColumnName" select="'ImageUrl'"/>
            </xsl:call-template>
        </xsl:variable>
        <xsl:variable name="DisplayTitle">
            <xsl:call-template name="OuterTemplate.GetTitle">
                <xsl:with-param name="Title" select="@Title"/>
                <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
            </xsl:call-template>
        </xsl:variable>
        <xsl:variable name="LinkTarget">
            <xsl:if test="@OpenInNewWindow = 'True'" >_blank</xsl:if>
        </xsl:variable>
    // Includes the rendered HTML with the results of the functions.
        <div id="linkitem" class="item">
            <xsl:if test="string-length($SafeImageUrl) != 0">
                <div class="image-area-left"> 
                    <a href="{$SafeLinkUrl}" target="{$LinkTarget}">
                        <img class="image" src="{$SafeImageUrl}" alt="{@ImageUrlAltText}" />
                    </a>
                </div>
            </xsl:if>
            <div class="link-item">
                <xsl:call-template name="OuterTemplate.CallPresenceStatusIconTemplate"/>
                <a href="{$SafeLinkUrl}" target="{$LinkTarget}" title="{@LinkToolTip}">
                    <xsl:value-of select="$DisplayTitle"/>
                </a>
                <div class="description">
                    <xsl:value-of select="@Description" />
                </div>
            </div>
        </div>
    </xsl:template>
    

To create a new style

  1. Repeat steps 1 through 4 of the previous procedure to navigate to the ItemStyle.xsl file.

  2. Open the ItemStyle.xsl file and add the following code.

    <xsl:template name="MyCustomStyle" match="Row[@Style='MyCustomStyle']" mode="itemstyle">
    </xsl:template>
    
  3. Add template name, variables, parameter information, and other details between the open and close tags in the ItemStyle.xsl file, as needed.

  4. Add HTML and the appropriate XSL statements to display the variables appropriately in the Web Part.

See Also

Concepts

How to: Customize the SharePoint HTML Editor Field Control (ECM)