Professional SharePoint® 2010 Branding and User Interface Design

316

❘

CHAPTER 10 WEB PARTS AND XSLT

FIGURE 10-29

2. Open and check out ItemStyle.xsl for editing.

The code of this fi le is interesting. It is similar to the other XSL style sheets you have seen

earlier in this chapter, but consider that it is being called by

ContentQueryMain.xsl for

each item that is being rolled up by the CQWP. The fi le consists of many

<xsl:template>

entries that correspond to the item styles that show in the Web Part tool pane. For this

example, you will be copying the default template and making adjustments.

3. Select and copy the entire Default template from

<xsl:template name=”Default” match=”*” mode=”itemstyle”> to </xsl:template>,

and paste it to the bottom of the fi le just before the closing

</xsl:stylesheet>.

4. Replace the fi rst line of the template with the following code. (The bolded areas are what will

be changing.)

<xsl:template name=”WaffleStyle” match=”Row[@Style=’WaffleStyle’]”

mode=”itemstyle”>

This is how the template name is designated in the Item Style drop-down in the Web Part

tool pane. Note that

name and match should refer to the same text. Next, you will be mak-

ing a few changes to the XSL to enhance the display of the items in the CQWP.

5. Start by changing the <img> tag to include an inline style that sets the height of the image to

100px. This will ensure that each image is approximately the same size, no matter how big

the original ...