A supercharged Hero

If you are a designer like me you may like to work visually, that is to avoid long lines of code, and forget about pretending to be a code hacker. There are tools that can help you to achieve the most precise design in WordPress, and I mean pixel precise.
One of these tools is CSS Hero, CSS Hero according their own words “The most advanced WordPress Themes editing tool” That lets you
“Get full control of your WordPress look and feel with CSS Hero superpowers, boost your theme customization options!”

Sounds great. It is. It is not perfect and there are drawbacks, but you can pretty much accomplish almost everything you need, or at least be very close.

Who can use it?

Anyone with a compatible theme, there are several themes that will work with CSS Hero, they have a list of themes in their site, and even if the theme you are using is not, there is a feature called “Rocket Mode” that can customize almost any WordPress theme.

It has a complete documentation, even if you don’t know CSS at all you can find it pretty usable, and I believe that is a great way to learn some css code with CSS Hero of course, it will not be the best way to learn, but you will learn while you use it.

For Pro users there is also a feature called “Inspector” which allows additional control on Hero generated code. With inspector you can easily refine, edit, remove Hero generated style or even add your own one as you would usually do with your favorite web inspection tool such as Chrome’s Inspector or Firebug.

It is worth it?

Even if you are a CSS Master Jedi, you will find CSS Hero highly valuable because it ads speed to your development. It is absolutely necessary? No, you can live without it for sure, but like I said it add many tools that will help you no matter your skill level with CSS.
Drawbacks? Sure, most coders feel this is for newbies, and sometimes is not responding like they expect.
Sometimes their license is not that easy to apply, but if you run into any problem their support is good, and they will help you or even give you an extra license key for you to use.
If you find that your theme/plugin is giving you errors, you can report it into their forum, so they can investigate.

How it works?

You install the plugin, setup the license (there are 3 plans) and in the front end of your site you will find a blue square ya will let you turn on the editor interface. That will allows you to easily Point and click what you want to adjust.
You can choose to see the edition of your desktop, tablet or smartphone version of your site, and every size you edit will not affect the rest, that means that the edition will be placed in the correspondent media query, allowing you to have a perfect edition of your site for every device.
You can replace every color in the specific item you are editing, including transparency with a convenient RGB mode.
Use or modify web fonts from Google, that is more that 600 font available for you to use in any part of your website.
And one of the great things about CSS Hero is that you can grab the code generated by the app, and place it on your style.css so after you are done editing your site, you can uninstall the plugin.
If you are interested just head over their site http://csshero.org, and read all about it, the documentation is complete and their blog also is a good resource of information, but in most cases you will check the basic information and jump right in.

Does it work with Plugins?

It is compatible with some complex plugins also, for example WooCommerce, Visual Composer, Gravity Forms, Contact Form 7 and some many others. There is a good chance it will work with any plugin even if is not on that list, you can always go to the forums or contact them just to check that before purchase.


In my case I use it, it helps me achieve more than if I was not using it, fast and better things, just because of that for me it is worth it, you can get 1 license from a friend, or even from their social networks to test it on your site, but always remember to backup before use it, and if you can, use it in a development environment, once you are sure and want to use it in a live site you can migrate the license to a live site, they explain how to do it in they documentation.

Looking for quality WordPress hosting? Check out Arvixe Web Solutions.

Tags: , , , , | Posted under WordPress | RSS 2.0

Author Spotlight

Facu Puig

I make websites since 1997, I use Adobe since 2004 and Wordpress since 2007. Fascinated by design at the age of 8, thanks to my father, a multi award winner graphic designer.

Leave a Reply

Your email address will not be published. Required fields are marked *