2

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 !

3

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 >

enter image description here

  • 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.

enter image description here

Output

enter image description here

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.

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)

  • if you need to answer please don't talk about me with this way again, you have the right to answer, but you don't have the right to talk about me, this is not the first time you do that , I have only repeat ms-webpart-titleText with wrong and your answer is not completed based on the question request ! so don't care about my answer and provide your answer without any insult! – Mohamed El-Qassas MVP Dec 30 '16 at 15:07

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.