Change Web Part Heading Background Based on Month

Question

I have a filtered list view web part on my SharePoint page that shows only the current month's birthdays. I searched online and was able to find code to automatically change the title to "Current Month's Birthdays!" based on the date (modified code below). Thanks Dipendra Bhowmick!

<script src="https://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){         
$('#WebPartTitleWPQ6 h2 a nobr span').text('');
var mnth=new Array(12);
mnth[0]="January";
mnth[1]="February";
mnth[2]="March";
mnth[3]="April";
mnth[4]="May";
mnth[5]="June";
mnth[6]="July";
mnth[7]="August";
mnth[8]="September";
mnth[9]="October";
mnth[10]="November";
mnth[11]="December";
var monthofyear = mnth[new Date().getMonth()];
$('#WebPartCaptionWPQ6').text(monthofyear + " Birthdays!");
</script>

I'd also like to change the background color of the web part based on the current month so it will match the Title image.

I am "not allowed" to use SharePoint Designer so have used code to do the formatting in the image above. I'd just rather not have to update it every month.

I modified the code here to create an array of colors that will pull the appropriate color based on the date, but I'm not very experienced with JQuery or JavaScript and have only recently discovered DOM Explorer so I'm struggling to find the correct syntax to identify the web part header background element. Any help is appreciated!

Answer 1

The jquery you're looking for is:

$('#WebPartCaptionWPQ6').css('background-color', 'red'); // hex value instead of red can be used as well

The #WebPartCaptionWPQ6 might not be where the background color is actually set. This portion is called the 'selector' or the 'query'. Essentially it tells jquery to find that specific element on the page.

You can use Chrome dev tools (F12) and right click on your text "July Birthdays" and choose "Inspect Element". Then find the element using the DOM that has the blue background color on it. That element is what you need to target in your query. If it doesn't have an ID like 'WebPartCaptionWPQ6' you can do chained queries to find elements by their type... as you've done in your first query:

'#WebPartTitleWPQ6 h2 a nobr span'

Assuming the 'span' inside those other elements is what has the background color on it, that would be your query. If h2 has the background color, it would look like this:

'#WebPartTitleWPQ6 h2'

Hope that makes sense!