Browser Features for Editing LibGuides: Overview

Inspection Tool is Part of:

• Firefox (called "Inspect Element")
• Chrome (called "Inspect")
• Right-click a Web page element and choose the tool from the popup menu. Tool will open a window at the bottom of the browser.
• Note: The separate inspection tool add-on, Firebug, is no longer being developed. Use the built-in inspection tools.

Useful for:

• Analyzing HTML and CSS in Web pages
• Identifying CSS rule (including selector name and property declaration) that is controlling behavior of a page element
  • This is necessary when you need to override CSS created by Springshare
• Experimenting with variant settings in a live Web page
  • Inspect Element allows for direct changes to HTML and CSS
  • It is easy to try alternate colors, spacing, etc.
• Altering Springshare CSS by adding Custom CSS in LibGuides Admin
  • Modified CSS can be copied and pasted into the Custom CSS

Configure Inspect Element Features

• Go to "Toolbox Options" ("gear" icon)
• Choose "Themes" preference (dark, light, Firebug)
• Turn on: "Toggle rulers for the page" and "Measure a portion of the page"

Understanding CSS Rules: Naming the Parts of the Rule

• A CSS "Rule":
  • .s-lg-label-more-info { margin-bottom: 5px; }
• The Rule is made up of:
  • Selector: .s-lg-label-more-info
  • Property Declaration: { margin-bottom: 5px; }
    • Property Name: margin-bottom
    • Property Value: 5px;

ColorZilla is an Add-on Available for both Firefox and Chrome

• Easily manage colors on your Web site
• Eyedropper tool for sampling colors
• Color Picker provides color code in Hex, RGB, etc.
• Webpage Color Analyzer creates a palette of colors appearing on a Web page
• CSS Gradient Generator tool