SharePoint Blogs / SharePoint University
SharePoint Blogs and SharePoint University - all in one place!
Need SharePoint Training? Attend a SharePoint Bootcamp!

Please delete cookies related to sharepointblogs.com and sharepointu.com to resolve login issues!

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: (http://msdn2.microsoft.com/en-us/library/ms438349.aspx)

<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>
 
<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>
</p></div>

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: http://www.heathersolomon.com/content/sp07cssreference.htm

 


Posted 07-26-2007 7:55 PM by Jeff Holliday

Comments

Peter {faa780ce-0f0a-4c28-81d2-3667b71287fd} wrote re: Display CSS Classes within SharePoint
on 07-26-2007 11:00 PM

I hate to say this, but, isn't all this CSS-revealing functionality built into the Firefox Web Developer Toolbar add-in ( addons.mozilla.org/.../60 )? I.e., without having to use Javascript to get at the answer?

Jeff Holliday wrote re: Display CSS Classes within SharePoint
on 07-26-2007 11:05 PM

I agree with you Peter to a point.  I don't care how compatible Microsoft has stated that Non-IE browsers are with MOSS there are still items that look different depending on the browser being used.

Àlex wrote re: Display CSS Classes within SharePoint
on 07-27-2007 2:21 AM

Although pages are not rendered in the same way, with firefox you can use the FireBug add-in. It let you edit the page "on the fly" (CSS, HTML and javascript) and when you have the desired result you can pass the changes to SharePoint Designer. A great tool!

Links (7/29/2007) « Steve Pietrek’s SharePoint Stuff wrote Links (7/29/2007) &laquo; Steve Pietrek&#8217;s SharePoint Stuff
on 07-29-2007 7:35 PM

Pingback from  Links (7/29/2007) &laquo; Steve Pietrek&#8217;s SharePoint Stuff

Albert wrote re: Display CSS Classes within SharePoint
on 07-30-2007 4:04 AM

Only class names... duh

Oskar Austegard wrote re: Display CSS Classes within SharePoint
on 07-30-2007 1:18 PM

Late to the party here, but I have to agree with Peter: get the IE Dev toolbar or the web developer toolbar/firebug for firefox.  While Javascript and dhtml is fun and all, the toolbars give you MUCH more information for about the same level of effort.

*** wrote re: Display CSS Classes within SharePoint
on 07-31-2007 11:23 AM

Firefox is my preferred browser, but it is not showing the Web Part CSS mods I have made properly. The source editor does not pop up in a new window either, so I cannot see what I am editing in Firefox...

Also, the script referenced here works on about 50% of the content. Things like Web Part Headers and prebuilt webpart columns within say, a To Do list are not displaying properties.

I am not saying that this script is entirely unuseful, but is not the catch all for style ID. I recommend use of this script in combination with the reference chart located at: www.heathersolomon.com/.../sp07cssreference.htm

One last thing (sorry to be long winded) is that I believe there are special cases that override some styles. I have some that are displaying correctly in 'edit mode' but once exited to view normally, some styles are not remaining applied. There simply has to be a better way.

*** wrote re: Display CSS Classes within SharePoint
on 07-31-2007 11:24 AM

apparently i am not allowed to use my name... m e r d.... it has been ***'d out. sorry guys.

groftekanten wrote re: Display CSS Classes within SharePoint
on 03-26-2008 3:35 AM

Thank you so much for all the useful information I found here :-) both to you and to Peter for the information about how to reveal css in firefox.

Add a Comment

(required)  
(optional)
(required)  
Remember Me?
Need SharePoint Training? Attend a SharePoint Bootcamp!
Posts (c) their respective authors. Everything else (c) 2009 SharePoint Experts, Inc.