How can I change the Item Styles within a Content Query Web Part?

If you want to preserve the look and feel of a Web page by applying certain custom styles to the page content by including a WepPart, you can change the definition of style sheets “ItemStyles.xsl” without affecting the page content in the future.You find the file in under your domain/Style Library/XSL Style Sheets. Open the file in an editor of choice (eg. Microsoft Office SharePoint Designer). Next check it out to be able to make changes to the file.
Using the Content Query Web Part you can display a dynamic view of content from your site on a web page. The web part can be configured to retrieve items from a single list, a single site and subsites or the entire site collection. It builds a CAML (Collaborative Application Markup Language) query and uses the new Microsoft.SharePoint.SPSiteDataQuery class to query the server. Filtering, sorting, ordering and grouping can all be configured in the Web Part properties.
The approach to use if you are using a different style than the out of the box style is to deploy your own .webpart of the Content Query Web Part that references a different style sheet than the ItemStyle.xsl file. A Content Query Web Part displays a dynamic view of content on a page in your Microsoft Office SharePoint Server 2007 site. The Web Part runs a query that can span lists and sites in your site collection, and then presents the results of that query on the page. You can, for example, use this Web Part to display the five most recently published articles in your Web site, regardless of where they are stored.
Now edit the the template like you normaly do XSLT formating. I also included for example a JS funktion in the Style for custom Window Popup configuration.
Here is an example:


(, )

function customPopup(url)
Report =,’Report’,’status=1,width=750,height=650,resizable=no,scrollbars=no’);

In the XSL file you’ll find xsl:template elements for each selectable style in the Content Query Web Part style drop down. As a best practice I won’t modify any of the default styles, but rather adding my own style.
The easy approach is to copy the xsl:template element of the style that matches your style the most,and make alterations to it.
– Copy the element
– Change the name attribute to “DetailedStyle”
– Change the match attribute to “Row[@Style=’DetailedStyle’]“
Here you can select your template you created before. You have to add a simple CQWP to your page and select your site or list, type and aproriate Content Type. In the next step export the Webpart to your local maschine an edit the file.

By default, the XSL style sheet that controls the presentation of the Content Query Web Part renders the Title, Description, ImageUrl, and LinkUrl columns (if present) of the items the query returns. The Web Part renders the ImageUrl and LinkUrl columns as an image and as a hyperlink, respectively. The Content Query Web Part uses XSL style sheets to render these columns by default. If you want to query for custom content types and render specific columns from those content types in the Web Part, you need to perform some minor customization in the .webpart file.
You only have to do change the webaprt file, when you want to present your own columns in the style in adition to default values. Open the .webpart go to line . Follow the instruction from this postCommonViewFiled Types.
E.g. Previews, PublishingRollupImage;FileSizeDisplay,Computed;File_x0020_Size,Lookup;Product, Choice;ProductGroup, Choice;DownloadIT, String;
Important Note!
You cannot use your columns’ display names in this property. You can find the internal column names by checking the properties of the column in the list or document library. Right-click the column, and then click Properties. The internal name of a column appears in the Address (URL) property after’Field=’. In the Knowledge Base Articles scenario, the columns are Knowledge Base Article and Product and their internal names are KB_x0020_Title and Product, respectively.
In the next step, import your new webpart file to the CQWP. Choose your custom ItemStyle in the list and thats all.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s