Customize content query web part's look

Question

I'd like to customize the way a content query web part (CQWP) displays a list on SharePoint 2010; the list is defined in the root and is going to be fetched in a subsite. Each subsite will pull one record from the list and so we need to display it like this:

Contact [Department Name]
Address (MAP) 
Tel: 0000
email@domain.org

Opening Hours:

​Sunday - Wednesday ​00:00 to 00:00 
​Thursday  ​​00:00 to 00:00 

The reason for using a CQWP is that we're pulling a list from the root and displaying it based on a department filter in a subsite. How difficult is it to customize a CQWP to display information this way? Thanks.

Answer 1

It's surprisingly easy to do what you need once you know the bits and pieces you need to do.

First, understand that the CQWP uses a file called ItemStyle.xsl which lives in the Style Library. This file contains templates which render the individual rows of a result of a CQWP.

Therefore, what you want to do, is to add a template to this file.

Next, if you haven't guessed, you'll need to employ some XSLT magic to the ItemStyle file to display it the way you want. Not only will this require XSLT knowledge, but also fundamental HTML (your layout hasn't much complicated about it, so you can get away with just a couple of <P> tags).

Here's a starter article on the ItemStyle, many more can be found with a quick Google: http://msdn.microsoft.com/en-us/library/bb447557.aspx

Answer 2

The CQWP layout can be changed to your needs by customizing the xsl the webpart uses. An explanation can be found here:

http://msdn.microsoft.com/en-us/library/bb447557.aspx

Some more background info can be found here: http://blogs.msdn.com/b/ecm/archive/2010/05/14/what-s-new-with-the-content-query-web-part.aspx