How to: Customize Styles
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 by changing 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 Office SharePoint Server 2007 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 authors, 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 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 here and 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:
<PublishingWebControls:RichHtmlField id="Content" FieldName="PublishingPageContent" PrefixStyleSheet-"PageContentStyle"/>
The HTML editor looks for CSS classes with the PageContentStyleCustom prefix in associated CSS syntax. If it 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 Content Query Web Part 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 and Content Query Web Parts display data-driven views of navigation and queries for site contents, respectively. You can also style the items and group headers in these Web Parts so they use a set of available styles to render.
Microsoft Office SharePoint Server 2007 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.
The following table shows the mapping of XSL style sheet files and the 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
Navigate to the home page of your Web site and click View All Site Content.
Click Style Library.
Click XSL Styles Sheets. The list of XSL files available in the Style Library for all three Web Part types appears.
To see an example, open ItemStyle.xsl, which controls the display of Summary Link and Content Query Web Part items, to modify it. 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 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 Office SharePoint Server 2007 calls, passes data to, and gets modified versions of the data from.
The 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 MOSS 2007 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
Repeat steps 1 through 4 in the previous procedure to navigate to the ItemStyle.xsl file.
Open the ItemStyle.xsl file and add the following code.
<xsl:template name="MyCustomStyle" match="Row[@Style='MyCustomStyle']" mode="itemstyle"> </xsl:template>Add template name, variables, parameter information, and other details between the open and close tags in the ItemStyle.xsl file as needed.
Add HTML and the appropriate XSL statements to display the variables appropriately in the Web Part.