Customizing Styles of Summary Links Web Parts

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:

<!--[if !supportLists]-->1. <!--[endif]-->First style with one horizontal line.

<!--[if !supportLists]-->2. <!--[endif]-->Second style with two horizontal lines

Steps to update:

1. First we will create css class:

view plaincopy to clipboardprint?

1. .SingleLine  
2. {  
3. Border-bottom:1px solid #000000; text-decoration:none;  
4. FONT-FAMILY: Arial, Helvetica; font-size:12px;  
5. }  
6.   
7. .SingleLine A, .SingleLine A:link, .SingleLine A:active,.SingleLine A:visited  
8. {  
9. text-decoration:none;  
10.   
11. }  

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

<!--[if !supportLists]-->2. <!--[endif]-->To find and modify Summary Link styles

<!--[if !supportLists]-->1. <!--[endif]-->Navigate to the home page of your Web site and click View All Site Content.

<!--[if !supportLists]-->2. <!--[endif]-->Click Style Library.

<!--[if !supportLists]-->3. <!--[endif]-->Click XSL Styles Sheets. The list of XSL files available in the Style Library for all three Web Part types appears.

<!--[if !supportLists]-->4. <!--[endif]-->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.

<!--[if !supportLists]-->a. <!--[endif]-->The XSL template is simply HTML with a few variables (@ImageURL, @LinkURL, @Description, and so on).

<!--[if !supportLists]-->b. <!--[endif]-->You can show or hide the Summary Link data by adding or removing these variables.

<!--[if !supportLists]-->c. <!--[endif]-->You can also choose to change how the surrounding HTML makes these variables appear.

<!--[if !supportLists]-->d. <!--[endif]-->Each XSL template maps to one style that an author can choose.

<!--[if !supportLists]-->e. <!--[endif]-->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.

<!--[if !supportLists]-->f. <!--[endif]-->The section includes the rendered HTML with the result of the functions.

view plaincopy to clipboardprint?

1. <XSL:TEMPLATE name="Default" mode="itemstyle" match="*">  
2. // 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:WITH-PARAM></XSL:CALL-TEMPLATE>  

</XSL:VARIABLE>  

<XSL:VARIABLE name="SafeImageUrl">  

<XSL:CALL-TEMPLATE name="OuterTemplate.GetSafeStaticUrl">  

<XSL:WITH-PARAM name="UrlColumnName" select="'ImageUrl'">  

</XSL:WITH-PARAM></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:WITH-PARAM></XSL:WITH-PARAM></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="http://www.blogger.com/%7B$SafeLinkUrl%7D" target={$LinkTarget}>  

    <IMG class=image alt={@ImageUrlAltText} src="http://www.blogger.com/%7B$SafeImageUrl%7D">  

</A>  

</DIV>  

</XSL:IF>  

<DIV class=link-item>  

<XSL:CALL-TEMPLATE name="OuterTemplate.CallPresenceStatusIconTemplate">  

<A title={@LinkToolTip} href="http://www.blogger.com/%7B$SafeLinkUrl%7D" target={$LinkTarget}>  

<XSL:VALUE-OF select="$DisplayTitle">  

</XSL:VALUE-OF></A>  

<DIV class=description>  

<XSL:VALUE-OF select="@Description">  

</XSL:VALUE-OF></DIV>  

</XSL:CALL-TEMPLATE></DIV>  

</DIV>  

</XSL:TEMPLATE>  

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




    

<!--[if !supportLists]-->3. <!--[endif]-->To create a new style:

<!--[if !supportLists]-->1. <!--[endif]-->Repeat steps 1 through 4 mentioned in step 2 in the previous procedure to navigate to the ItemStyle.xsl file.

<!--[if !supportLists]-->2. <!--[endif]-->Open the ItemStyle.xsl file and add the following code.

// SingleLine style

view plaincopy to clipboardprint?

1. <XSL:TEMPLATE name="SingleLine" mode="itemstyle" match="Row[@Style='SingleLine']">  
2. <XSL:PARAM name="GroupPosition">  

<XSL:VARIABLE name="SafeLinkUrl">  

<XSL:CALL-TEMPLATE name="OuterTemplate.GetSafeLink">  

<XSL:WITH-PARAM name="UrlColumnName" select="'LinkUrl'">  

</XSL:WITH-PARAM></XSL:CALL-TEMPLATE>  

</XSL:VARIABLE>  

<XSL:VARIABLE name="SafeImageUrl">  

<XSL:CALL-TEMPLATE name="OuterTemplate.GetSafeStaticUrl">  

<XSL:WITH-PARAM name="UrlColumnName" select="'ImageUrl'">  

</XSL:WITH-PARAM></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:WITH-PARAM></XSL:WITH-PARAM></XSL:CALL-TEMPLATE>  

</XSL:VARIABLE>  

<XSL:VARIABLE name="LinkTarget">  

<XSL:IF test="@OpenInNewWindow = 'True'">_blank</XSL:IF>  

</XSL:VARIABLE>  

<DIV id=linkitem class=dateFont>  

<XSL:IF test="string-length($SafeImageUrl) != 0">  

<DIV class=lightB>  

<A href="http://www.blogger.com/%7B$SafeLinkUrl%7D" target={$LinkTarget}>  

<IMG class=image alt={@ImageUrlAltText} src="http://www.blogger.com/%7B$SafeImageUrl%7D">  

</A>  

</DIV>  

</XSL:IF>  

<DIV>  

  

  

  

  

  

  

  

<TABLE><TBODY><TR><TD class=SingleLine>  

 <XSL:CALL-TEMPLATE name="OuterTemplate.CallPresenceStatusIconTemplate">  

 <A title={@LinkToolTip} href="http://www.blogger.com/%7B$SafeLinkUrl%7D" target={$LinkTarget}>  

   <XSL:VALUE-OF select="$DisplayTitle">  

 </XSL:VALUE-OF></A>  

</XSL:CALL-TEMPLATE></TD></TR><TR><TD>  

 <DIV class=dateFont>  

   <XSL:VALUE-OF select="@Description">  

 </XSL:VALUE-OF></DIV>  

</TD></TR></TBODY></TABLE>  

</DIV>  

</DIV>  

</XSL:PARAM></XSL:TEMPLATE>  

_blank

// DoubleLine style

view plaincopy to clipboardprint?

1. <XSL:TEMPLATE name="DoubleLine" mode="itemstyle" match="Row[@Style='DoubleLine']">  
2. <XSL:PARAM name="GroupPosition">  

<XSL:VARIABLE name="SafeLinkUrl">  

<XSL:CALL-TEMPLATE name="OuterTemplate.GetSafeLink">  

<XSL:WITH-PARAM name="UrlColumnName" select="'LinkUrl'">  

</XSL:WITH-PARAM></XSL:CALL-TEMPLATE>  

</XSL:VARIABLE>  

<XSL:VARIABLE name="SafeImageUrl">  

<XSL:CALL-TEMPLATE name="OuterTemplate.GetSafeStaticUrl">  

<XSL:WITH-PARAM name="UrlColumnName" select="'ImageUrl'">  

</XSL:WITH-PARAM></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:WITH-PARAM></XSL:WITH-PARAM></XSL:CALL-TEMPLATE>  

</XSL:VARIABLE>  

<XSL:VARIABLE name="LinkTarget">  

<XSL:IF test="@OpenInNewWindow = 'True'">_blank</XSL:IF>  

</XSL:VARIABLE>  

<DIV id=linkitem class=dateFont>  

<XSL:IF test="string-length($SafeImageUrl) != 0">  

<DIV class=lightB>  

<A href="http://www.blogger.com/%7B$SafeLinkUrl%7D" target={$LinkTarget}>  

<IMG class=image alt={@ImageUrlAltText} src="http://www.blogger.com/%7B$SafeImageUrl%7D">  

</A>  

</DIV>  

</XSL:IF>  

<DIV>  

  

  

  

  

  

  

  

<TABLE><TBODY><TR><TD class=SingleLine>  

  <XSL:CALL-TEMPLATE name="OuterTemplate.CallPresenceStatusIconTemplate">  

  <A title={@LinkToolTip} href="http://www.blogger.com/%7B$SafeLinkUrl%7D" target={$LinkTarget}>  

    <XSL:VALUE-OF select="$DisplayTitle">  

  </XSL:VALUE-OF></A>  

</XSL:CALL-TEMPLATE></TD></TR><TR><TD class=SingleLine>  

  <IMG src="http://www.blogger.com/post-edit.g?blogID=12212983&postID=3604831908665183639">  

    <XSL:ATTRIBUTE name="height">1</XSL:ATTRIBUTE>  

    <XSL:ATTRIBUTE name="src">spacer.gif</XSL:ATTRIBUTE>  

  

</TD></TR></TBODY></TABLE>  

<DIV class=dateFont>  

<XSL:VALUE-OF select="@Description">  

</XSL:VALUE-OF></DIV>  

</DIV>  

</DIV>  

</XSL:PARAM></XSL:TEMPLATE>  

_blank






















1
spacer.gif

<!--[if !supportLists]-->3. <!--[endif]-->Now upload updated ItemStyle.xsl in the library.

<!--[if !supportLists]-->4. <!--[endif]-->After uploading the ItemStyle.xsl in the library, newly created styles are available in the item style:

<!--[if !supportLists]-->

5. <!--[endif]-->Now, if we create new link items by using newly created styles: