CSS Hero Plugin Review

CSS Hero Plugin Review: An Overview

When it comes to those essential tweaks that make your WordPress theme your own, CSS Hero has been an absolute godsend.  Before installing CSS Hero, I was submitting almost daily tickets on the Elegant Themes support forum – seriously.  Then there was the inevitable to-ing and fro-ing before the CSS Code was sufficiently fine-tuned to produce the desired results.  These delays were further compounded by the time differences between New Zealand and the States.  In short, it could often take weeks before my customisations went live.

Because CSS Hero provides the ability to create real-time changes to the front end, I have saved myself tonnes of time.  Not to mention significantly reducing the workload of the Elegant Themes support team!

CSS Hero: What’s in the Box?

Straight out of the box, the CSS Hero editor allows you to alter virtually every element of your website with a simple point and click of your mouse.  Absolutely no coding knowledge required!  What’s more, the plugin is compatible with the vast majority of the main WordPress theme players.  If your particular theme is not supported, then adding a simple JavaScript file will solve any compatibility issues.

CSS Hero Features: The Nitty Gritty

Point, click and edit functionality

Once you activate the CSS Hero plugin and refresh the front end of your website, you’ll see a white lightening bolt icon against a blue background.

CSS Hero: The Lightning Bolt

Click on this icon, and the CSS Hero toolbar opens up.

CSS Hero Toolbar

You can then right-click on the element you wish to change.   For example, in the diagram below, we’re looking at editing the image that is highlighted.

CSS Hero: List of elements to edit

Once the image element is selected from the toolbar, we are given a list of all the available image options that we can change.

CSS Hero: Image Options

We can customise the image text, border, size, padding, margin and position, to name just a few.  Each element then has a number of sub-elements that can be customised.  Let’s say, for example, that we want to change the padding around the image.  Clicking on padding in the list brings up the following options:

CSS Hero: Padding

As you can see, we are free to change the padding around the top and bottom of the image, as well as to the left and right, simply by selecting a point on the blue sliders.  Or, if we wish, we can enter a specific value in the box to the right of each slider.  We can choose pixels or a percentage as our unit of measurement.

Create Responsive Designs with Ease

CSS Hero comes with fully responsive capability.  With a couple of clicks, you can restrict your modifications to desktop, tablet or smartphone screens only.

CSS Hero: Responsive menu

View and Activate History of Saved Edits

CSS Hero stores all steps that you have saved, much like WordPress.  You can then preview any saved step, and then activate it as required.


CSS Hero Review: Preview and Activate History


To view your history of edits, simply click on the toolbar arrows icon.  To view your website at a particular editing step, click on the eye to the left of that step.  To restore your customisations to that point in time, simply click the ACTIVE blue icon (as depicted in the above right-hand diagram).

Reset a Single Element

You can restore an individual element to its original style by selecting the element with the mouse, and then clicking on the red R (RESET) button on the right side of the CSS Hero Toolbar.


CSS Hero: Reset Function

A Few Things to be Aware of

It’s important to be aware that CSS Hero cannot be used to edit previews of unpublished posts.  A simple workaround, is to publish the article privately, and then make the necessary alterations to the front end before making the publication public.

Another thing to note, is that if you customise an element, then those customisations will take effect on every instance of that element, website-wide.  If you want to avoid this, then you will need to enter a CSS class or ID to the element in question.

Wrapping it all up

All in all, this is a great plugin, and I highly recommend it to anyone who would like to be able to customise their theme without having to touch a single line of code.

For more information about the plugin, you can visit the CSS Hero website here.

Disclosure: This page contains affiliate links meaning we earn a commission if you use those links. We only recommend brands we use and trust.

About the Author

About Kiwi Earth Mother
Formerly an English lawyer, Sharon now resides in the Waikato, New Zealand, with her husband and three children.

Read More

In 2001, Sharon exchanged life as a successful London lawyer for Australian backpacking adventures.  Next stop, Auckland, New Zealand, where she met and married a Kiwi.  Sharon retrained as a Secondary School Teacher, teaching in two schools, before taking time out to raise a family. She is a proud mother of three - two girls aged six and three, respectively, and a nine month-old baby boy... Read even more