The problem: customising your CSS
You’ve bought that theme that you always wanted, you’ve tweaked the theme settings and added all your favourite plugins but something’s still not quite right… a few bits and pieces need a little customisation.
Maybe the link colour is too pale, or that h1 tag is too small, or maybe you’d like to spruce up your contact form.
The problem is: if you don’t know any CSS it’s not easy to get the look you’re after and even if you do know some CSS, wouldn’t it be nice to make your edits and see what they look like on the page… in real time?
The solution: CSS Hero plugin
Step forward the CSS Hero plugin, which I first heard about on twitter and Facebook and which I’m now using on this Divi 2.0 website.
When I want to edit CSS I usually find the selector I want to change using the Chrome Developer tools, copy and paste the selector and its attributes into the custom CSS section of the Elegant Themes ePanel, make the changes and check out what it looks like on the live site.
The CSS Hero plugin now allows me to do that whilst looking at the page and in real time. That’s a big saving of both time and effort.
Customising your WordPress theme’s CSS
Here are three themes that are “Hero Ready”, which means that CSS Hero can edit them straight out of the box with zero configuration.
More and more Hero Ready themes are being added all the time, but if your theme is not on the list, all that is needed is a simple quick configuration before you can use CSS Hero.
The boilerplate is Twitter Bootstrap with very responsive touch friendly theme options that work on any device.
Divi 2.0 theme
It allows you to quickly build custom pages by combining various building blocks, and arranging them with a drag and drop interface.
Blogly Lite theme
It has a flat design style and its clean and light layout makes it ideal for personal blogs.
It also uses post formats.
Divi 2.0 by Elegant Themes is “Hero Ready”
The good news for all you Divi users out there is that Divi 2.0 is Hero Ready.
That means that once you’ve installed the CSS Hero plugin it will work with your Divi theme… straight out of the box!
Divi 2.0 theme description
Divi 2.0 is a premium WordPress theme by Elegant Themes that comes with a powerful PageBuilder and an easy to use drag and drop interface.
It allows non coders to quickly and easily build custom pages by adding Section, Rows and Modules and rearranging them to create the desired effect.
Divi comes with thirty three Modules, which include text, images, galleries, tabs, sliders, pricing tables, testimonials, call to action and a whole lot more.
Divi also has an extensive number of articles and videos which make it easy to learn how to use the Divi Builder.
Having the Divi theme Hero Ready really is the icing on the cake for all Divi users.
Just a few of the themes that are “Hero Ready”
This is a list of a few popular WordPress themes that are “Hero Ready”.
The bar counters give you an idea of the percentage of the theme’s CSS that CSS Hero is configured to display.
- Radiant theme 85% 85%
- Divi 2.0 theme 85% 85%
- Blogly Lite theme 80% 80%
- Genesis Framework theme 95% 95%
- Twenty Fourteen theme 90% 90%
- WP Bootstrap theme 80% 80%
CSS Hero ready themes
Editing a theme’s CSS with CSS Hero is pretty straightforward and once you’ve installed the plugin you’ll be up and running in no time at all.
CSS Hero can edit some themes straight out of the box with zero configuration, and they are adding more and more all the time.
If your theme is not on the list of preconfigured themes, a simple quick configuration is needed before you can use CSS Hero.
If you are coding your own theme and want to customize it to get the best interaction between CSS Hero and your theme, you can visit the CSS Hero website and check out their documentation for details.
Page specific CSS edits
CSS Hero makes it easy to locate an element and change its CSS, but what if you only want to change the appearance of that element on a specific page?
If you want to make Page specific CSS edits in WordPress you have to use body classes
This video from the guys at CSS Hero shows you how to find the Page specific body class using Chrome Developer tools and add it to the front of the selector we want to edit.
Once the modified selector is pasted into CSS Hero’s custom classes area and saved, it becomes available when you select the element you want to edit.
And… you can customise your plugin’s CSS as well
Lots of plugins generate visual interfaces and elements that can be tricky to customise in order to fit the look of your site. You can use CSS Hero to customise the look of any “Hero Ready” plugin without writing a single line of code.
Gravity Forms plugin
Contact Form 7 plugin
CSS Hero 1.2 – Rocket Mode
As well as improvements such as native SSL, a rewritten saving logic and a new !important statement CSS Hero has introduced Rocket Mode!
Rocket Mode allows CSS Hero to work with any theme – you can edit your theme’s CSS without having to carry out any configuration… even on non-hero ready themes.
This feature is still in beta mode so the guys over at CSS Hero recommend using it carefully and being a tad patient with it.
“Today here at CSS Hero headquarters we’re excited to announce a major plugin upgrade that we feel is the first step on the way to making CSS Hero work with any WordPress Theme.”
Learn how to use CSS Hero with the CSS Hero Academy training videos
There’s nothing worse than a plugin with awesome features that is let down by poor “show me how” documentation.
Sure you work it out eventually but not before you’ve wasted a lot of time and effort and suffered a heap of frustration along the way.
Fortunately the CSS Hero team have made learning easy with a collection of short, to the point and easy to follow videos aimed at all skill levels from CSS newbies all the way to CSS gurus who are looking for a great tool to speed up production.
Oh and one final thing… the videos are presented by Colin Cartwright who brings to each and every video his own unique brand of enthusiasm, professionalism and awesome coding skills.
Beginner level videos
- The CSS Hero Member Area
- How to install or upgrade CSS Hero
- How to start CSS Hero
- An introduction to “Hero-Ready” Themes
- Working with “Hero-Ready” Themes
- How To Change Text Properties
- How to use the !important Feature
- How To Change “Mouse Over” Properties
The CSS Hero Academy
“Here at the CSS Hero Academy, it is our job to show you how to get the most out of CSS Hero.
No matter what level of CSS experience you currently have, we aim to teach you how to use CSS Hero to modify the appearance of any part of your WordPress theme without typing a single line of code.
We start off by teaching you how to use CSS Hero to make basic changes to your WordPress theme, but as the Academy grows, we’ll also show you some really cool things you can do with CSS Hero that will make your web pages look spectacular.”
Intermediate level videos
- Having Fun With CSS Backgrounds
- Border & Border Radius Properties
- How to use CSS Hero to add a CSS Custom Class to Divi
- Having Fun With The Divi “CSS ID”