Modify Webpart Title Color, background color, Header background,

Hi All, Recently I had to work on some custom css changes in my team site home page. I need to change the Color of the Webpart titles, background color of the total webpart and header. To achieve these things easily ,I first had to go to developer tools (short cut : F12 or Tools -->Internet options -->Developer Tools) of the required page and then understood what the css classes were written in CoreV4.css file for existing styles of the web part and the page. We need to override these css classes in our custome code in master page or CEWP. Here is my work for different categories.

Code for changing the color of Webpart title

 <style type="text/css">
  
 .ms-WPTitle {
  
      COLOR: #d47600; FONT-WEIGHT: bold
  
 }
  
 .ms-WPTitle A:link {
  
      COLOR: #d47600; FONT-WEIGHT: bold
  
 }
  
 .ms-WPTitle A:visited {
  
      COLOR: #d47600; FONT-WEIGHT: bold
  
 }
  
 }
  

Code for Changing webpart header background color

 <style type="text/css">
  
 .ms-WPHeader {

BACKGROUND-COLOR:Trasperant;

}
}

Code for Changing the Total Webpart background color: If you want to change the background color for a required webparts in the page, you should first locate the id of the webpart. This could be found by using again developer tools, open developer tools, select "Find Element by click" on menu, switch to your site page, then locate the webpart with mouse and then identify ID highlighted in Developer tools. Here is the script for that changing color:

 <style type="text/css">
  
 .s4-wpcell#MSOZoneCell_WebPartWPQ7 {

BACKGROUND-COLOR:blue
}
}

In the above snippet,.s4-wpcell is the css class for total webpart box and we are applying only for the webpart with the id "MSOZoneCell_WebPartWPQ7 ". if you want to change for all the webparts, you could directly use the single css code like here

 <style type="text/css">
  
 .s4-wpcell{

BACKGROUND-COLOR:blue
}
}

Code for removing the headers of list/document libraries

 <style type="text/css">
  
 .ms-viewheadertr{

 Display:none;
}
}  

Code for removing left quick launch panel

 <style type="text/css">
  
 #s4-leftpanel{

 Display:none;

}
}  

You can apply directly in CEWP for quick testing of these css snippets.
For adding the styles in master page, it would be recommended to maintain a separate style sheet in styles library of the top level site and give that style sheet reference in master page head tag like below.

 <link rel="stylesheet" type="text/css" href="../../style%20library/CustomCSS/Mystyles.css" />