magritton
8/2/2016 - 3:08 PM

This code snippet changes all the colors of a standard list view webpart using CSS and the webpart's ID

This code snippet changes all the colors of a standard list view webpart using CSS and the webpart's ID

<style type="text/css">

/* === Title bar CSS === */

/* TR - title bar for web part */
#MSOZoneCell_WebPartWPQ2 .ms-WPHeader 
{
  background-color:yellow;
}

/*  H3 - Text in title bar of web part */
#MSOZoneCell_WebPartWPQ2 .ms-WPTitle a    
{
  color:red;
  //font-family:"Comic Sans MS";
  //font-size:24pt;
}

/* TD - far left and far right (corner) cells of title bar - useful for round corner tricks */
#MSOZoneCell_WebPartWPQ2 .ms-wpTdSpace
{
  /* background-image:url(' someimagepath '); */
  //width:30px !important;
  background-color:yellow;
}

/* web part check box */
#MSOZoneCell_WebPartWPQ2 .ms-WPHeaderCbxHidden  
{
  display:none;    
}


/* === Web part background CSS === */

/*  TD - background for all but title bar of web part */
#MSOZoneCell_WebPartWPQ2.s4-wpcell  
{
  background-color:yellow;
  /* border-style:dashed; */
  //border-style:dashed;
  //border-width:5px;
}

/* TD - paging area (i.e. 1 - 5) */
#MSOZoneCell_WebPartWPQ2 .ms-bottompaging td
{
    background-color:yellow !important;
}    

/* hide the gray line above "add new" link */    
#MSOZoneCell_WebPartWPQ2 .ms-partline
{
  display:none;
}

/* selected (clicked) web part background */    
#MSOZoneCell_WebPartWPQ2.s4-wpActive
{
  background-color:yellow;
  border-color:red;
    /* border-style:dotted; */
}    


/* === Column headings === */

/* color for sortable column headings */
#MSOZoneCell_WebPartWPQ2 .ms-vh-div a 
{
  color:red !important;
}
/* color for non-sortable column headings */
#MSOZoneCell_WebPartWPQ2 .ms-vh-div 
{
  color:red !important;
}


/* === List text CSS === */

/* item description text */
#MSOZoneCell_WebPartWPQ2 .ms-vb2, 
#MSOZoneCell_WebPartWPQ2 .ms-vb-user a, 
#MSOZoneCell_WebPartWPQ2 .ms-vb-title a
{
  color:red !important;
  //font-size:12pt;
}

/*  TR - alternating (#2,#4,#6...) row of web part */
#MSOZoneCell_WebPartWPQ2 .ms-alternating  
{
  background-color:yellow;
}

</style>