SharePoint: Change the color of a web part column

 

Over in my article on color coding lists I got this question:

“Can you post a snippet of code that shows how to apply color to a particular column - the entire column (i.e., column 7)”

Well, here’s two possible solutions. And you can change anything about the column by changing the CSS. Set the text to bold, change the font family or font size, or add borders.

 

Change the color of a web part column using CSS

This is the more elegant solution, but it will not work with Internet Explorer 6, so it will not work for SharePoint 2007, or where you still have IE 6 users.

Note: the line starting with “table[“ and ending with “td + td + td” is all one line.

<style>

table[summary="Shared Documents Share a document with the team by adding it to this
 document library."].ms-listviewtable  tr + tr td:first-child + td + td + td
{
    background:orange;
}

</style>

Steps:

1. Add this style to a Content Editor Web Part
   or edit the page in SharePoint Designer and add it just before the end of the PlaceHoldMain area.
    
2. Edit the text in “summary=” section to add the name of your list web part. To find the name, display the page with the web part in a browser and search for “summary=” and copy the text between the quotes.
    
3. Edit the “td + td + td” to select your column (one td per column)
   If you want to color more than one column, copy the entire selector and adjust the number of td’s. Something like this:  (note the comma)
   
   table[summary="Shared Documents Share a document with the team by adding it to this document library."].ms-listviewtable tr + tr td:first-child + td + td + td ,
   table[summary="Shared Documents Share a document with the team by adding it to this document library."].ms-listviewtable tr + tr td:first-child + td + td + td + td + td  
   {
      background:orange;
   }
   

Change the color of a web part column using JavaScript

This solution should work for all browser versions (crossing fingers…), but you will need to test it in the browsers used by your visitors. This probably could be reduced to one line using jQuery.

Note: the line starting with “var webpartName”“ and ending with “library.” is all one line.

<script>

// from TechTrainingNotes.blogspot.com

// The web part name can be found by viewing the source of the page and
// searching for "summary="
var webpartName = "Shared Documents Share a document with the team by adding it 
to this document library.";

// first column is 0
// in SP 2010 the first column may be check boxes
var columnToChange = 5;

// find the web part's table
var allTables = document.getElementsByTagName("TABLE");
for (var i=1;i<allTables.length;i++)
{ 
  if (allTables[i].summary == webpartName)
  {
    // loop through the rows to change the column
    // set j=0 to include the column heading or j=1 to skip the heading
    var theTable = allTables[i];
    for (var j=0; j<theTable.rows.length; j++)
    {
      // any style attribute of the cell can now be changed
      theTable.rows[j].cells[columnToChange].style.background="yellow";
    }
  }
}

</script>

Steps:

1. Add this JavaScript to a Content Editor Web Part and move the web part below the web part to add the color to
      or
   edit the page in SharePoint Designer and add the JavaScript just before the end of the PlaceHolderMain area.
    
2. Edit the text in “webpartName =” section to add the name of your list web part. Display the page with the web part in a browser and search for “summary=” and copy the text between the quotes.
    
3. Edit the column number to change (var columnToChange = 5; ). The first column is column 0.
   
   If you want to change multiple columns it might be easier to hard code the column numbers. For example, to change columns 2, 5 and 8: (remember to count from zero)
   
   Change:
     theTable.rows[j].cells[columnToChange].style.background="yellow";
   To:
     theTable.rows[j].cells[2].style.background="yellow";
     theTable.rows[j].cells[5].style.background="yellow";
     theTable.rows[j].cells[8].style.background="yellow";  
    
4. To change the color of the column heading, change the FOR counter to zero:
        for (var i=0;i<allTables.length;i++)

 

 

.