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)
- Upgrade to the latest version of CSS Hero (inspector needs at least CSS Hero 1.23).
- Download CSS Hero Inspector from your Dashboard.
- 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.
Then trigger your desired element (as usual working on hero) on the webpage (i.e. the entry title)
Now, try let’s changing the font-size, and you’ll see the magic also in the left panel (the inspector panel).
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.
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
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).
Hide the Main Hero interface
This button hide the Main CSS Hero interface (the right control bar).
Press again to show it.
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.
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.