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
|
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)
Comments