Identifying Styles in Sharepoint Services 3.0

Sharepoint has moved on leaps and bounds with the release of SPS 3.0, but it's still a pig when it comes to customisation. If you're changing the look and feel of a theme in SPS, you've got a tough time ahead! If it's available to you, using SPS designer aids with this greatly, but regardless, one of the hardest jobs in customising a theme is knowing which of the hundreds of styles apply to an element you want to change.

And so, in rolls the following code that you can re-use. By adding a content editor web part and using the source editor you can paste the following code in and have a web part that shows you the full CSS hierarchy of any element you move your mouse over:

<table border="1" width="100%">
<td valign="top" width="100%">
    <div id="spsClassTitle">TITLE</div>
    <div id="spsClassTree" style="height:300px;">CSS</div>
  </td>
</tr>
</table>

<script language="JavaScript">
function GetSPSClasses()
{
  var currElement = window.event.srcElement;
  var classTree = "";
  var Style1 = "color:green;";
  var Style2 = "color:red;";
  var CurrentStyle = Style1;
  
  if( currElement != null )
  {
    spsClassTitle.innerText = "Styles under the cursor";
    if( currElement.id != null && currElement.id != "" )
      spsClassTitle.innerText += "(" + currElement.id + ")";
      

    while( currElement != null )
    {
      if(currElement.className != null && currElement.className != "")
      {
        var newEntry = "<div style=\"" + CurrentStyle + "\"><B>" +
                       currElement.tagName + ":</B><BR/>" +
                       currElement.className + "</div>"
        if( classTree != "" )
          classTree = newEntry + classTree;
        else
          classTree = newEntry;

        if( CurrentStyle == Style1 ) CurrentStyle = Style2;
        else CurrentStyle = Style1;
      }

      currElement = currElement.parentElement;
      
    }
    
    spsClassTree.innerHTML = classTree;
  }
  else
  {
    spsClassTitle.innerText = "No styles under cursor";
    spsClassTree.innerText = "";
  }
}

window.document.body.onmouseover = GetSPSClasses;
</script>