Arguably the most useful tool in SharePoint 2010 is the Content Query WebPart (CQWP). This little webpart allows you rollup content from anywhere in the site collection and display it however you like. Yes, it has limitations, but this post is about the things you can do with it. But of course the CQWP is incomplete without a working knowledge of xsl styles. In SharePoint, all styles for the CQWP are stored in itemstyle.xsl. I'm not going to go into creating your own stylesheets, linking to CQWPs, etc. You can figure that out. We will dive into what is possible with styling CQWP results.
We’ll be creating something like this:
Create your list
Before we begin, create a list with the following columns:
* Title (standard text field)
* Body (rich text area)
* SiteLink (hyperlink column)
Declare a new style and insert fields
Every new style in itemstyle.xsl must be wrapped in the following tags:
Inside this tag, we'll begin by simply adding in our fields. I like to bring in all my fields, confirm they work on the page, and then begin styling.
When you call a variable, it is either already built into the system (Title, Author), or you will need to customize it in the browser to add in your specific fields into those value placeholders.
Format the Hyperlink
The first thing we'll do is format the hyperlink field to make it a friendly URL. The field, by default, puts the URL and then the friendly name concatenated together, but separated by a column. So what we do is create two variables in xsl, one that pulls everything before the comma, one that pulls everything after the comma. Then we will put the URL into an "a" tag.
Link Author to their mysite
Next, I want to take the Author’s name and link it to their MySite profile. To do that we are going to create a new variable that takes the login ID of the user (using ddwrt:UserLookup on the @Author tag). Once we have that ID we’re going to pass it into a parameter of the mysite URL.
Format the Body to use markup
Your body content probably includes all the markup at the moment. The quick fix to that is adding in a disable-output-escaping="yes" attribute.
Finally, just add some divs with classes to style. Here is my final code.
** Here's my CSS for the itemstyle.xsl styles