Answered by:
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.
Monday, August 12, 2013 2:57 PM
Answers
-
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- Proposed as answer by mfharvey Wednesday, August 14, 2013 7:42 PM
- Marked as answer by Tobias ZimmergrenMVP Tuesday, August 20, 2013 6:49 AM
Tuesday, August 13, 2013 1:55 PM
All replies
-
Use
<style>
#TR.ms-WPHeader
{BACKGROUND-COLOR: #000000 !important;
}
</style>
Tuesday, August 13, 2013 5:53 AM -
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.
Tuesday, August 13, 2013 1:46 PM -
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- Proposed as answer by mfharvey Wednesday, August 14, 2013 7:42 PM
- Marked as answer by Tobias ZimmergrenMVP Tuesday, August 20, 2013 6:49 AM
Tuesday, August 13, 2013 1:55 PM -
Thanks for your time Patrick. It worked perfectly.
- Proposed as answer by SharePointGuy123 Wednesday, August 28, 2013 12:18 PM
Tuesday, August 13, 2013 3:29 PM -
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 PageThanks,
Suhaib
- Proposed as answer by KVollero Thursday, February 28, 2019 3:23 PM
Monday, January 27, 2014 2:36 PM -
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!Tuesday, June 3, 2014 11:04 AM -
-
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>
- Edited by CherryP Tuesday, November 4, 2014 9:43 PM
Tuesday, November 4, 2014 9:27 PM -
-
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.
Friday, November 6, 2015 9:12 PM -
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
Friday, November 6, 2015 9:40 PM -
Thank you very much. It helped my time.Friday, March 3, 2017 10:59 AM
-
Hi Patrick,
I am into the same situation, like to highlight the title of announcement web part. Give me some tips
Tuesday, August 1, 2017 6:47 PM -
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
Wednesday, October 4, 2017 6:34 PM -
Yes! THIS.
Thank you, Suhaib, this is exactly what I was looking for.
So simple, but so difficult to find.
Keith Vollero
Thursday, February 28, 2019 3:24 PM