Getting Started – The Editor

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

Launching the Live Editor


Clicking this icon, the editor will pop-in.

Choosing an element to edit

You’ll be now asked to click the element you want to edit on the page, a blue helper will outline the selected elements. Right clicking is allowed too – in case you need to prevent theme javascripts from firing.

CSS Hero will help you by displaying element margins (in light yellow) and paddings (the thin dotted blue line inside the selection).

At this point, after your click,  a list of possible elements will show in your editor window, this is useful  as you may need to edit overlayed elements that may be impossible to scope by mouse-over. However in most cases the first element of the list is what you’re looking for.

Now let’s focus just a minute on this, as you may have noticed each element has a small dropdown at the left side, this allows you to control multiple statuses for each element. In case of a link element it will display 3 statuses: Hover, Active and Visited, all other elements will return only Hover.

Now choose the status you want to edit or click the main element button to start editing, a list of properties will fade in. This list by default includes all editable CSS properties, theme developers can selectively choose wich properties should be editable for each property (an editing range may also be declared).

Editing a property

Once you’ve clicked the element you want to edit and selected it from the desired list mentioned above a set of editable properties should appear and you’ll be asked to choose wich property for that element you want to edit.

Now you’re finally ready to customize, feel free to experiment and to play with the available options, you can keep browsing your site while editing, Hero will store your edits and save them in a second moment if you want.

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