Line25

CSS Hero Review: Customize WordPress Themes Live

Read the full post

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 devices, 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?

Try CSS Hero

  • 187
100 HD Blurred Backgrounds

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of 100 HD Blurred Backgrounds + bonus 10 realistic web shadows.

100 HD Blurred Backgrounds

Written by Iggy

Iggy is a designer who loves experimenting with new web design techniques collating creative website designs. You can follow Iggy on Twitter.

4 Comments

  1. Aaron says:

    Great review, thanks. I just bought the Hero and have a newbie question: where can one find the generated css in the wp-admin area? You said that hero creates a separate style.css, where is that stored?

    Thanks again!

  2. Nick Santos says:

    Yep, agree with Cathy. It’d be nice for customizing non Hero themes. But that Rocket Mode is pretty interesting though, will definitely consider using this.

  3. Cathy Mayhue says:

    This was much needed and would be better, if it evolves to become more effective at customizing non Hero themes. I just wish that a tool like this emerges from word-press community which works across all the themes.

Leave a response