CSS Hero: A Plugin to Customize WordPress Themes

Published

January 9, 2014

25 Comments

If you are looking for a powerful and easy to use tool to help you customize WordPress themes, allow me to introduce you to CSS Hero, a creative platform plus WordPress plugin that intends to change the way designers and developers interact with their projects.

CSS Hero

Simply put, CSS Hero lets you customize your WordPress themes using a point and click approach. You can add special effects such as hover or shadow, edit elements such as margins and padding, experiment with live color and background changes, or even choose fonts directly from Google Fonts.

CSS Hero supports responsive themes, so you can make use of device-specific previews to ensure that your WordPress theme looks great across multiple devices and screen resolutions. There are already a good number of themes that are ready to be customized with CSS Hero, and of course, this number is expected to rise over time.

http://www.youtube.com/watch?v=yHOi0_I2inc

Apart from saving time spent on Adobe Photoshop, CSS Hero can also help you store design presets for A/B Tests. And here are some of the other major benefits that CSS Hero brings to the table:

Prototyping responsive edits is a breeze.
CSS Hero supports cross-app color picking, allowing you to pick colors from apps such as Photoshop, Fireworks, etc.
Supports several popular web fonts and glyphs.
One-click export for minified CSS, just in case you wish to migrate to a different platform.
Detailed edit history.
Lastly, CSS Hero comes with detailed documentation, so you need not worry about being stuck without help.

CSS Hero is scheduled to be released on January 15th.

What do you think of this tool? Will you be giving it a spin once it is released?

Sufyan bin Uzayr is a freelance writer and Linux enthusiast. He writes for several print magazines as well as technology blogs, and has also authored a book named Sufism: A Brief History. His primary areas of interest include open source, mobile development and web CMS. He is also the Editor of an e-journal named Brave New World. You can visit his website, follow him on Twitter or friend him on Facebook and Google+.

There are 25 comments

January 9, 2014 #

Matthew Snider

It looks super cool. Would love to try it out and see what it truly can do!
January 9, 2014 #

Keith Davis

Hi Sufyan
I’ve noticed a few plugins that deal with custom CSS recently.
I tend to check out my CSS using the Chrome Developer tools and tweak it then add it to my stylesheet.

If CSS Hero helps people get the look they are after without messing with their stylesheet that has to be a good thing.
- January 9, 2014 #
  
  CSS Hero Team
  
  @disqus_0P7eMz9saQ:disqus you nailed it! CSS Hero wont mess your stylesheet as it doesn’t touch the original stylesheet neither adds any vintage inline css rule but will simply output a clean, minified (or normal) additional stylesheet. Plus, if you want, you can easily export the hero-generated css code with one click and use it in your main stylesheet.
  - January 9, 2014 #
    
    Keith Davis
    
    Thanks for the reply guys – don’t forget to get back to these comments when you go live.
  - August 10, 2014 #
    
    Sam Pang
    
    Just want to know if your plugin is compatible with Elegant theme’s Divi 2.0? Is there a demo that I can trial this on my site?
January 9, 2014 #

Pat Tater

Any chance of this working with Genesis?
- January 9, 2014 #
  
  CSS Hero Team
  
  we’re almost there with Genesis too, should be ready for the launch date
- January 10, 2014 #
  
  CSS Hero Team
  
  and here you go! Genesis Framework is now hero-ready http://www.csshero.org/themes/genesis-framework/
  - January 10, 2014 #
    
    Dan
    
    @cssheroteam:disqus , does this mean that the many Genesis child themes are also hero-ready, or do they also need to be made compatible individually?
    - January 10, 2014 #
      
      CSS Hero Team
      
      @disqus_H77w8ZP0Vd:disqus Due to the high number and variety of Genesis child themes we can’t be 100% sure about this, however assuming that most of those child themes share the same element structure they will be editable out of the box. Anyhow, adding elements on the fly with the Quick Configurator, as @chipsheppard:disqus mentioned before, will considerably help in adding your own custom elements on the fly.
January 9, 2014 #

Chip Sheppard

Really impressive. Looks like it doesn’t matter if a theme is supported, you can make any theme hero-ready by feeding it your css selectors.
- January 10, 2014 #
  
  CSS Hero Team
  
  You got it @chipsheppard:disqus, adding elements on the fly is one of our key features, using CSS Hero in conjunction with Chrome’s Inspector or Firebug is like having a visual GUI on your inspector with the option to save and immediately commit your edits, store them in a preset or live prototype edits on the fly both for desktop and devices.
  - January 10, 2014 #
    
    Dan
    
    @cssheroteam:disqus, how would it work if we make a theme we are using hero-ready, and then they officially make it compatible after this? Could we copy over our custom css and then update with their official configuration?
    - January 10, 2014 #
      
      CSS Hero Team
      
      The worst scenario is that you’ll have more editable elements available than the ones you previously defined, your previously done edits will be 200% safe. CSS Hero’s configuration logic prevents duplicate elements so there wont be any danger.
January 12, 2014 #

Vanessa Blaylock

If I wanted to use proprietary software I’d be blogging on Medium or Tumblr or Blogger. I thought the point of WordPress was the power of Open Source. While this for-profit company is certainly free to make a subscription based tool for lease to users, wouldn’t the community as a whole be better off with more development / support / use of the powerful but underused WordPress Theme Customizer?
January 13, 2014 #

Juliette

woo that’s great, i’ve been playing with the demos for a while now and really can’t wait to see the supported themes list grow, what about pricing?
January 26, 2014 #

Keith Davis

Hi Sufyan
The tool looks great but I’d still advise folks to learn a little CSS and start playing with firebug or Chrome developer tools in order to customise their own CSS.

Got to be worth investing in a good CSS book and of course the web tools are completely free.
January 30, 2014 #

Rob

Interesting concept, but I don’t think it will take hold with people who go in and mess/customize with CSS already. Sure it makes it easier, but if it doesn’t remove the need to go mess with it in the first place, meh.
May 11, 2014 #

photo shop

I am appreciating your material………..

web designing course
November 25, 2014 #

vinc

hi CSS Hero Team!
this plugin works with a theme that i can buy on envato?
- November 27, 2014 #
  
  CSS Hero Team
  
  CSS Hero works on ANY WP theme around, however, those themes that not on our compatibilty list (http://csshero.org/themes) will need you to specify Hero editable elements, that’s pretty easy, check this 2mins video: http://www.csshero.org/video-make-css-element-editable-css-hero/
- November 27, 2014 #
  
  Guest
  
  Hey Vinc,
  
  you can make any theme element editable with the Quick Config Tool (http://goo.gl/aVT1lx)
February 5, 2015 #

Karolina

Should the changes be made on the previously created child theme?
March 4, 2015 #

Puja Reddy

Get this amazing deal on CSS hero only at DealFuel.com. Special price for DeaLClub members http://dealfuel.com/seller/wordpress-visual-editor-plugin/ Jus for $14 (DealClub $10.50)
June 4, 2015 #

sarahtaylor

Word press development is greatly used in developing websites, directories, web portal, directories and ecommerce sites.

CSS Hero

How do you stay on top of your WordPress game?