Change CSS of a Specific Content Query Web Part

A TechNet member recently posted a question about increasing the font size of a specific Content Query Web Part (CQWP) on a SharePoint 2013 Page. The intent was to target one of many CQWP on the page and specifically not apply this change site-wide.

Using jQuery we can easily target the Web Part and modify the appropriate CSS:
1. Add a Content Editor Web Part to your page and select “Edit Source” in the ribbon
2. Paste the following code into your window:

<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript" />
<script type="text/javascript">
$(document).ready(function () {
	$(".ms-webpart-chrome-title span:contains('My Content Query Web Part Title')").parent().parent().parent().parent().parent().children(".ms-WPBody").css("font-size", "25px");
});
</script>

3. Replace ‘My Content Query Web Part Title’ with the title of your Web Part
4. Save & Close

It’s also recommended to save & upload the JavaScript file http://code.jquery.com/jquery-1.10.2.min.js into your SharePoint Environment, and reference your copy of it.

Leave a Reply