Thursday, July 26, 2007

Display CSS Classes within SharePoint

I'm posting this just because I'm getting tired of losing the script... This is a great script written by Microsoft to reveal CSS classes within SharePoint.

Taken from: (

<script language="jscript">
function ClassInfo()
    if (window.event.srcElement.className != null)
        stsclass.innerText = window.event.srcElement.className;
        stsclass.innerText = "";
window.document.body.onmouseover = ClassInfo;</script>
<div style="border-style:solid;border-width:1px; width: 281px; height: 34px;
position: absolute; left: 286px; top: 41px; z-index:15; padding-left:4px;
padding-right:4px; padding-top:2px; padding-bottom:2px; background-color:#EEEEF4">
<p id="stsclasstitle"><font face="Tahoma" id="stsclasstitle">Classname: </font>
<font face="Tahoma"id="stsclass">&#xa0;</font>

Microsoft mentions including this within a ASPX page.  Why mess with that?  Just create a content editor web part, open the source editor, and paste the above code in.

You will notice that the CSS codes now appear in the top middle-left of the screen as you scroll over the SharePoint page.

If you wish to change the location of the box displaying the codes just alter the following to suite your needs: position: absolute; left: 286px; top: 41px; z-index:15

The following example shows it changed to: position: absolute; left: 100px; top: 0px; z-index:15

This will help to alleviate some of the branding stress when you are ready to pull your hair out.  Always remember to check Heather Solomon's GREAT CSS Reference Chart as well:


No comments:

Post a Comment