You’ve heard it all before:

“The Genesis Framework is the best theme out there!”

“Genesis is hands-down the greatest theme and framework around.”

“Thumbs up!”

“Five Stars!”

Blah, blah blah — the list goes on.

Now, don’t get me wrong. I’m not bashing on the Genesis Framework at all. In fact, I love it. I truly do.

As a web designer and a blogger, I use it on almost all the sites that I create.

I’ve tried leaving it before to delve into other themes, but I always come back to it like some epic love affair.

But let’s get real…

The Genesis Framework is great, but…

When I first started out with WordPress (total newbie), all I kept reading about was the Genesis Framework.

All those quotes before, those were the kind of thing I kept reading. I wanted to use the same theme that all the great blogs I loved were using:

  • WP Beginner
  • WP Kube
  • Convince and Convert
  • WP Superstars
  • BloggingWizard

Seriously, the list could go on for miles!

I wanted to use this theme for myself. So I bought the framework with some child themes, and I dug into it.

And here’s what I discovered…

…the theme was great! My site speed what awesome; I had the theme I wanted, but here’s the issue I ran into:

I wanted to customize the child theme I had. I wanted to make it my own, but I couldn’t. The Genesis Framework had next to nothing when it came to customization options.

Come to find out, I had to use CSS (the coding language used to tell your site what to look like) to change the look of the theme.

Where was the issue with?

I knew nothing about CSS. Quite the predicament, right?

So what did I do? I dove into learning CSS through various online tools and blogs like Codecademy and WPsites and eventually become comfortable with hand coding CSS on my own.

But what is the point in me telling this semi-boring tale? (I’m woman enough to admit that I’m not always exciting *wink*)

Because I think a lot of people are in this predicament.

They read about the Genesis Framework. They learn how great it is, and they want a bit of that action.

But they also know that unless you hire a designer or know CSS, there is really no way of getting the theme to look the way you want.

And if you want to try and learn and do it all yourself, you’re looking at hours and hours of reading and learning before you’ll ever be able to change the look of your site.

Truthfully, that sort of stinks — like, a lot.

People want this framework, but they also want to be able to customize it themselves. It’s a Catch-22.

Or it used to be.

There’s a new customization plugin out, and it just changed this predicament for the better.

This plugin really has some amazing features that I have personally and rather thoroughly tested. If it were junk, I wouldn’t feel comfortable writing about it.

But it’s not junk.

It’s a great plugin with awesome features, and when it comes to customizing the Genesis Framework, I haven’t found anything that made it as simple as this plugin.

Are there are customization plugin for the framework out there? Yes, but this one is unique in more ways than one.

CSS Hero: The plugin for easy Genesis Framework customizations


Who doesn’t love a good Superhero?

Me, I’m partial to Iron Man.

But in terms of wrangling big bad CSS code in the Genesis Framework, CSS Hero is the supercharged plugin for the win.

As was touched on earlier, making customizations to the Genesis theme requires a lot of knowledge about CSS, hand coding CSS, and then tweaking said code. I’ve done this many a time and know how time-consuming it can be.

But CSS Hero takes all of that and chucks it out the window.

This is essentially how it works:

If you a can drag and click your mouse, you can customize your Genesis Framework theme.

That’s right.

You don’t need to have any CSS knowledge. Just click the item on your Genesis theme you want to change, select what you want to be changed using the interface (background color, font, add a border, etc) adjust it until it looks right, and you’re all set.

CSS Hero is designed so that you make all your visual edits on the front-end, meaning that you will be able to see all the changes as you make them.

When you like the way your changes look, you save it and it all goes live.

How it works with the Genesis Framework

I wanted to give a really good example of how CSS Hero works with the Genesis Framework, so in the hopes of being thorough, I took one of my personal blogs and completely redesigned it using CSS Hero.

My blog is based off of the Beautiful Pro child theme, which out of the box looks like this.


Now, here is what my blog looks like after a total redesign.


I edited just about everything:

  • Widget fonts
  • Background colors
  • Header and body font
  • Font color and size; font family
  • Adding Borders to certain elements
  • Border Radius (adding a curve to the edges of something)

I did a lot more than this too, but the upside was that this entire makeover took me about an hour.

One hour.

Not hours, days or weeks — one hour.

For someone like me who works designing with this framework, that’s pretty awesome. And all I had to do was click my mouse.

Here’s how simple an edit can be.

Look at Beautiful Pro’s default styling for the Blockquote:


There’s certainly nothing wrong with it, but I’d prefer to have this section really pop and match with the color scheme of my site. Using CSS Hero, here is what I do:

  • Launch the CSS Hero interface in the browser
  • Select the Blockquote element
  • Click on ‘Background’ and change the color
  • Click on ‘Border’ and add a colored border to the left
  • Select ‘Font’ and change the font family, size color and styling to italics

It’s just a few drag and click movements, but here’s the final result:


Completely different and easy to do. This would have normally taken me around 15 minutes to do, but using CSS Hero took me only a couple minutes.

Pretty great, right?

Learn More About CSS Hero

Wrapping it up

CSS Hero takes the pain out of coding CSS and tames the beast to make it easy for just about anyone to wrangle and manipulate (all in a good way).

One of the best features about this Genesis Framework customization plugin is that you can can make all your edits live and in real-time so that you save see every detail of what you’re doing.

If you’ve been looking for a way to customize your Genesis Framework child theme, consider CSS Hero as your first stop. They have a section on their site where you can try CSS Hero on the Genesis Framework before you buy it.

Posted by Ariel Rule

Ariel is a freelance blogger for hire and online marketer. She enjoys copious amounts of coffee, eating too many cookies and watching way too much TV. When she's not writing on her Mac, she is spending time with her amazing boys. Follow her on Google+.