Link to Cal U home

Browser Features for Editing LibGuides: Overview

Information relating to the presentation "Using Browser Tools to Manage Your LibGuides Appearance," by Loring Prest at SpringyFlash at the ACRL 2017 Conference in Baltimore.

Inspect Element

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

Presentation Notes

Working with Inspect Element

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

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

Your Subject Librarian

Loring Prest's picture
Loring Prest
Contact:
Manderino Library 112
724-938-5769
This site is maintained by Loring Prest, Library Webmaster and Carol Jones, Library Information Systems Administrator.
© California University of Pennsylvania, 250 University Ave, California, PA 15419, All Rights Reserved.