Web Part heading colour change

Question

I need to change the heading (background and Font) colour coding of each web part that will add in site. I tried it with SharePoint Color palette. It can only change web part heading.

I guess, I need to change in the Master page that !

does any one have codes, where to change what !

Answer 1

Try the following code to change the color of web part header title and the background color of web part header

<style>
.ms-webpart-titleText.ms-webpart-titleText
{
 color:white ! important;
}

.js-webpart-titleCell
{
background-color:blue ! important;
}
</style>

To apply this code for all web part, if you have a publishing site, try the following

• Create a new CSS file, add the above code > upload it to style library.
• Go to site setting > Look and Feel > Master Page >

• At Site Master Page Settings > Scroll down till Alternate CSS URL
• Check Specify a CSS file to be used by this site and all sites that inherit from it:
• Browse to your CSS file
• Check Reset all subsites to inherit this alternate CSS URL if you need to apply CSS for all subsites.

Output

if you don't have publishing site, > take a copy from your current master page > edit the current master page > paste the above code in head section> save and publish the master page as a major version.

Answer 2

if one writes

.ms-webpart-titleText.ms-webpart-titleText  {
  color:white ! important;
}

One clearly has no clue how CSS Selectors work

The double class Selector was copied from Corev15.css,
it shows that some Microsoft developer ran into trouble styling .ms-webpart-titleText elements and increased its Specificity by repeating the class Selector so that its style definition would be applied over any later defined CSS rule with a single class .ms-webpart-titleText Selector.

That Developer did not use !important to solve the problem because he/she understood what CSS Specificity does.

Applying !important is the most brutal way of overloading CSS and destroys any capability of re-styling the element.
If you use this in a real WebDevelopment team you will get some serious flack from real designers.

In this case !important is preventing the .ms-webpart-titleText > a color from being applied.
That is the rule coloring the Title

So use the proper CSS selector:

.ms-webpart-titleText > a  {
  color:white;
}

when your CSS loads after Corev15.css

Or use

H2.ms-webpart-titleText > a  {
  color:white;
}

when you want your CSS to trump Microsofts Specificity
(and be applied no matter when your CSS loads)

• https://css-tricks.com/specifics-on-css-specificity/