Identify CSS Classes used within SharePoint (MOSS)

Anyone that has had the pleasure of styling a SharePoint site, whether WSS 2, WSS 3, SPS 2003, or MOSS 2007 has found the utter joy of working through a lengthy CSS implentation.  In fact, one of the designers that I have worked with for years absolutely adores the naming convention and sheer number of classes that are applied throughout a OOTB implementation of SharePoint.

I have found two very useful methods for finding an applied class in a SharePoint (or any) site.

Method 1: The Internet Explorer Developer Toolbar.  The IE Developer Toolbar provides a host of useful features, but I find the following the most useful in this instance:

  • Style Tracer: Right mouse click on a style value for an element and select Style Tracer to find the style rule that is effecting that value.
  • CSS Selector Matches: View a report of all style rules set and how many times they are used on the current page.

Of course, there is a Firefox Web Developer Add-on available that provides similar functionality.

Method 2: Class Info Script.  You can add the following code to the BODY element of any ASPX page usedto identify which class is applied to a specified element.  When this code is added, a ToolTip appears when the pointer is passed over the UI, indicating which class is being used.

<script language="jscript">
function ClassInfo(){
if (window.event.srcElement.className != null)
{ stsclass.innerText = window.event.srcElement.className; }
else { stsclass.innerText = ""  }
}
window.document.body.onmouseover = ClassInfo;
</script>

By John Stover

John Stover Bio.

Leave a comment

Your email address will not be published. Required fields are marked *