Basic Editor

SiteOrigin CSS is located in the main WordPress menu at AppearanceCustom CSS. The Editor is split into two main interfaces, the basic text editor and the visual editor. The basic text editor is the interface you’ll see when first clicking on AppearanceCustom CSS. Let’s take a look at the various parts of this page

Top toolbar


The top toolbar contains the following buttons:

  • Snippets: A theme dependent option containing predefined CSS snippets. For the moment you’ll only see this button with SiteOrigin’s Vantage theme activated.
  • Visual Editor: The eye icon is used to open the visual interface with a left column of easy to use controls.
  • Visual Code Editor: The expand icon opens the visual interface just as the eye icon does. The difference is that the left column of controls is replaced by a code editor. This mode is perfect for advanced users who want a code inspector and visual reference but don’t need CSS property controls and would prefer to work directly with the code.

Editor field


Below the top toolbar, you’ll find the editor field. If you’re comfortable with CSS you can start writing rules right away. If you use either of the visual interfaces, your saved CSS rules will be saved to this field.

Right sidebar


The right sidebar contains a dismissible introductory video, below that you’ll find revision history. Once you start saving CSS a list will populate with save points that you can roll back to if needed.