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.
Quick Configurator Tool Video Overview: configure CSS Hero to run on any Theme – or add more editable elements to a Hero-ready Theme
In this video, we will quickly see how to configure CSSHero to work with a not (yet) compatible Theme, using the Quick Configurator Tool.
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.
If 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”)
- 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.
Extra Video Tutorials:
Style elements of your content adding classes and create repeatable styles for your content elements
Page specific CSS edits in WordPress using the body classes