Editing the stylesheet

It’s not recommended that you make changes directly to the stylesheet of the theme as you will lose these changes should you install a theme update further down the line. The best way to make style changes without danger of losing them is either by creating a child theme or with a custom CSS plugin. I recommend SiteOrigin CSS.

Once you’ve installed this plugin navigate to Appearance > Customs CSS. This will show you a screen with a text editor containing any custom CSS you have implemented, so it will be blank to begin with.

Click the eye icon on the top right of the text editor and this will take you to a visual editor of the site where you can edit the styling of the various site elements by clicking on them in the window on the right and applying alternative styling to them with the inputs on the left. All changes show you a real-time preview so it’s easy to know what you’re changing.

Alternatively if you or someone else is familiar with CSS they can just bypass the visual editor and make the customizations to the stylesheet by entering them directly into the text editor.

Once you’ve made your desired changes click the tick icon at the top of the left sidebar. This will close the visual editor and display the updated style changes in the text editor. Click the “Save CSS” button below the text editor and your styling changes will now be applied to the site.

These style changes are independent of the theme itself and are safe from being overwritten by any future theme updates that may occur.