Expose the Web Part Title in the XSL of your CQWP

The last couple of days, I have been busy with customizing the OOTB Content by Query Web Part and Summary Links Web Part from SharePoint 2010. I wanted to get rid of the default look and chrome and present my data in a nice box with rounded corners and a title with matches the rest of my styles.
After 2 days of trying, I can say… the result is too my liking. 🙂

The first box is a Summary Links Web Part and the box below it, is a Content by Query Web Part.
To get rid of the default chrome, I simply set it to None in the Web Part properties.

 

There are not many references available on how to accomplish this kind of customization. You can find a lot of information on how to change the OOTB CSS styles for webparts but this basically changes the style of ALL webparts. I didn’t wanted to do this.

Creating the boxes is not that difficult. I added some DIV’s with custom CSS styles to my custom ContentQueryMain.XSL to encapsulate the existing rendering with my custom style.

The thing I struggled the most with, was the custom title. I wanted to give the user the possibility to change this title. Each Web Part has a title by default, so why not try to use this title….

The problem with these Web Parts is that this title is not available by default in the XSL files.

Luckily, there is a property called “ParameterBindings” which gives you the possibility to pass custom properties to the webpart when it’s rendered which you can access in the XSL.

 

 

 

I added the following into my custom CQWP and Summary Links Web Parts definitions:

This binding exposes the WebPart title to the webpart.
To use this property, you simply add the following parameter to the top of the MainXsl file of your webpart:

You can then use this parameter to do with it whatever you want.