CSS Hero Review: Customize WordPress Themes Live

Monday, July 27, 2015

In today’s article, we want to let all designers know about CSS Hero – a brand new WordPress plugin that lets designers (and anyone else for that matter) customize WordPress Themes live.

What exactly is CSS Hero? CSS Hero a WordPress plugin that integrates seamlessly with any WordPress site you are working on that has a Hero-ready WordPress theme, and can be used even on those WordPress themes that aren’t natively Hero-ready.

Let’s look at some of its mains features to see how it can help web designers and developers build beautiful websites with minimal effort.

CSS Hero Features

CSS Hero features an extremely easy and user friendly “point and click” interface, that basically lets you mouse over and click on any element you want to modify.

CSS Hero also has a live device mode feature, which lets you edit the way your theme looks across various device, such as phones and tablets.

CSS Hero also has an intelligent color picking functionality, that stores all of your latest used colors and lets you customize colors by simply clicking your mouse. For Developers, CSS Hero (when running on a Mac enviroment only), even has a cross-app color picking functionality, letting you pick colors instantly from other windows of your operating system

Moreover, CSS Hero supports 600+ fonts and lets developers add Google Fonts, Typekit and more.

Whether or not you are a CSS expert, CSS Hero can make you an expert by giving you the ability to build things like gradients, text-shadows, box-shadows and other CSS elements using simple point and click.

All of CSS Hero perfectly generated, minified CSS can be exported in just 1 click.

For full developer documentation and to unlock full potential of CSS Hero, please refer to this document.

CSS Hero Supported Themes

Here are some of the most popular WordPress themes, all of which are CSS-Hero ready.

Some of those themes include: X theme, StoreFront, DirectoryEngine, Layers WP, Twenty Fourteen, Twenty Fifteen, Enfold, GeneratePress, E4, Genesis Framework, Divi 2, Ultimatum Theme, Woothemes Canvas, Tribune and many, many more (you can View all CSS-Hero ready themes here)

How to Use CSS Hero if Your Theme/Plugin is Not Hero-Ready

There are 2 ways in which you can use CSS Hero, even if your theme/plugin is not Hero-ready.

Quick Configurator

This tool lets you edit your site’s element live, even if the site isn’t natively compatible with CSS Hero. Quick Configurator is also useful when you want to style any new HTML elements on your site, either inside the template or content.

Rocket Mode (still in Beta but useful on light themes)

Rocket Mode is a very useful tool that enables automatic recognition of CSS elements in your theme, for those themes that aren’t natively Hero-ready. This basically means that it will parse all of the the theme’s CSS elements, and define all appropriate selectors.’

In summary, CSS Hero is a terrific tool, and if you aren’t using it already, you should be.

Ready to try CSS Hero?