I was working on a project that used a sharepoint list with a column called "Urgency" that was a choice column with values "Low", "Medium", "High". The client wanted to show the co0lumn in the list view but instead of the text, show a corresponding color - Green for Low, Orange for medium and Red for High. Also I needed to have this configured without downtime or custom code.

I found a great post online here that helped me do exactly that using a calculated column and a content editor webpart, out of the box!

Steps:

• Create a column in the list called "Urgency Level" for example. Its a choice column with values "(1) Low", "(2) Medium", "(3) High"
• Create s column in the list called "Urgency" which will display the color. This is a calculated column. The formula for this column is

          =”<DIV style=’font-weight:bold; font-size:24px; color:”&CHOOSE(RIGHT(LEFT(Urgency Level,2),1),”red”,”orange”,”green”)&”;’>&bull;</DIV>”

• Add a content editor web part to the bottom of the page and copy the below script into it.

<script type="text/javascript">
var theTDs = document.getElementsByTagName("TD");
var i=0;
var TDContent = " ";
while (i < theTDs.length)
{
try
{
TDContent = theTDs[i].innerText || theTDs[i].textContent;
if ((TDContent.indexOf("<DIV") == 0) && (TDContent.indexOf("</DIV>") >= 0)) {
theTDs[i].innerHTML = TDContent;
}
}
catch(err){}
i=i+1;
}
//
// ExpGroupRenderData overwrites the default SharePoint function
// This part is needed for collapsed groupings
//
function ExpGroupRenderData(htmlToRender, groupName, isLoaded)
{
var tbody=document.getElementById("tbod"+groupName+"_");
var wrapDiv=document.createElement("DIV");
wrapDiv.innerHTML="<TABLE><TBODY id=\"tbod"+ groupName+"_\" isLoaded=\""+isLoaded+ "\">"+htmlToRender+"</TBODY></TABLE>";
var theTBODYTDs = wrapDiv.getElementsByTagName("TD");
var j=0;
var TDContent = " ";
while (j < theTBODYTDs.length)
{
try
{
TDContent = theTBODYTDs[j].innerText || theTBODYTDs[j].textContent;
if ((TDContent.indexOf("<DIV") == 0) && (TDContent.indexOf("</DIV>") >= 0)) {
theTBODYTDs[j].innerHTML = TDContent;
}
}
catch(err){}
j=j+1;
}
tbody.parentNode.replaceChild(wrapDiv.firstChild.firstChild,tbody);
}
</script>

Thats it! Here was the result:

 Also, you would have realised that you can do a lot more than add just colors, you can add any html to be rendered including scripts, mouse overs, colors, images...

This is a link to a paper I published as part of my coursework at San Jose State. http://ieeexplore.ieee.org/xpl/freeabs_all.jsp?tp=&arnumber=1286466&isnumber=28682

Abstract:
Current e-commerce Web sites employ designs that are catalog based. Most Web-stores are seen to be fancy displays of product catalogs. The drawback is that customers are easily confused with the number of links available; they have to go through complex navigation and keyword searches to find their products; and solely rely on their own decision to purchase a product. Additionally, they cannot distinguish one retailer from another based on the Web-front; identity of the Web-business is lost. Hence, there is a lack of trust. The human and personal element seen in traditional shopping is also lost when shopping online. This paper discusses and proposes an intelligent solution to these problems. The e-Salesman System (eSS) aims to simulate the human element of traditional shopping for online sales. It is based on a knowledge driven, intelligent model as opposed to a catalog based, and static model. It is supported by a framework that is easily extensible and customizable to the needs of any Web-store.