The developer tool bar is one of the most powerful weapons in your arsenal when it comes to SharePoint branding. Digging down into the master pages and numerous style sheets to determine what classes are at work is so important, but if you are new to the IE Developer Tool Bar it’s not always obvious how to make it work for you. With just a couple of simple steps you can pick apart the SharePoint style sheet properties like a pro.
Can’t us it if it’s not installed! The tool bar is not part of the standard browser install so you are going to need to download and install it. You can get it here…
After installing the tool bar you can launch it by opening IE. In IE 8 go to Tools>Developer Tools. This should launch a window with the tool running.
Click on the window icon
 in the upper right corner of the tool to “pin” the tool to your browser window. Now you’re ready to work!Â
Open your SharePoint home page. Now, the most obvious thing to do would be to click on the CSS tab…right? Well that gets’s you a nice check list of all the classes that are current at work on the page but that hardly useful. What if you click on View>Class and ID Information? This option will label all the classes being used but the some many of the classes used in SharePoint are overlapping that this view is aweful, OMG make it stop!
No, the best thing to do is click on the HTML tab. Next, select the arrow icon which will allow you to select parts of the page without activating the links. Select any area of the page. I selected that Site Actions button and not only are the style names displayed in the window below, they are also nested showing you the relationship of each style one to another. Ladies and gentleman this is a big deal and could potentially save hours of searching through CSS files or view source.
Good luck with your project!
Leave a Reply