CSS Hero and Site Origins CSS Editor:Update

At the start of this year, theOpensourcery did a review of twoWordPress CSS Editor plugins that help WP developers make CSS corrections more effectively. Since then there have been notable improvements to the two plugins -especially CSSHero 2.0.. Since both plugins will be a key part of our upcoming May 7 free presentation on WordPress with CSS Style  at the Runnymede Library in Toronto., an updated review is in order.

Have you ever had the problem that you just can’t seem to correct the CSS on one of your WordPress websites? Using WordPress  Editor sometimes does  get you Horseshoes close to a solution but many times is an exercise in frustration. Next you try your browser’s Inspect command and that can get you started towards isolating the right CSS  and stylesheet to change to correct the errant style. But  the Inspect command will only allow you to temporarily test CSS changes.  So developers still have to find and change the underlying .css  file and CSS code snippets.. However don’t be surprised in the new ultra sophisticated theme systems to find that changes may be required in more than one .css file. Thus  don’t be surprised if that correction produces some unexpected CSS styling changes or does not work.

So what the software developers at premium plugin   CSSHero and free plugin  SiteOrigin  CSS Editor did  – they  imitate the  Inspect command available in many of the top browsers:
but they allow users to make quick and interactive CSS styling corrections. The basic idea is you click on the area of the web page  where you want to make a styling change. Then both tools offer a list of CSS styles that may be used to change a web page’s look and feel:
cssh2toolsNow it is interesting that the two CSS tools share  a lot of the same features:

  • First, as soon as you make a CSS change its effect is immediately shown live on your web page.  See the CSS Hero and CSS Editor interactive styling examples below. This interactive styling is a great way to learn CSS and as well as test out CSS changes live with a client;
  • Second, both tools use the Inspect command procedure: click on a portion of the page and the associated cascade of style sheet settings appear for the user to change. CSSHero supports both left and right mouse clicks while SiteOrigin CSS Editor only supports left-mouse clicks;
  • Third, both tools are surprisingly fast in showing a list of cascading style settings which could make the changes on the web page. They are equally fast in showing a change on the web page. In fact, this is how you can detect an error in your choice of CSS style to edit because say the intended text font-size change for example, does not occur right away or is incomplete. Then you know you have likely chosen the wrong style setting and can try another on the list;
  • Fourth, both tools provide a complete set of  CSS styling options for the box model, text styling, layouts, and decorations;
  • Fifth, both tools offer only a few of the CSS3 styling options  like text shadows, box shadow, etc. CSSHero  uniquely supports simple CSS3 Transitions;
  • Sixth, both tools provide an Inspector panel  showing all the changes made to a website and the ability to edit them;
  • Seventh, both tools provide a dated History of Revisions list where users can revert back to an earlier state of revisions;
  • Eighth, both tools provide an export of .css  changes command.

Here is a tutorial on the latest CSShero

As you can see both tools offer a remarkably similar set of basic CSS editing features. But if you checked out the links to their respective intro video tutorials, you will see the tools do their CSS edits in unique fashion. The next part of this review will look in detail at the individual features of both tools. But the most important is that CSSHero has a per website price while SiteOrigin CSS Editor is free. But what is important to note is that in the last half year, CSSHero has seen a major upgrade to version 2, while CSS Eitor has refined and polished its feature set.

CSSHero Features
CSSHero has 3 plans for purchasing the plugin. Basic for $29USD provides CSSHero for 1 website. Personal  for $59USD provides CSSHero for 5 websites plus the Pro Inspector add-on. This Inspector add-on is a powerful  extension to CSSHero  The $199 Pro Plan allows deployment on 999 websites and includes the Pro Inspector. TheInspector is a vital part of  CSSHero’s 3 CSS edit methods.

First, after pressing the Blue Start button,  CSSHero  allows users to select the object to be edited simply by pointing to it. Now to  change the CSS, CSS Hero provides a pulldown  with two main options:

  1. a list of CSS edits available for that item or
  2. a set of Readymade stylings for that element. Readymade stylings simplify multistep  CSS edits like the Styles Panel does in Photoshop:

So this is the first two methods for doing CSSHero edits. The third, involves using the Pro Inspector panel. The Inspector allows CSS savvy developers to point at the element for  editing and then make the changes directly to the CSS code in the Inspector panel as seen in the screenshot below:

CSS Hero 2.0 has enhanced the Pro Inspectors options including adding more support features. The bottom line is that for CSS savvy developers, both CSSHero and Site Origin CSS Editor provide great point and click speed ups to CSS Editing.. However, CSS Hero goes beyond CSS Editor first by proviiding the new  Readymade CSS stylings and by providing for added mobile views of the web page for editing:
csshscreensizeThese mobile views are portrait and landscape smartphone screens plus portrait and landscape tablet screens along with a standard desktop screen in landscape mode, More important, CSS Hero generates the proper media query CSS for each of thesedifferent screen views. So one can build separate CSS for five screen modes. In contrast, SiteOrigins CSS Editor does not have these mobile screen views [there are Chrome and firefox browser extensions which put the browser screens into these even more variations on these mobile views but CS Editor does not automatically generate the media query CSS like CSS Hero does.

Another plus is that  CSSHero supports Presets, which are a snapshot of all the CSS changes made on a website to a finished look and style. Once saved, this preset can be recalled and the website can be shown with all those specific changes. When working on a client website with 2 or more stylings, this provides a convenient way of showing off the different stylings especially if you have the Hero Inspector which shows all the presets with thumbnails for each. Site origins CSS Editor does not have named snapshots/presets; but you can approximate this feature by copying the the list of all changes to your own named.css file and copy and pasting that named.css file at a later date.

As previously noted, CSSHero  works pretty fast. But there are two “features” slowing things up. First, every-time I start up CSSHero it produces a JavaScript alert warning me that NextGen Gallery plugin is not supported. This has no effect on CSSHero because I only use the superior backend features of Nextgen managing gallery images and not NextGen’s display functions. This is part of the compatible plugins and themes requirements of CSSHero. Likewise I have to turn on the Rocket Assist feature further delaying processing when I use Headway and BootStrap themes. In sum, it is disconcerting to find CSSHero supporting selected themes and plugins while giving distictly  slower operations with other themes and plugins.

SiteOrigins CSS Editor Features

As noted, CSS Editor provides nearly all of the CSSHero feature set at no cost, In fact, for many WordPress users CSSEditor is a better solution because it is easier to use for many simple CSS edits.. And SiteOrigin CSS Editor has  some unique feature. First, it has an Inspector where CSS code can be changed directly in the list. Like CSSHero’s Pro Inspector the the  CSS editor is smart warning  of any CSS syntax errors. In this way,one can go to CSS3 generator websites like CSS3Maker, create  some nifty CSS3 Animation styling, and plunk it into the CSS Editor CSS.. This is not as easy as the Animation Shortcode plugin, but it is quite usable.

Second, there are two modes of operation, CSS beginner which does most all of the changes like CSS Hero by pointing and clicking on new CSS option settings. But the expert mode allows users to add the CSS styling directly and again with a smart CSS editor at your disposal.

Finally as previously noted, CSSHero and CSS Editor do not collide in making their CSS styling change files. So in fact, I frequently run both tools on the same website. Alternating between the tools when one cannot find the cascading CSS change which the other often does find.


CSSHero and SiteOrigins CSS Editor are part of the WordPress Frontend Design revolution. These tools provide the CSS styling  compliment to superior drag and drop WordPress Theme Design tools like Headway and Beaver Builder. I now ask clients to find a theme which they would really like to follow.  Then I am confident that I can reproduce that theme design in either Headway or Beaver Builder design tools using CSSHero and CSS Editor to provide the exact styling requirements. Even better, I know that I can make changes to layout and styling very quickly using this array of tools. Bottom line is that CSSHero and Site Origins Editor are the key ingredients to making WordPress website design and development much more productive. Finally, if you are in the Toronto Area May 7th weekend  come to the presentation on WordPress with CSS Style which will feature a demo of these two plugins in action.

Pin It on Pinterest