Display WebPart title using an ItemStyle.xls custom template and Content Query Web Part (CQWP)

Question

I'm working on the SharePoint Online environment on a publishing site where I would like to add the following:

• Content Query Web Part (CQWP) connected to a custom list
• Customized Item Style template

What I've done thus far is as follows:

1. Created a custom list
2. Added the CQWP onto my page and configured it to connect to the custom list
3. Exported the CQWP and configured the 'CommonViewFields' to take my custom list columns
4. Modified the ItemStyle.xsl file with a custom template called 'MyCustomTemplate'

The CQWP works fine, but I was wondering, for modularity reasons, if I can add the web part title such that it is formatted and styled with my custom markup. Is this possible? If so, how is it done? Via the ItemStyle.xsl template or elsewhere?

Thank you.

Answer 1

The itemstyle.xsl is to customize your web part body items.

We have a POC which matches your design. It has been designed for styling all our web parts in a site. It has been customized with few styles

1. To apply these styles to all web parts on a site. You will need to add below styles in common css file which has been referred to master page.

    .ms-webpartzone-cell {
        border: 1px solid #ccc;
        border-radius: 10px;
    }

    .ms-webpart-chrome-title {
        background-color: #a28e5c;
        border-radius: 10px 10px 0 0;
        padding-left: 10px;
    }

2. To apply for a only one web part you need to identify the web part id and add below styles to Script Editor web part which should be on the same page as your Content Query web part.

    #MSOZoneCell_WebPartWPQ3 {
        border: 1px solid #ccc;
        border-radius: 10px;
    }

    #MSOZoneCell_WebPartWPQ3 .ms-webpart-chrome-title {
        background-color: #a28e5c;
        border-radius: 10px 10px 0 0;
        padding-left: 10px;
    }