Launching the Live Editor
Clicking this icon, the editor will pop-in.
Choosing an element to edit
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.