Basic Editor

The basic editor is the screen that opens when you go to AppearanceCustom CSS. Write CSS in the code editor, save it, and manage your revisions and settings in the right column. This page describes each part of the screen.

The SiteOrigin CSS editor with custom CSS, the Save CSS button and the CSS Revisions list

Code Editor

Type your CSS in the code editor. If you know CSS, you can write rules here and save them at once.

  • The editor shows line numbers and colors your code.
  • Inside a rule, the editor suggests CSS property names and values as you type. Press Enter to accept a suggestion.
  • The editor checks your CSS and marks problems in the left margin. Hover a marker to read the message. Some newer CSS, such as custom properties or the :has() selector, can show a warning even when it is valid. A warning does not stop you from saving.

The text under the editor names the theme that the CSS belongs to, for example “Changes apply to SiteOrigin Corp and its child themes”. Read CSS Storage and Output to learn how the plugin stores CSS for each theme.

Toolbar

The toolbar above the editor has two icons:

  • Open Visual Mode (eye icon): opens the visual controls next to a live preview of your site.
  • Open Expanded Mode (arrows icon): opens the code editor next to a live preview of your site.

Read Visual Editor for both modes.

Save Your CSS

Click Save CSS at the top of the right column. The page reloads and shows Site design updated. Your CSS is live on the site at once.

The Save CSS button also saves the Editor Theme and CSS Output Location settings. The save icon in Visual Mode and Expanded Mode saves only the CSS.

If you try to leave the page with changes you have not saved, your browser asks you to confirm. The browser can also ask after you save with the save icon in Visual Mode or Expanded Mode. Your CSS is saved; read the FAQ.

Right Column

Get The Full Experience

This box describes the Web Font Selector in SiteOrigin Premium. It does not show when SiteOrigin Premium is active.

Getting Started Video

This box links to the Getting Started page. Click Dismiss to hide it. The plugin remembers this for your user account.

CSS Revisions

Each time you save CSS that is different from the saved version, the plugin adds a revision. The list shows the date and time of each revision and its size in characters. The newest revision is marked (Latest).

  • The plugin keeps the 15 newest revisions and deletes older ones.
  • Each theme has its own revisions.

To go back to an older version of your CSS:

  1. In CSS Revisions, click the date of the revision. The page reloads with that revision in the editor, and a notice shows its date.
  2. Check the CSS. You can open Visual Mode or Expanded Mode to preview it.
  3. Click Revert to this revision. This button replaces Save CSS while a revision is open.

Reverting saves the older CSS as a new revision, so you can undo the revert in the same way.

An older CSS revision loaded in the editor with the Revert to this revision button

Editor Theme

Choose the colors of the code editor: Light (default) or Dark. Click Save CSS to keep your choice. The setting applies to all users.

CSS Output Location

Choose how your site loads your CSS:

  • Dedicated File (default): the plugin saves your CSS to a file and links it in the head of each page. Browsers can cache the file.
  • Inline: the plugin prints your CSS in a <style> tag in the head of each page.

Click Save CSS to apply the change. Read CSS Storage and Output for the details.

The Editor Theme and CSS Output Location settings