Customize Any WordPress Theme with CSS Hero

You know those annoying design problems you’re always having with WordPress themes?

Maybe you don’t like the color of the header. Or you’ve got a button that’s slightly askew. Or you hate the borders on your sidebar.

There are a million little design problems that fall into this category.

The good news? Most of these problems are easily fixable.

The bad news? You’ll need to learn about CSS to fix them.

CSS is the design language of the web. It’s a relatively easy language to learn. Assuming you’re the kind of person who learns new languages just to fix a few small problems on your website.

Most people aren’t like that. And that’s where CSS Hero comes in.

CSS Hero is a WordPress plugin that turns anyone into a WordPress superhero.

Imagine customizing the CSS on your WordPress theme without even looking at the code. Just click the part of the page you want to change, then adjust the settings in CSS Hero.

I use CSS Hero on this very website. I’ve been coding CSS for nearly a decade, and I find it easier to make quick styling changes with CSS Hero. For me, CSS Hero is a productivity tool.

In this episode of WordPress Power Tools, we’ll take a quick tour of CSS Hero.

Related Resources

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn

10 thoughts on “Customize Any WordPress Theme with CSS Hero”

  1. I consider myself an advanced beginner with WordPress. I love the idea of modifying my themes (I am currently using twenty fourteen) but am concerned that modifying the CSS will potentially cause issues as WordPress and plugins evolve. I am not interested in learning CSS. Is it difficult to restore the native theme without altering the content of my website, if I encounter problems? Changing the CSS seems a little scary…

    1. Luke: CSS is actually the safest way to customize a theme. I would compare it to painting a room vs. knocking a wall down and building a new room. The underlying HTML and PHP are unchanged, so the chance of totally breaking your site with a CSS change is minimal.

      Also, with CSS Hero there’s the option to completely disable your CSS customizations. So, you can turn off your formatting at any time. You can even export the CSS you create with the plugin so you can use your customizations without the plugin active.

  2. My comment is “wow”! What a terrific power tool, Kirk. It looks like a super user friendly way to tweak things that drive me mad, like paragraph, line and bullet spacing (which I now do with HTML – not a good practice, I know!). I especially like its ability to let you see you site on various devices in both landscape and portrait modes. Will definitely be giving it a try, once I learn more via your helpful (as usual) link.

    Thanks so much for telling us about this great plugin!

    Linda

  3. You saved me today — this is just THE BEST PLUG-IN! And, you’re the best to share with us. Thank you, thank you again.

  4. Kirk,

    I am a CSS Hero plugin user and I have the basics of viewport for mobile, tablet and desktops devices covered via edits.

    However, devices vary with viewports and how do I use CSS Hero to make changes using the visual edit? I have installed the Inspector and I see the changes necessary in the preview window. But the code is a but cryptic and not intuitive to make. Have any suggestions on how to use any tool to quickly get these key pages on my site looking similar to the composition of the desktop page.

    1. Hey Kevin, Sorry for the delay.

      CSS Hero will automatically add your styling changes to the active view mode. For example, to change styling for a tablet in landscape mode set the responsive view to tablet/landscape, then style as needed.

      But I suspect you already know that part.

      To create custom styling for different sized devices, you’ll need to create your own breakpoints using CSS Media queries. At that point you’re essentially writing CSS manually in the inspector, but with the advantage of seeing the live preview.

      Most designers pick a few widely used screen dimensions and use those as their breakpoints. Honestly, there are so many screen dimensions and resolutions in use, it’s not possible (or even advisable) to support them all.

      I believe the default responsive breakpoints that CSS Hero uses will work fine for 99% of the websites out there. However, a few sites will have special needs. In those cases, designers will need to dig in and do things the old-fashioned way.

Leave a Comment

Your email address will not be published. Required fields are marked *