Line25 is reader supported. At no cost to you a commission from sponsors may be earned when a purchase is made via links on the site. Learn more
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.
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?
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!
Hi Aaron,
Please contact the CSS Hero team directly for this at https://www.csshero.org/contact/. Thanks.
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.
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.