This is what the SiteOrigin CSS interface looks like when you first get started. It’s fairly blank with your main CSS editor here and a list of your revisions down the right side.
The editor has two buttons in the toolbar. These buttons are for the visual editor mode and the expanded editor mode. We’ll start by looking at the visual editor mode. This mode is where most beginners will want to get started.
So here, you’ll notice we have a large preview of our site. On the left, we have the visual controls and along the bottom we have the inspector.
This inspector is the same tool that you’ll use in both visual and code modes, so let’s take a look at that first. When you hover over an element in your site preview, the inspector will highlight it, giving you some indication of what that element is.
Clicking on the element will select it in the inspector. From here, you can view a hierarchy of the elements that contain the selected element. Hovering over the hierarchy will highlight the parent element. Clicking on an element will select it.
Underneath the hierarchy, you’ll see a set of selectors that your theme is using to target the selected element. It displays the most specific selector at the top and the less specific ones below that. Hovering over any of these selectors will highlight all elements targetted by this selector.
For example, here the heading of our site is an H1 tag targetted by site-header h1, but it’s also targetted by the more general selector h1. So you can choose the selector that targets either the single element or the group of elements you’re after.
Most of the time, you’ll be interested in the top selector, which the visual editor automatically selects for you when you click on an element.
So let’s take a look at the visual controls down the right-hand side. They’re separated into text, decoration and layout controls. The visual controller will target the selectors that you have selected up at the top of the screen, here. Any changes you make will reflect in real time so you can refine the changes you’re making.
If you’re already familiar with CSS, then you can take advantage of the expanded mode. This mode gives you a full preview of your site and the CSS editor on the left. This editor intelligently scans your site to find any important selectors and makes them available through the editors auto-completion feature. Or you can use the inspector to add new selectors or attributes to your code.
When you’re done, simple click Save CSS and your changes will be instantly reflected on your site.