Thursday, January 13, 2011

Customizing Styles of Summary Links Web Parts

Customizing Styles of Summary Links Web Parts:

The Summary Link field control present authored links on your page. You can base these links on a set of styles available to the Web site.
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


Corresponding Web Part


"Application" XSL style sheet

Content Query


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

Content Query, Summary Links, Table of Contents


Content Query and Summary Link item styles

Content Query, Summary Links


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

Table of Contents


"Application" XSL for Summary Links

Summary Links


"Application" XSL for Table of Contents

Table of Contents


We required two custom styles for link items:

1. First style with one horizontal line.

2. Second style with two horizontal lines

Steps to update:

1. First we will create css class:

Border-bottom:1px solid #000000; text-decoration:none;
FONT-FAMILY: Arial, Helvetica; font-size:12px;

.SingleLine A, .SingleLine A:link, .SingleLine A:active,.SingleLine A:visited


Add above mentioned css class into your site css file.

2. To find and modify Summary Link styles

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

2. Click Style Library.

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

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

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

b. You can show or hide the Summary Link data by adding or removing these variables.

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

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

e. 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.

f. The section includes the rendered HTML with the result of the functions.

// 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.


// Includes the rendered HTML with the results of the functions.

3. To create a new style:

1. Repeat steps 1 through 4 mentioned in step 2 in the previous procedure to navigate to the ItemStyle.xsl file.

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

// SingleLine style


// DoubleLine style




3. Now upload updated ItemStyle.xsl in the library.

4. After uploading the ItemStyle.xsl in the library, newly created styles are available in the item style:

Now, if we create new link items by using newly created styles:

Reference: MSDN (

Sitecore® Technology MVP 2020-2019

Featured Post

Sitecore Error Troubleshooting: Node.js error while setting Sitecore JSS Integrated Mode

Sitecore Error Troubleshooting: Node.js error while setting Sitecore JSS Integrated Mode Problem Statement: I was setting up th...

Total Pageviews

State Counter


About Me

My photo
Based in Bangalore, INDIA, Amit is a Sitecore MVP and MCC. He has an MCA from the U.P.T.U., INDIA and holds certifications including Sitecore and SharePoint 2007/2010. He is an contributor to Sitecore/MSDN communities and Amit have experience in Sitecore, ASP.Net with C#, MVC, SharePoint, Classic ASP, VB,Macros,HTML,JavaScript,JSON,BootStrap and AngularJS.


Follow me on Twitter