IE8 Developer tools to find Styles in corev4.css

The easy way to determine what CSS is affecting SharePoint elements on you page. You’ve decided to brand your SharePoint website, you look into corev4.css – 5000 lines, good luck. Hey, there is an easier way, use the IE8 Developer Tools and you can quickly determine which css is affecting the elements on the page. Also you can use the ‘Skewer Click’ function in SharePoint Designer 2010. Here’s how to go about using the IE8 Tools:

IE8 Developer Tools

(These are included in every copy of Internet Explorer 8, to open them click Tools > Developer Tools, or just hit F12)



1. Load up your SharePoint site in IE8.

2. Activate the Developer Tools and use the Select Element by Click feature, Find > Select Element by Click. This allows you to select a section of your page that has css affecting it (virtually everything). Move your mouse around and you’ll see blue rectangles around the areas of design. See the image below where I have selected the top bar:

 

3. After clicking the area, you can see that the coresponding <div> is highlighted HTML side of the Developer Tools like so:

4. Now the cool part, you can see the CSS affecting this element on hte Style side of the Developer Tools window:

 You can see that the CSS from the Body is being overridden by the .ms-cui-ribbon and the .ms-cui-topBar2 styles.

5. Even cooler is that you can make temporary changes to the css in the style window to see the affects in the SharePoint Site. Here I’ve changed the border-bottom to a red color.

 

And here is what you see in IE8 as a result:

 Of course this change will only be temporary and when you reload the page all changes will be gone but you can use this to determine hard to find styles in the corev4.css way easier.

SharePoint Foundation Master Page CSS

I recently had to take a WSS 3.o masterpage and upgrade it for use in SharePoint Foundation. Simple enough, following the helpful post here Upgrading an Existing Master Page to the SharePoint Foundation Master Page to ensure that I have all the necessary controls on my page. This post from Tom Wilson was also very helpful determining the elements that make up the new ribbon, Ribbon Customization: Changing Placement, Look and Behavior. The following is just a table of the CSS overrides that you may like to use to modify some of the styles, backgrounds, or borders to suit your brand.

SharePoint 2010 CSS Chart (Well at least a start anyway!)