0

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.

Example of Formatted Header

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!

0

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!

  • Thanks for the quick response Chad! I'll try it out shortly. :) – Amy Jul 6 '18 at 15:38
  • That's getting me closer... I used '#WebPartTitleWPQ6 h2' and the .css code and it colored the Title Text, but I'd like the whole header that color. – Amy Jul 6 '18 at 18:36
  • Let me clarify... I used that suggestion because it looked appropriate in the DOM but it only fills the background behind the Title, not the whole chrome title (is that right?). When I styled the background using <style> tags and targeting WPQ6, I used #MSOZoneCell_WebPartWPQ6 .ms-web-part-chrome-title and it works to get the pic I posted, but when I try this in the jquery code, there is no fill. :/ – Amy Jul 6 '18 at 18:44
  • Try using '#WebPartWPQ6_ChromeTitle' or '#MSOZoneCell_WebPartWPQ6 .ms-web-part-chrome-title' selectors along with the .css method mentioned above. – Chad Jul 6 '18 at 19:34
  • '#WebPartWPQ6_ChromeTitle' worked! I had tried that earlier when I was bungling through the code myself but I didn't know about the .css part of the code. Thanks so much for your help Chad! :) – Amy Jul 9 '18 at 14:23

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.