It’s been a while since I last reviewed CSS Hero, and I am impressed with the way it has improved over the years. If your WordPress theme doesn’t make it easy to customize fonts, colors, margins, paddings, gradients, box shadows, text shadows, and all the CSS properties you would love to change on just about any element of your site, then you should use CSS Hero.
Disclosure: Affiliate links may be used within this post for products I recommend. They in no way affect my judgement of said products, nor do they affect the price of the product.
THE ONE-MINUTE TEST
As a test, I tried changing the border under the widget list items in my sidebar. They were originally a light gray, and I wanted to change them to a purple dotted line instead. Now, this is just a one-off quick edit that I could have fixed myself, by using my browser’s inspector tool to discover the selector I needed to modify, but CSS Hero made the process even easier than that.
In about 1 minute, I’d installed and activated the plugin, started it, clicked the item I wanted to modify, and made the change.
If I didn’t have to install and activate the plugin, I could have done this in 10-15 seconds flat, especially after understanding the basic interface.
Here’s what that process looked like.
After installing, I was prompted to activate the plugin. CSS Hero made it a two-click process essentially, to grab my activation key and move on.
Once I clicked the Edit with CSS Hero button in my admin bar, this is what I saw. Notice the thin gray lines between each item in the BLOG CATEGORIES section in the screenshot below? My goal was to change those lines.
Next, I simply clicked the element I wanted to change (the list items in my sidebar), chose the border property in the CSS Hero toolbar, and changed the width, type, and color.
Here you can see that the changes were applied to all widgets in my sidebar, as I now have purple dotted borders between list items.
To preview and edit for desktop, tablet and mobile devices, click the Devices in the upper right.
To close CSS Hero, just click on the Power icon in the upper right.
While making super-quick CSS edits rocks, there are some other equally important reasons why CSS Hero should be in your toolbox.
No lock-in!
This is extremely important to me. You can actually export your custom CSS file, so even if you delete CSS Hero, you can still keep your CSS changes going.
Safe editing!
CSS Hero does not modify ANY of your theme or plugin files. If you deactivate or delete the plugin, your site will look just the way it did before you started changing things via CSS Hero. This is because it creates its own independent stylesheet (which you can export as I mentioned above and use as you wish). This means you’ll never have to worry about permanently destroying your website.
Tool and Code Views simultaneously.
You are able to control your edits either via the tools or the code because both are available in your view at the same time. You can also toggle either out of your way as needed.
Edit for desktop, tablet, or mobile.
You can make changes on desktop-only, or edit and preview changes to tablet and mobile devices as well.
Powerful features that take you to the next level.
I’m not going to go into too much detail about these, but if you’d be interested in reusing styles, you’ll want to check out CSS Hero’s variables and snippets (LESS mixins).
Still affordable!
In all this time, since I first looked at CSS Hero, the price has not gone up. That’s fantastic. It’s still a very affordable $29 for a single site license (1 year of support), $59 for a 5-site license, and $199 for a Pro license (up to 999 sites). Of course, as with most plugins, after one year, you can continue to use the plugin at its current version forever. It will continue to work as is. However, continued upgrades and support require renewing your license annually.
If digging around in your browser’s console to try to find the right selector drives you crazy, stop the madness. Make CSS changes to your WordPress site quickly, easily, and safely with CSS Hero. It will save your sanity.
One last thing: CSS Hero is compatible with Elementor. If you are using the free version of Elementor, and happen to own CSS Hero, CSS Hero will help extend your design capabilities of Elementor. On the other hand, if you own Elementor Pro, I’m not sure CSS Hero will help much, but it might, I suppose. Either way, I’m happy to see that CSS Hero is Elementor friendly.
Tags: css
Leave a Reply