One of our favorite features in SharePoint is Content by Query Web Part, or CQWP. It is available in publishing sites or any site that activates publishing feature. In this post we will play around with CQWP to understand a little bit about how to use it, and modify its appearance.
We can use CQWP as is, add it to any SharePoint page and configure its properties. For example, we use CQWP to display images that we’ve already uploaded into Picture Library before.
Using out of the box CQWP web part, we just need to specify the source library (in this case Pictures):
Then, we need to adjust its presentation. We use Default for Group style, and Image on Left for Item style. We also use default fields to display on the CQWP:
If we view the source of CQWP web part using Firebug in Mozilla Firefox, we can see that it consists of HTML tag <ul> and <li>.
From HTML source, we can identify the CSS class of each HTML elements rendering the CQWP web part. If we want to change the appearance of CQWP content, we can add several CSS definition inside the page containing the CQWP web part. For example, to achieve the following appearance:
We add the following CSS definition on Home.aspx (the containing page):
&lt;style type=&quot;text/css&quot;&gt; ul.dfwp-list margin: 0; padding: 0; li.dfwp-item display: inline; li.dfwp-item div.item display: inline-block; width: 200px; li.dfwp-item div.item div.link-item display: inline-block; width: 160px; text-align: center; &lt;/style&gt;
It’s easy, isn’t? But how can we entirely change the HTML structure of CQWP content? for example if we want to change the <div> tag with <span> tag. It’s also easy. The template that renders CQWP web part is located inside the site containing the web part. What we need is SharePoint Designer and a little knowledge about XSLT.
Open the site using SharePoint Designer, then on Navigation Pane, expand All Files node. Navigate to Style Library > XSL Style Sheets. We should see several XSLT files there. Open ItemSyle.xsl in editor window. Here we can see several XSL templates to render various Style that we can choose when configuring CQWP web part. We use Image on left style that corresponds to Default XSL template. Find the Default template, and we should see various elements constructing the HTML result of CQWP web part.
In the following image, we change HTML tag that corresponds to an item from <div> to <span>:
As a result of changing the <div> tag to <span> tag, the HTML output of CQWP web part is also changed:
So, we already saw that we can do pretty much anything with CQWP in terms of appearance. We can edit its appearance by overriding or adding its CSS, or we can change its HTML structure entirely by editing its XSL templates.
Source: Playing Around with Content by Query Web Part (CQWP)