Customizing the Summary Links with custom itemStyles.xslt

The Summary Links control (PublishingWebControls:summarylinkfieldcontrol) allows you to specify your own styles using the ItemXslLink property as shown below. 

<PublishingWebControls:summarylinkfieldcontrol ItemXslLink="/Style Library/XSL Style Sheets/InsideHomeItemStyle.xsl" .../>

In SP Designer, you can copy an existing xsl file and rename it, you can then update the file with your own styles and template names.

As a demo of how this works, the following New Home page layout has two Summary Link areas.

https://inside.cgc.maricopa.edu/beta/Pages/default.aspx

The custom itemStyles.xsl file I created has only 2 styles to chose from; insideHome1 & insideHome2. Both styles include a bullet icon in front of the link but insideHome1 colors the link teal, insideHome2 colors the link orange.

If you have a Links Webpart that you've added to a zone in your publishing page, you can export the webpart and modify the webpart file with the following xml:

<property name="HeaderXslLink" type="string">/Style Library/XSL Style Sheets/CustomHeader.xsl</property>
<property name="ItemXslLink" type="string">/Style Library/XSL Style Sheets/CustomItemStyle.xsl</property>

Save, add and upload your webpart. Your new header and styles will now be available.