Donna Fontenot Cavalier

Novelist / Author, WordPress Enthusiast, Web Geek, Blogger, and Wedding Officiant
  • Home
  • About Me
    • Things I Recommend
  • Hire Me
  • Contact
  • DonnaCavalier.com
Home  /  WordPress  /  CSS Hero All Grown Up

CSS Hero All Grown Up

Donna Fontenot Cavalier WordPress

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.

After installing CSS Hero
After installing CSS Hero, it prompts to activate
CSS Hero Activation process
CSS Hero activation process

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.

CSS Hero opened
CSS Hero first opened

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.

CSS Hero color change
CSS Hero after border color change

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.

Results of my change using CSS Hero
Results of the change from using CSS Hero
CSS Hero change in other widgets
CSS Hero changes in other widgets

To preview and edit for desktop, tablet and mobile devices, click the Devices in the upper right.

CSS Hero device mode
CSS Hero device mode

To close CSS Hero, just click on the Power icon in the upper right.

Close CSS Hero
Close CSS Hero here

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
Previous Article
Next Article

About Author

Donna Fontenot Cavalier

Follow me on Twitter or LinkedIn.

Related Posts

  • ManageWP clone screenshot

    How I Rebuilt An Old WordPress Site In A Few Hours

  • annotate issue

    The Smart Way To Get Feedback From Design Clients

  • Not secure http

    Time to Migrate From HTTP To HTTPS If You Haven’t Yet

Leave a Reply

Cancel reply

What This Site Is All About

Want the quick summary? This site gives you an idea of who I am as an author / novelist, a WordPress specialist, an eBusiness consultant, and general web geek. If you need help in any of these areas, I'd be happy to speak with you. Just get in touch! In the meantime, see if any of the content helps out.

WordPress Site Maintenance Service

WP Lotus Wordpress Maintenance Services
  • Popular
  • Recent
  • Gutenberg Will Confuse The Crap Out Of Almost Everyone July 10, 2017
  • drag and drop
    WordPress Drag and Drop Page Builders Are Evolving February 19, 2015
  • Google Profits From Malware January 24, 2014
  • ManageWP clone screenshot
    How I Rebuilt An Old WordPress Site In A Few Hours June 11, 2018
  • ManageWP clone screenshot
    How I Rebuilt An Old WordPress Site In A Few Hours June 11, 2018
  • CSS Hero All Grown Up May 18, 2018
  • annotate issue
    The Smart Way To Get Feedback From Design Clients November 30, 2017
  • Not secure http
    Time to Migrate From HTTP To HTTPS If You Haven’t Yet August 29, 2017

Designing WordPress Sites For Small Businesses

Cavalier Web Design - My mission: To create WordPress websites for small businesses that not only look great, but actually help the business meet its online goals. ...Design...Functionality...Conversions...

Blog Categories

  • About Me
  • General
  • Making Money Online
  • Resources
  • WordPress

Thanks for stopping by!

I really appreciate the time you spend here. If I can ever reciprocate in any way, just let me know!