SiteOrigin already has a solid 5 star, 500K downloads hit with its free Page Builder WordPress plugin – and it may have topped that with its new SiteOrigin CSS Editor. This is a CSS editor for beginners and advanced users with 2 modes of operation – easy Point & Click CSS edits and Advanced full CSS2 & CSS3 edits and it works well with just about any WordPress Theme:
Greg Priday, the South African developer of both Page Builder and CSS Editor, has once again used WordPress’ Customize Theme window to embed the CSS Editor in a most UI savvy way. So users familiar with doing Theme Customizations will feel perfectly at home. So lets see how the Point & Click CSS Edits work.
Point & Click CSS Edits
Anybody who has worked with Headway Themes very good CSS Editor will find the Point & Click mode of Site Origins CSS very similar in approach:
However, the CSS Point & Click editor has done one better – it incorporates some CSS3 commands as well as full CSS2 command support.
Operations are straightforward in Point & Click mode. Highlight in the Page or Post windows an element you want to change. The CSS Editor then shows the cascading styles that determine the CSS that are applied to that element.Click on the top #block-bu9556… and you will get the most specific CSS styling directive. Move down one directive to .block-type-navigation…. and a broader CSS directive can be changed. But changes here may change styling elsewhere on the page.
To change CSS styling, the left side bar has a 3 tab list of all the CSS edits available.The Text tab shows all the possible text CSS edits. The Decoration tab provides the background, border, and opacity settings while the Layout Tab provides several CSS settings including margins, paddings, z-index, etc.
But one of the neatest features is that as soon as you change a CSS setting it is immediately reflected in the website window. This is invaluable because you can see if the color or margin or whatever CSS styling change is working exactly how you want.
Yes, for beginners, it certainly helps to know CSS concepts and styling options. But this CSS veteran has already learned a few amazing CSS trick by using the Point & Click option of CSS Editor.
Advanced CSS Edits
The Advanced CSS editor works in a similar fashion to the Point & Click edit mode:
the major change is the lefthand sidebar no longer contains the shortcut CSS properties, now you must know your CSS. You can add CSS styling [no LESS or SASS] but now the full set of CSS2 and CSS3 commands are available. And Advanced CSS Editor provides a wonderful code completion popup that will remind users of the correct CSS syntax as they create their styling. CSS Editor also helps in the far lefthand column, icons are winking on and off with various warning and error messages to steer CSS writers to a well formed CSS styling command.
And just as in the Point & Click editor, the Advanced CSS editor, as soon as a well formed CSS command is completed, it is immediately reflected in the website window. Contrast this with what users get with most CSS editors – they must close the CSS file and then redisplay the website. In sum, CSS Editor not only speeds up CSS changes in WordPress but also facilitates learning CSS in the process.
Other CSS Editor Goodies
One of the tricks of working with CSS Editor is to use deliberate “mistake” edits – like background-color:red; These deliberate “mistakes” allow me to confirm quickly in the website window that the correct HTML block is being edited. I can quickly remove this mistake and put in the true CSS edit after inspecting the website window.
A second goodie is the visible cascade at the bottom of the website window. One can quickly move up the cascade by clicking on the next level to the left. Again, this allows a CSS styler to see the design behind an existing styling.
Finally, at the CSS Editor start page there is a CSS Revisions list. This list allows users to revert back to an earlier set of edits by clicking on the dated revision. I use this to make a whole series of potential edits for a client and then rollback all those edits quickly if the client wants to try a different approach. It would be a nice future feature to be able to rename these edits.
Summary
I no longer use Appearance | Editor but rather Appearance | Custom CSS to do most of my initial WordPress Styling edits with the exception of websites based on Headway Themes whose Live Editor is nearly equal to CSS Editor. I know once I have a solid, agreed upon set of CSS edits, it is easy to rollback the stylings into a child theme’s style.css file. But most importantly with SiteOrigin CSS Editor, I can do live WordPress CSS edits for a client quickly and effectively. And given CSS Editor’s unanimous 5 star rating at the WordPress plugins page, other WordPress developers have caught onto this strong candidate for 2015’s best WP plugin.