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?
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.
Click on this icon, and the CSS Hero toolbar opens up.
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.
Once the image element is selected from the toolbar, we are given a list of all the available image options that we can change.
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:
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.
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.
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.
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.
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