Getting Started – Using the Quick Configurator tool to start editing any Theme element

This manual refers to CSS Hero v2.
If you are looking for the v3 manual, head over here.

The Quick Configurator Tool enables you to instantly make live-editable your site’s elements, declaring their CSS selectors.

It is extremely useful in two cases:

  • When you are running a WordPress Theme which is not natively compatible with CSS Hero
  • When you want to style new HTML elements of your site, either in the content or in the template.

In-depth walkthrough

Adding a new element to the actual set of editable elements is super easy and is extremely useful.


If you don’t know what a CSS selector is or how to find the correct one to target your elements, you can find an useful introduction on this article.

By clicking the highlighted button, a black form will be revealed.



Just type in the CSS selector of the element(s) you want to add, one per row please!  Hit the Save Selectors button and you’re ready to go.

docs-03If you now click  the main editor trigger, hovering the newly added element’s area on the page you will see that the chosen element has become “interceptable” by the editor. Click and enjoy editing. Hooray!

Just please mind to be specific enough with the selector in order to allow the editor to provide the correct CSS rule (#header h1 a instead of h1 a) – otherwise the original CSS of the Theme might win over your edits.


How it Works: one line = one element

As you can see from the screenshot, you’re able to add any kind of CSS selectors; here are some typical basic examples:

  • element (article, footer…)
  • .class (.post, .widget-area…)
  • #id selector (#header, #sidebar..)
  • h1.title (the h1 with class “title”)

Known Limits

  • you can use any CSS Selector but you can’t use any quotes
  • you can use Attribute Selector but when you specify the value of your attribute you do not need to add quotes
  • you can use Multiple Selectors and separate them by comma

Troubleshooting, Risks & FAQ

If you type something wrong in the quick configuration panel, like a bad selector, generally nothing  happens – and the row is just ignored.

In the very rare case you may paste something really  nasty and succeed  messing up  CSSHero  so that  the editor loading process would fail constantly, an emergency reset can be performed running the following URL when logged in as administrator:
This will totally erase the selector list. Altough your css will be still retained, don’t do this if you don’t really want to.

The Rocket Mode – Smart Auto Configurator.

Update! Since the CSS Hero 1.2 Version Users can run the new Rocket Mode. Please read here

View the Entire element List .class #id or selectors

To access to the entire element list (class, id etc…) of your wordpress theme you have to click on the button as in image below:

You can scroll the list with your mouse and use the search box to find the selector you want to customize.

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


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