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

  • 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
    Tuesday, August 13, 2013 1:55 PM
    Moderator

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
    Tuesday, August 13, 2013 1:55 PM
    Moderator
  • Thanks for your time Patrick. It worked perfectly.
    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 Page

    Thanks,

    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,

    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

    Tuesday, June 3, 2014 11:16 AM
    Moderator
  • 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
  • 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


    Wednesday, November 5, 2014 1:37 AM
    Moderator
  • 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