How to Customize Any WordPress Theme Within Minutes With CSS Hero

Considering the popularity of WordPress as the world’s most loved Content Management System, it is not unnatural to see a wide range of page builders, themes and plugins to help you customize your website in the best manner possible. Such page builder plugins, both free and premium, allow you to tweak every aspect of your website.

On the downside, however, you are locked in to the specific theme or plugin, since the changes you make via the page builder cannot be replicated if you decide to move away from that builder plugin or theme. What if you wish to get rid of that theme or plugin, but still retain the changes and customization that you had made? What if there was a solution that would allow you to override your theme’s stylesheet, but at the same time, not lock you down to a specific theme?

Meet CSS Hero, the definitive WordPress plugin that lets you customize your themes via an intuitive and WYSIWYG interface.

What is CSS Hero?

Let’s explain this in simple terms: CSS Hero is a WordPress plugin that acts as a live theme editor. It does not modify any of your existing theme files; instead, it generates an extra CSS stylesheet that can override your theme’s existing stylesheet.

In other words, if you wish to change the default heading color for your theme from blue to yellow, you can do it with CSS Hero, without having to make changes to your theme’s CSS itself. This way, once you update your theme, your changes are not lost, because CSS Hero has generated clean CSS code that works atop your theme’s existing CSS code.

CSS Hero has been tested and plays well with numerous WordPress themes (and plugins). Of course, this is rather expected — anything that works by means of declaration of CSS selectors and elements will work seamlessly with CSS Hero, including most (if not all) of WordPress themes.

How Does it Work?

Working with CSS Hero is fairly easy.

We know that CSS is the language that makes the web go round (well, not really, but it surely is what makes one website look different from the other). WordPress themes rely on a CSS stylesheet document for declaring the appearance of headings, body text, image alignment, font and font sizes, as well as colors for background and foreground, and so on.

So it is obvious that if you wish to tweak the look and feel of your WordPress website, adding custom CSS to your theme’s stylesheet is the way to go. You can directly edit the stylesheet file (bad idea though, since any theme update will destroy your changes), or you can rely on a custom CSS plugin (Jetpack has a Custom CSS module, for example).

Now, what if there was a simple live editor that allowed you to click on a given element, and alter its appearance, such that the required CSS code was changed by itself?

This is where CSS Hero comes in. As a live theme editor, CSS Hero allows you to fix the CSS of your website not by coding, but by means of a point and click interface. You click on the text, and edit the font and font size, and save your changes. CSS Hero generates and adds the required CSS code in the background.

Naturally, this can save a good deal of your time as you do not need to indulge in manual coding, but also help you learn better CSS if you are new to CSS in itself.

CSS Hero in Action

After logging in to your CSS Hero Dashboard, you can grab the latest version of the plugin and then install it on your WordPress site, much like you would install any other plugin.

Once activated, CSS Hero adds a link to your WordPress admin notification bar, and a Settings→CSS Hero section. In the Settings section, you can enable or disable the cache, choose to export or import your CSS Hero data, as well as enable or disable the different CSS Hero links (including the one in the admin bar). This is ideal for folks like me, since I prefer keeping my WordPress Dashboard and admin bar as uncluttered as possible.

Now, to use CSS Hero, simply head to the CSS Customization page. You will notice a bar that offers icons for various actions. By clicking on the main editor button, you can then select the property that you wish to edit, and make changes therein.

Once you are done, you can choose to save your configuration as a preset, so that you can reuse it elsewhere on other sites. Presets can be saved to your CSS Hero account, or locally on your computer.

CSS Hero retains history of your changes, so you can go back and undo specific actions if you wish. Furthermore, it supports responsive design, and you can preview your changes across different devices, such as desktop, smartphones and tablets.

Further Features

CSS Hero also comes with a Rocket Mode option. What does it do?

It is not logical to expect CSS Hero to play well with every WordPress theme out there, or vice versa. While the plugin has been tested with numerous themes, there might be many that do not truly support it. In that case, you can choose to rely on the Rocket Mode. Basically, Rocket Mode parses the CSS of unsupported WordPress themes, and defines the required CSS selectors. This way, it can help you edit and tweak the appearance of such themes, without having to manually configure the CSS selectors. Here is a video preview:

CSS Hero also offers an Inspector feature, that lets you review and inspect your CSS code. You can be sure about the quality and cleanness of your code, and choose to save or export it thereafter. It works using CSSLint to perform a syntax check on your code.

Pricing

The Starter plan costs $29 per annum, and works for one site (sans the Inspector feature described above). If you need to work with multiple sites, you can go with the Personal plan that costs $59 per annum and lets you customize five websites, or the Pro plan that costs $199 per year, and lets you work with 999 websites.

Obviously, the Pro plan is meant for design agencies and professionals that work with numerous websites. Both the Pro and Personal plans come with Inspector plugin. All plans offer free upgrades and premium support for one year. Furthermore, if you wish to try before you buy, CSS Hero offers a 30-day refund policy as well.

Conclusion

For those who are looking to edit and customize their websites easily without having to mess with a lot of code, CSS Hero is a lifesaver indeed! Plus, if you wish to tweak yours or your client sites without hassles, and then reuse those presets as and when the need be, across devices and domains, CSS Hero is a must-have solution for you!

If you are looking for something extra, be sure to check out the free Animator plugin by CSS Hero. It works independent of CSS Hero main plugin, and lets you simply point and click to select CSS animations, and apply those animations to your site without having to deal with coding.

To learn more about CSS Hero, check out the demo here.

What do you think of CSS Hero? Will you be giving it a spin? Share your views in the comments below!