CSS Hero

WordPress has been the popular choice as a CMS platform. Most people who wants a website, WordPress is a good place to start because of its great support, huge resouces of plugins and themes

Starting a WordPress site can be pretty quick and simple. Just install WordPress and put a theme. However, if you want to modify the styling of the theme, you might find it difficult if you don't have any CSS knowledge. You will need to find the right CSS file, find the exact element, make sure it won't conflict with other styling, then you can edit it and re-upload back to the server. It is a very steep learning curve for beginners.

However, there's one plugin that will eliminate that process and make simplified it. Introducing CSS Hero, a plugin that allow you to easily customize WordPress themes, live. Forget about coding and tedius FTP operation, you can just install this plugin and customize your themes straight away.Â What was difficult and tedious are now so much simple and enjoyable.

Installation

If you're familiar with WordPress plugin, you can install CSS Hero by uploading it to wp-content/plugins folder and activate it in the WordPress Admin plugin page. Once it's done, you'll be asked to activate your account by logging into CSS Hero website.

It's very simple. It's activated once you see this screen:

CSS Hero's interface is neat and well-designed. I like it a lot because you can see they have put a lot of effort into UI and UX to make it not too cluttered and easy to use.

When the right element is selected the properties panel will be displayed, this is where you can change all the possible styling properties for that element.

If you know CSS, you can type in the properties manually into code editor, it will work the same, possibly faster too. Only if you know how to code in CSS.

Background

You can change background image pretty easily, and it's linked with unsplash, beautiful royalty free images are just a few clicks away.

Snippets

CSS Hero also comes with a good collection of snippets. A set of beautiful predefined styles that can be applied to your existing element. Here's how I change the styling of "continue reading" link into a gradient button.

Undo/Redo, History

In case you want to change your mind and revert back to the original, you can always use the undo/redo and history tools. It's located on the top right corner. With History tool, you can jump back to a few steps, or toggle it to see the different.

Variables

Variable is a good feature. You can predefine a list of commonly use properties and its values. For example, brand color should always be the same, so you can define the brand color variable and it will appear in the color picker variable tab.

This can save times because you won't need to color pick it manually and also eliminates typo too. It will make your website consistent.

Documentation

Before I buy any plugins, I always check to ensure the documentation is good. It can be really frustrating when you need support and you couldn't find a proper resource. CSS Hero's documentation has a good walkthrough. It includes a series of video to show you how to use each of the major features.

Besides that, it also comes with a support forum if you have questions or require assistant from the dev team.

Final thoughts

I reckon CSS Hero is a great tool for someone who doesn't know CSS coding but wanted to make some tweaks to the theme. It eliminates the need to update CSS files and the pain of re-upload it to FTP. For non-technical users, those tasks are complicated and tedious. CSS Hero makes it easy to update a theme.

For advanced users who know CSS coding, this will get your update done quicker. Since CSS is stored in a separated CSS Hero file, you don't have to worry the original CSS file get messed up.Â

CSS Hero is the missing WordPress' What-You-See-Is-What-You-Get editor. If you want to manage the website yourself, this is a great plugin you should consider.

CSS Hero - Easily Customize WordPress Themes, Live