12/18/2011

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++)

 

 

.

7 comments:

Rudy Rulz said...

Hello Mike,
I have tried both of the java script links (drop Down link with PDf & change the color of the column) but I am unable to see the changes.
My doubt is in a source column I am giving the name of Document Lib. or a list name as ..... from view source i recieved a long url sting which cuntains a doc. lib. name only.

Can you plz guide me where I was wrong .........

.......Thanks alot for these valuable blog

Mike Smith said...

Rudy,

The most common problem is getting the name right.

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.

The name for "Shared Documents" might look like:

"Shared Documents Share a document with the team by adding it to this document library."

The name for a that has a title but no description might look like:

"Training Documents "

Note that there might be a space at the end.

Another possible problem... make sure the Content Editor Web Part is placed below the list web part.

martin uk said...

Hi Mike, I'm not a developer so I am probably doing something silly but I would really like to use this to color multiple columns. I'm searching for summary= in View Source in IE8 SP2007 but the search only returns a match on your script comment to do this. Do you have any ideas or another way I can find web part name? I was also wondering does this slow down the load of the list at all?

Mike Smith said...

Martin,

What kind of web part are you working with? A regular list web part? (Announcements, Tasks, etc)

Mike

martin uk said...

Yes Mike, it's a regular list, All Items view.

martin uk said...

Mike, it is a list I created with about 100 columns, it is a Datasheet view.

Mike Smith said...

Martin,

The Data Sheet View is an ActiveX control and not basic HTML. The code above will not work with a Data Sheet View.

To see that it is an ActiveX control, right-cick on the Access icon (the key) at the top left of the control and click About.

Mike

Note to spammers...

Spammers, don't waste your time... all posts are moderated. If your comment includes unrelated links, is advertising, or just pure spam, it will never be seen.