Inspector

Feb 2016 Notice:
Please mind that this page refers to the old, 2015 Inspector – the new Inspector Pro is described on it’s own page.
We will update this documentation page as soon as possible. In the meantime, thank you for your patience.

How to Install the CSS Hero Inspector tool. (available only for PRO customers)

  1. Upgrade to the latest version of CSS Hero (inspector needs at least CSS Hero 1.23).
  2. Download CSS Hero Inspector from your Dashboard.
  3. Upload and Install the Inspector.

How to Use the CSS Hero Inspector:

Please watch this how to video:

 

Start and trigger the Inspector

To ignite the CSS Hero inspector please click on the the CSS icon in the top hero-bar.

inspector load

inspector ignition

Then trigger your desired element (as usual working on hero) on the webpage (i.e. the entry title)

select the item

select the item

Now, try let’s changing the font-size, and you’ll see the magic also in the left panel (the inspector panel).

The inspector shows CSS Hero changes

The inspector shows CSS Hero changes

Inspector at work

Inspector at work

Add a style in the inspector

To add a new style on a page element (i.e. the henty title) simply press the + icon on the left.

adding a new style

adding a new style

Auto Complete Feature

Adding a new style will be very quick and smart using the auto-complete feature included in the CSS Hero inspector.

Read the example below, We’re adding a new background color to the element

auto-complete feature inspector

auto-complete feature inspector

Disable a specific style line in the Inspector

You may need to disable some edits during your workflow and the inspector allows you to do this.
Just click on the red icon (the forbidden icon) to disable the CSS style line (i.e font-size).

disable a CSS style line

disable a CSS style line

Hide the Main Hero interface

This button hide the Main CSS Hero interface (the right control bar).
Press again to show it.

hide the main hero interface

hide the main hero interface

Search in the inspector

Another useful feature in the inspector in the search, click on the magnifying glass button to enable the instant-search feature over the entire Hero-edited-stylesheet.

search feature

search feature

Q: I can’t find a specific CSS propriety in the auto-complete list.

The CSS Hero inspector is a basically a mirror of CSS Hero. This means that you’ll be able to find and add only the available CSS proprieties native included in CSS Hero.

CSS Hero is the definitive plugin to customize your WordPress themes with an easy and intuitive WYSIWYG interface.

Affiliate

Become a CSS Hero affiliate and earn 40% on each sale right now. Spread the CSS Hero word and share the wealth with us!
Start Earning →

Follow the Hero