1

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.

  • Are you trying to format your web part title? – Venkat Konjeti Jun 1 '17 at 2:07
  • @VenkatKonjeti -Yes, I am trying to format my web part title. I want the web part title to appear within a Bootstrap panel heading and the custom list items to appear within the panel body (see this example). – Jennifer Bartolome Jun 1 '17 at 14:47
0

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 enter image description here

  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;
    }
  1. 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;
    }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.