ICS Calendar

ICS Calendar
  • Features
    • ICS Calendar Pro
    • Feature Comparison
    • Sample Calendars
    • Preview Your Calendar
    • More WordPress Plugins
  • Help
    • User Guide
      • Getting Started
      • General WordPress Settings
      • Shortcode Overview
      • All Parameters (Reference)
      • FAQs and Tips
      • CSS Guide
      • Developer
      • GDPR
    • Shortcode Builder
    • WordPress Support Forums
    • Pro Documentation
      • Calendar Builder
      • Block Editor
      • Manual Calendar Setup
      • Admin Utilities and Settings
      • Customizer
      • All Parameters
    • Pro Support Forums
      • Installation and Configuration
      • Licensing
      • Troubleshooting and Bugs
      • CSS and Design
      • Feature Requests
      • Translations
      • General Support
    • Pro Support Request Form
    • Translation Suggestions
  • Blog
  • Download
  • Buy Now
  • Cart
  • My Account
Search
More...

User Guide

  • Getting Started
  • General WordPress Settings
  • Shortcode Overview
  • All Parameters (Reference)
  • FAQs and Tips
  • CSS Guide
    • Using the Inspector
    • ICS Calendar CSS Classes
    • CSS Tips and Tricks
  • Developer
  • GDPR

More Help

  • User Guide
  • Shortcode Builder
  • WordPress Support Forums
  • Pro Documentation
  • Pro Support Forums
  • Pro Support Request Form
  • Translation Suggestions

Using the Inspector

Get to know the “inspector” in your web browser. It’s a great way to see how the CSS of the plugin is constructed, so you can choose the proper selectors for the elements you want to modify.

To use the inspector, simply right-click (on Mac, Ctrl-click) on the element on a web page that you want to inspect, then choose “Inspect” (or similar; the exact label varies by browser) from the pop-up menu that appears. This will present the HTML of the page, with the selected element highlighted, along with a breakdown of all of the various CSS selectors that are being applied to that element.

Find a selector that begins with .ics-calendar and that is generally the one you need to use to write your own custom CSS for the element.

The screenshot below shows the inspector in Safari on the Mac, inspecting the CSS that’s applied to the time for an event in ICS Calendar. (Click the image for a close-up view.)

You can see that the CSS selector that you would want to use to modify the appearance of the time is: .ics-calendar-month-grid .events. time

Room 34 Creative Services, LLC

  • Facebook
  • Instagram
  • YouTube
  • Room 34 Creative Services, LLC
  • Minneapolis, Minnesota 55406 USA
  • info@icscalendar.com
  • More WordPress Plugins
  • Privacy Policy
  • Terms & Conditions

Copyright © 2023 Room 34 Creative Services, LLC. All rights reserved.

https://icscalendar.com/using-the-inspector

This website uses cookies for necessary functions and to enhance your browsing experience. Accept to continue or find out more in our Privacy Policy.

Accept & Continue