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>