WordPress Plugins: Site Origins CSS Editor

Earlier this year I described 3 upcoming breakthroughs in WordPress development . One of those three breakthroughs looked for a better, live CSS editor. And as if on cue SiteOrigin, the developers of the excellent free PageBuilder plugin, produced another plugin winner with its free CSS Editor.
Think of CSS Editor as a Live Editor. It is live because users edit directly the CSS on a Page or Post  by clicking on a HTML element and then changing its style by rewriting its CSS [the CSS expert’s method] or changing a CSS property sheet [as shown in the screenshot above] . This is how CSS Live Editor works – hover over different HTML elements on screen. When CSS Live Editor  highlights the specific HTML element you want to change click on it and  then change the element’s CSS in the left panel. CSS Live Editor makes the changes immediately in the screen panel containing your Post or Page. Best of all, the CSS Live editor is very fast.

This is a great way to learn exactly how Cascading Style Sheets work because you see directly how changing the CSS alters the style on a Page or Post. Now lets see how the two methods for changing CSS are invoked.

When you install the plugin, it creates a menuitem Custom CSS under the  Appearance  main admin menu. Click on Custom CSS and when the CSS Editor starts up for the first time it has minimal content:
cssstartThere is no previous CSS edits in the big CSS Edit Panel on the left nor are there any CSS Revisions. But if you are savvy in CSS, just start entering any CSS [2 or 3] in the Edit panel. CSS Editor provides  two very helpful aids. As you type in  your styling code, CSS editor provides a popup list of valid CSS2 and CSS3 options. It also provides warning icons in the right margin until you have entered correct CSS.

As we have seen, the CSS Live Editor works in two modes which are invoked clicking on one of two icons in the CSS panel icon bar. The screenshot at the top of this review shows how the simple CSS2 mode with a property sheet in the left side  panel works. By clicking on the second double arrow icon, users are put into the Advanced mode in the CSS Editor which looks like this:
csseditadvancedNote the added help the CSS Live Editor provides in Advanced mode.Click on #secondary in the left panel of the CSS inspector, and CSS Editor creates the empty CSS in the left side panel. Now click on the CSS rule in in the CSS Inspector’s right panel, and that rule is inserted into the waiting CSS code in the side panel. Now all I had to do was change the color setting. Very nice.

Finally, regardless of which mode is used, remember to return to the CSS Editor start screen [click the double arrow icon in the iconbar of the left side panel] and hit the Save CSS button.


Greg Priday, the South African developer, describes his editor as the Visual CSS Editor For WordPress That Anyone Can Use. it is certainly that as one of the best CSS styling editors available for WordPress. Watch SiteOrigin for more outstanding and free WordPress plugins.

Leave a Reply

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