Exercise 1: Using Internet Explorer Developer Tools to Identify SharePoint Styles

Task 1 – Identify Top Banner Style Using IE Developer Tools

In this task, you will use the Internet Explorer Developer Tools to view the source of a web page in your SharePoint site and identify the appropriate CSS style to override to set a new banner background image.

1. Launch Internet Explorer.
2. Navigate to your top-level SharePoint site, e.g., https://intranet.contoso.com.
3. Press F12 to open the Developer Tools window.
   Note:

   The IE Developer Tools allow you to inspect and debug web pages. This includes viewing and editing the HTML and CSS source, profiling and debugging JavaScript and more. For full details on the IE Developer Tools see the MSDN article Discovering Internet Explorer Developer Tools.

4. If the Developer Tools open in a separate window, click the Pin button in the top right corner of the window to pin the tools to the bottom of the Internet Explorer window.

5. See that the source for the page has been loaded in the HTML tab of the Developer Tools window. Expand the nodes of the document tree to see the page structure.

6. Click on the CSS tab and open the dropdown. This shows you the different style sheets that have been loaded for the page including the main SharePoint style sheet, corev4.css. Selecting a style sheet in the dropdown will show the styles defined.

7. The Developer Tools allow you quickly find the page source that corresponds to the area you to click in the browser. The element hovered over by the mouse will be outlined in blue as you move the mouse and clicking will select the element and its source. To do this in the Developer Tools window, click Find >> Select Element by Click.

8. To identify the area that makes up the banner, in Internet Explorer, position your mouse to the left of the site logo and click when the blue box outlines the header banner area.

9. Note that the div element with the class s4-title in the HTML tab of the Developer Tools window is now selected. This div makes up the banner area that we want to restyle.

10. Note that in the Style window you can see that the background url image is set to /_layouts/images/bgximg.png and that this style was defined in corev4.css. In the next exercise, you will override this style to set a new background image.

Task 2 – Identify and Change Left Navigation Style Using IE Developer Tools

In this task, you will find the appropriate style to override to set a new background color for the left navigation and change the color using the IE Developer Tools.

1. In the Developer Tools window, enter “s4-leftpanel-content” into the Search HTML box and click the Search button.

2. The div element with the id s4-leftpanel-content will be selected in the HTML Tab of the Developer Tools window and the left navigation will be outlined in blue.

3. See that the background-color is set to #fcfcfc in the Style window. The div is styled using the selector BODY #s4-leftpanel-content in corev4.css. You will override this style in the next exercise.

4. To experiment with modifying this style, click the value to right of the background-color in the Style window, change the value to #e8e8e8 and press Enter. This will change the background to be the gray we ultimately want.

   Note:

   This type of experimentation with styles will be helpful in determining what changes are needed. It will also improve productivity by quickly making changes without having to redeploy to see the results.