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.

Customizing Styles of Summary Links, Table of Contents, and Content By Query Web Parts

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

To find and modify Summary Link styles

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)