FAQ

Answers to common questions about SiteOrigin CSS.

Do I need a child theme?

No. SiteOrigin CSS stores your CSS in the WordPress database, not in your theme files, so theme updates do not change it. Read CSS Storage and Output.

My CSS is gone after I changed themes. Is it lost?

No. The plugin keeps a separate set of CSS for each theme. Switch back to the old theme, and its CSS shows in the editor and on your site again. A parent theme and its child themes share one set of CSS.

Does SiteOrigin CSS work with block themes?

Yes. With a block theme, you still find the editor at AppearanceCustom CSS, and the preview and inspector work in the same way.

How is this different from Additional CSS in WordPress?

WordPress has its own Additional CSS: in the Customizer for classic themes, and in the Site Editor styles for block themes. SiteOrigin CSS does not read or change that CSS. Both load on your site. Keep each rule in one place, so that you know which rule wins.

My changes do not show on the site. What can I check?

  • Make sure you saved. Click Save CSS, or the save icon in Visual Mode or Expanded Mode.
  • Clear the cache of your caching plugin, your host and your browser.
  • Check the theme name under the editor. The CSS only loads for that theme and its child themes.
  • Your theme may use a more specific selector for the same element. In the inspector, click the element and use a selector from the top of the selector list. Read The Inspector.
  • With CSS Output Location set to Dedicated File, the plugin must be able to write to your uploads folder. If it cannot, set the option to Inline and click Save CSS.

The editor marks my CSS as an error, but the CSS is valid.

The code editor’s checker does not know some newer CSS. Newer CSS, such as custom properties, the :has() selector or gap, can show a warning. The warning does not stop you from saving, and browsers use the CSS as normal.

Visual Mode and Expanded Mode do not open.

If the editor has no line numbers and the eye and arrows icons do nothing, the syntax highlighting setting in your profile may be off.

  1. Go to UsersProfile.
  2. Uncheck Disable syntax highlighting when editing code.
  3. Click Update Profile.

How do I edit the CSS for another page?

Your CSS applies to the whole site. To see another page in the preview, turn off the inspector and click a link, or type the page address above the preview. Read Preview Other Pages.

To style only one page, use the page’s body class in your selector. WordPress adds classes such as page-id-42 or postid-42 to the body tag. To find the class, open the page in the preview, click any element, then click body in the inspector’s hierarchy. The selector list shows the classes of the page. For example:

.page-id-42 .entry-title {
	color: #1d3557;
}

I saved, but my browser still asks me to confirm when I leave the page.

After you save with the save icon in Visual Mode or Expanded Mode, the browser can still ask you to confirm when you leave. Your CSS is saved. You can leave the page. To check, look at CSS Revisions. If you changed the CSS, the save added a new revision at the top of the list.

Can I add HTML or JavaScript?

No. SiteOrigin CSS is for CSS only. When you save, the plugin removes HTML tags, such as style and script tags, from your CSS.

Who can use the editor?

Users who can change the theme options (the edit_theme_options capability). On most sites, these are Administrators.

What happens to my CSS if I delete the plugin?

Your CSS stays in the database. The plugin removes its settings and the revisions of the active theme. Revisions of other themes stay. If you install SiteOrigin CSS again, your CSS is still there.