Skip to main content

The SharePoint Blog

Go Search
Home
About
SharePoint Events
SharePoint Bookshelf
Tools
  

The SharePoint Blog > Categories
Internet Explorer 8.0 Developer Tools – Test CSS Changes by Using a Content Editor Web Part (CEWP)

A new feature baked into Internet Explorer allows finding and changing SharePoint styles a little easier without using FireFox or any additional add-ins. The IE 8 Developer Tools is an "Explorer-Style" browser that lets you click on an area of a SharePoint page and see which style you can modify or override. In this example, I am going to show you how to add a Content Editor Web Part and in the content area, override the styles so you can see how to impact your SharePoint design without modifying the primary CSS file.

First, open IE 8 and either click on “Tools”, then “Developer Tools”, or press F12 to directly access the tool. FromSmall_Toolbar there you should see the following tool bar options.  The primary area we are going to focus on is the “Select Element by Click” (Ctrl + B) tool to get us started. Click on the icon so we can start changing your SharePoint site.

QuickLaunch_HighlightedNext, open your SharePoint site and start hovering over areas you’d like to change. In this case, I am going to select the “Quick Launch” so I can change some elements of that area. The blue border around the “Quick Launch” is going to be our primary target of our changes and this is how the Developer tool identifies the IE8 Dev Toolbar Resultsselected CSS class.

In the results pane, you will see the class that we can manipulate is “ms-quicklaunch” and in the right pane you will see references to the master CSS file, the sub-classes available, and classes that have been overridden (strikeouts). In this case, the biggest impact we will see with changing the Quick Launch will be to hide it. SO we are going to override the classes display property so that it becomes “hidden”.

Next, add a Content Editor Web Part to your page and modify the web part by going into the “Source Editor” and adding some code. Select CEWPPaste this code into the CEWP:

<STYLE TYPE="text/css">

.ms-quicklaunch {

      display: none;

}

</STYLE>

Click “OK” to accept the changes, then exit “Edit Mode” and your changes will then take effect.

Empty Quick Launch 

Voila, it’s hidden (not deleted) and you can now move on to other classes.

This is just the tip of the iceberg for all the changes that you can test and experiment with on a test site (always test on a local development environment). You can change the way web part background colors appear or change the Web Part title background color, or hide other elements of the SharePoint page. These changes only impact one page of your site, but you can take these changes and create an alternate CSS files to utilize or work with your development team to have the changes integrated into their design. I find this to be a quick way to test designs and love the built-in functionality that I had previously used FireFox extensions to accomplish the same feat.

Remember, once you remove the CEWP, the style no longer overrides the CSS used in SharePoint so if there is an issue, just delete the CEWP from the page to have the site inherit the style from the default CSS file.

This is a pretty straight-forward process and you can see the basics of how to use the IE 8 tool and will save users and developers a time trying to figure out which class they can change to impact their pages.