CSS Hero Review: WordPress Theme Customization Made Easy!
- 1 Comment
When it comes to getting a website looking exactly as you’d like it to, the sheer wealth of different WordPress themes available is a real boon! And if you spend long enough looking, you may actually be able to find a theme that will be absolutely perfect for your site. Chance are, however, that although you’ll be able to get close to what you want, you’ll still probably be a little way from perfection. After all, can a pre-built theme ever really suit an individual’s needs down to a T?…
So what to do if you’ve managed to find a theme that’s close to what you want, but still need to make a few changes? Well, if you have the required skills of course, no problem: you’ll be able to modify it as you please. But what if you haven’t got the confidence to go in and make your own changes to the necessary files?
Today, I’d like to introduce you to a very handy plugin indeed: CSS Hero — a plugin that empowers you to make small — or perhaps even relatively large — visual customizations yourself: without having to touch a single line of code!
What Is CSS Hero?
As such, it occupies a similar space to drag-and-drop page builder plugins. However, where the page builders encourage you to build a custom design from scratch, CSS Hero lets you tweak your existing WordPress theme in any way you like.
This allows you to play developer, without necessarily possessing any of the developer skills that are usually involved. You continue to use your professionally designed WordPress theme — you know, the one built by an expert, not by someone throwing random modules together, à la page builder plugins — while making minor adjustments to fit your requirements.
No onsite element is off limits: You can customize anything and everything. CSS Hero converts your customizations into the relevant CSS code, which is then applied to a new CSS stylesheet (the original stylesheet remains untouched, avoiding any problems down the line).
CSS Hero works with any WordPress theme, too. Those extensively tested for compatibility are referred to as Hero-ready, while untested themes are still supported in Rocket Mode.
CSS Hero is an affordable, premium plugin. To reflect its competition, it’s priced on par with most popular page builder plugins.
A basic starter license costs just $29, and gives you access to the full CSS Hero plugin (though you’re restricted to use on just one website).
If you want to use CSS Hero on more than one website, your options are:
- Personal license ($59) — up to five sites
- Pro license ($199) — up to 999 sites
As you can imagine, the pro license is aimed at creative agencies and career developers. Both the personal and pro licenses also come with access to the premium add-on, Inspector Pro — we’ll be covering this in more detail further down the page.
All three CSS Hero licenses are valid for one year, grant access to one year’s updates and support, and come with a 30-day money-back guarantee.
After making your purchase, you’ll be taken to the CSS Hero dashboard. From there, you’ll be able to access the plugin’s extensive documentation, plus the awesome CSS Hero Academy. The academy is a nice touch, featuring a series of beginner-friendly video tutorials designed to help you get the most from your new plugin (I’d love to see other advanced plugins following suit).
The dashboard performs one other important function: It’s where you download the CSS Hero and — depending on your license level — the Inspector Pro plugins.
With the downloads complete, log in to your WordPress dashboard. Navigate to Plugins > Add New > Upload Plugin, then follow the instructions to upload the plugin zip files and activate the plugin. If you’ve ever installed a WordPress plugin before, this will all feel very familiar.
However, the CSS Hero installation does require one extra step: Verification. Click the blue button, then follow the instructions as you register one of your licenses. So far, so good.
Now, CSS Hero is a theme editing tool, and, as such, the editing is done on the front end, where you can view changes in real time. Access your site’s front end, and you’ll see a new blue icon in the top-right corner of the screen. Click this to start using your new plugin.
CSS Hero Editor
After clicking the blue icon, you’ll have to wait a few seconds for CSS Hero to turn on. With the plugin activated, you can now start styling and customizing your website.
To begin, simply click the blue icon at the top of the options panel. If you’re unsure of how to proceed, the plugin will provide you with handy links covering all the basics. If, however, you’re ready to dive straight in, you can begin targeting and editing any element on your page.
Hover over the element you want to edit, then click (we’re going to start by looking at a relatively basic content paragraph, as seen in the screenshot below). Once clicked, CSS Hero will lock in your element, which means you’re free to begin customizing.
To make the process as simple as possible, CSS Hero will provide you with a list of customization options, depending on the type of element you picked. Having selected a paragraph, my options include changing fonts, backgrounds and borders, and configuring the padding around the text.
Editing the elements is easy, with everything controlled from the right-hand menu bar, plus changes previewed in real time. To start, I’ve decided to focus on the text properties. With this option selected, CSS Hero displays all available options for configuring the text, including:
- Font face — with every Google font available for selection
- Font color
- Font size
- Font weight
- Text alignment
- Text transformation — for example, upper case
- Word spacing
- Line height
Make the changes you want, and watch them applied to the text a split second later.
You can then go back and configure a background for your paragraph — again, CSS Hero hands total control over to you. You can upload a custom image, select a color, or configure a gradient to display as your background.
You’re given the same options for paragraph borders too, with full flexibility on border style, width and color.
There are even a few cool preconfigured styles — for example, turning your text into a button or displaying a ready-made background in a number of cool designs.
If you’d prefer not to work through your changes a section at a time, you can also select the all option, which lists every customization option on one convenient screen.
As you make changes to the text, CSS Hero will apply them to the live version of your website. However, don’t worry about making any permanent changes at this point — before the changes are applied, you have the option to erase them by clicking cancel, or to confirm them by hitting the save button.
Even after hitting save, you won’t be stuck with unwanted changes, though. To revert to the original, head back to the top level of the CSS Hero menu, navigate to the tools section, then select the reset settings to theme default option.
It’s also possible to restore an individual element to the default factory settings — just click the element you’d like to restore, then click on the small ‘R‘ reset icon to the right of the menu. Press confirm, and your rogue element will be restored to its former glory.
As I mentioned before, all customizations are applied to an additional style sheet. Should the worst happen, your theme’s original style sheet will remain untouched. This means, no matter what changes you make using CSS Hero, no long-term damage can be done. If all the other restoration options fail, you can restore your default theme and sleep easy!
Edit Any Element
One of CSS Hero’s strengths is that it allows you to edit any element on your page — no matter how big or small.
Looking at the big picture, you can edit your site’s background image, sidebar style, and footer section.
This is achieved using the same process we used to edit our paragraph, but demonstrates that CSS Hero can be used to make fundamental changes to your site’s aesthetics. Check out the screenshot below, where I’ve changed my sidebar’s background, changed the widget header styles, and also reconfigured the spacing. Here’s the basic before shot:
And here it is after my tweaking — I’m not a designer, admittedly, but this took just a matter of seconds to achieve.
You can also customize tiny content elements, such as images, link colors, and list styles. List styles are particularly interesting, because you get to choose custom bullets from the dedicated lists section. There are six cool prebuilt bullets supported — including squares, decimals, and Roman numerals — or you can upload your own custom icons for a more personal touch.
Hopefully, this gives you an idea of how you can overhaul your site’s design. Your WordPress theme provides the foundation, but, thanks to CSS Hero, you can tweak every pixel of your website to your liking — without touching a line of code.
CSS Hero possesses several other cool features I’d like to draw your attention to.
First is the view changer. With a growing emphasis on responsive design, it’s important your website works flawlessly on devices of all shapes and sizes. CSS Hero comes with a built-in feature that allows you to view your site in desktop, tablet, and mobile view.
Simply select your preferred view from the toolbar — it’s the second option down — and let CSS Hero transform your screen into the appropriate size. This is a great way to test drive the changes you’ve applied on smaller devices.
Next, we have the important history feature. Every time you hit the save button, CSS Hero stores a snapshot of your website. These snapshots can be viewed and restored at the click of a button, meaning your hard work is never lost — you can just jump forwards and backwards in time.
Finally, we have the Export CSS option, available from the tools section. This gives you an opportunity to export your edited CSS for use on another website, or just get it up on screen to study the changes you made (one of the best ways to learn CSS).
Inspector Pro Add-on
Those of you who upgraded to the personal or pro plans also get CSS Hero add-on Inspector Pro included with your license.
Announced in May 2015, and recently out of beta mode, Inspector Pro is aimed at more advanced CSS users. While CSS Hero is a tool that requires absolutely no CSS skills, Inspector Pro has been developed for those who want to customize their site by tweaking the CSS directly.
Inspector Pro displays your theme’s CSS underneath the live preview. You can edit this code as you please, and, as you do so, your changes are reflected in the preview. By giving you the ability to edit the CSS directly, this plugin gives you absolute control over your customizations, pixel by pixel.
However, Inspector Pro also offers some useful functionality, so you’re never on your own. For example, you can jump to a specific line by using the helpful search function, or disable specific style lines so that overlapping elements won’t get in the way.
If you write your CSS from scratch, you’ll love this add-on, as it means you’ll no longer have to flick between windows — you can make and view all your edits on one screen. Handy!
CSS Hero Support
From the moment you log in to the CSS Hero dashboard, you can see that the developers are at pains to help you get the most from their plugin.
I’ve already touched on the extensive documentation and the CSS Hero Academy (the academy is in its infancy, but there are concrete plans to continue its expansion).
These two sections are incredibly thorough, and the academy includes useful video tutorials. CSS Hero can feel difficult to use at first, so I found these short video tutorials useful for finding my feet — after which, the plugin felt relatively straightforward.
There is also a more advanced documentation section, known as the Developers Knowledge Base. This is targeted at plugin/theme developers, who are walked through the steps involved in ensuring their products are fully CSS Hero-compatible — aka, hero-ready.
For those still unable to resolve their issues, despite the in-depth documentation, there is also a support forum. Members of the CSS Hero support staff are on hand to answer any queries — usually within a matter of hours. A license grants you one year’s access to the forum and support team.
Overall, CSS Hero can’t be faulted for its support efforts. The prewritten and recorded tutorials are really helpful, and they’re dotted throughout the user experience at points where they’re most likely to be needed.
As WordPress plugins become increasingly sophisticated, I’d like to see more developers following CSS Hero’s example, providing advanced support right out of the box, so that inexperienced users never feel out of their depth.
Overall, I was really impressed with CSS Hero. With such unrestricted customization potential, this plugin could have easily been overwhelming — however, because of the clever, intuitive interface (and helpful tutorials) it has remained easy to use throughout.
The customization options are endless, allowing you to tweak your theme in any way you can imagine. This allows you to create some cool, original designs, using your theme’s foundations, and all without getting your hands dirty with the code.
However, CSS Hero isn’t just for amateur coders. Inspector Pro is an exciting tool for experienced developers looking to build a website from the ground up.
The add-on makes it entirely feasible that you could build a site from scratch, watching your creation come to life as you code, line by line. More realistically, however, it takes the guesswork out of theme customization, which will save huge amounts of time for developers undertaking client work.
Overall, CSS Hero is a top plugin, and one that should really appeal to WordPress users of all skill levels. If you haven’t already, check it out!
(update – 16th March – since writing this post, CSS Hero have kindly provided us with a special discount coupon code entitling WinningWP readers to up to 40% off – view coupon).
Using CSS Hero? Thoughts?