Sharepoint 2013 - Coloring The Web Part Title Background and changing Font Color

Question

I am not a very experienced coder. I am attempting to change the Announcement web part title to have a background color of black and also change the font color.

I have turned on Content Editor and added the code:

<style>
TR.ms-WPHeader {BACKGROUND-COLOR: #000000}
</style>

If I could get any help with this that would great. Thanks.

Answer 1

Use

<style>

#TR.ms-WPHeader

 {BACKGROUND-COLOR: #000000  !important;

}

</style>

Answer 2

Hi. I went to Content editor and edited web part. I went to edit source and put in your code and saved and it still isn't quite working yet.

ttp://i.imgur.com/vLmfurI.jpg

Thanks.

Answer 3

Hi Jack,

By using IE developer tool(F12), we can find the web part's title in source code and it is like <span title="xxx" id="xxxx">. Under this <span>, there is a <h2> tag whose style will affect the title's style. Then we can write this code snippet in a Content Editor Web Part in the same page like this:

<style type="text/css">
#WebPartTitleWPQ3 h2
{
   background:red !important; 
   color:gray !important;
}
</style>

best regards

Answer 4

Thanks for your time Patrick. It worked perfectly.

Answer 5

To change the title of all webparts on a page then follow these steps -

1 - Edit Page
2 - Add a Script Editor and click "Edit Webpart"
3 - click "EDIT SNIPPET"
4 - On "EMBED" dialog paste the following code - 

<style type="text/css">
  .ms-webpart-titleText.ms-webpart-titleText, .ms-webpart-titleText > a {
   background-color: darkblue; 
   font-size: 18px;   
   font-weight: bold; 
   color: white;
   padding: 5px 5px;}
</style>

5 - On Script Editor edit webpart properties Click on "Apply" or "OK"
6 - Save the Page

Thanks,

Suhaib

Answer 6

Hi Suhaib Khan,

Your method works perfectly for me! Thanks! But still, could you, please, tell me how to precise one particular webpart. The font changes apply to all my home page webpart titles. I'd like them to apply to one particular home page webpart.

Also, what is the code to change the font to Calibri?

Thanks in advance!

Answer 7

Hi,

For this new question, it is recommended to post in a new thread which would make others easier to focus on one question in a single thread.

Best regards

---

Patrick Liang
TechNet Community Support

Answer 8

Hi Patrick,

Here is my code. I was able to change the Background color of my web part but I can't change the Title of the Web part. Can you please point me to the right direction?

<style type="text/css">
#WebPartTitleWPQ2 {
	BACKGROUND-COLOR: #d2492a; FONT-FAMILY: "Verdana"; COLOR: #ffffff; FONT-SIZE: 16pt
}</style>

Answer 9

Hi Cherry,

As the original question in this thread has been answered, it is recommended that you open a new thread for your question, it would be easier for others to help you find a quick solution.

Best regards,

Patrick

---

Patrick Liang
TechNet Community Support

Answer 10

Patrick, this works for me when I'm in the Page Edit mode, but as soon as I save the page, the title's font color reverts to black. The background remains the color I selected, but the font color does not stay white, which is what I want. Here's my CSS:

<style>
#WebPartWPQ6 .ms-viewheadertr { DISPLAY: none}
#WebPartTitleWPQ6 h2 {background-color:#0072c5 !important ; color:white !important}
</style>

Any idea why the font color doesn't "stick" when I save the page?

Thanks.

Answer 11

Never mind, figured it out. It's because Application Web Parts in SP2013 make the Web Part title a link, and so you  have to also adjust the hover color. When I added the code provided by Chuck LaForte on the Remove Link from title of List web part TechNet question, the color held

Answer 12

Thank you very much. It helped my time. 

Answer 13

Hi Patrick,

I am into the same situation, like to highlight the title of announcement web part. Give me some tips

Answer 14

With that we only color Title Bar, what about Check box and chevron. I tried this but it never works:

#WebPartTitleWPQ2 .ms-WPHeader{

    background-color: yellowgreen;
        color: #fff;

}

Do you know why, i am just trying to color WPHeader inside that ID?

Thank You

Answer 15

Yes! THIS.

Thank you, Suhaib, this is exactly what I was looking for.

So simple, but so difficult to find.

---

Keith Vollero