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

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


Requirement:

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:



.SingleLine
{
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
{
text-decoration:none;

}


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.

















_blank

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























_blank






// DoubleLine style

























_blank





{@ImageUrlAltText}


















1
spacer.gif











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:





























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















Reference: MSDN (http://msdn.microsoft.com/en-us/library/ms551040(v=office.12).aspx)
Share:

1 comments:

mala said...

Great article, thank, but I am looking to add a few more styles for "Title with background" - I would like to have a few more choices for color. Do you by any chance have a script ready? Appreciate your help!

About Me

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

Followers

Labels