Note: We do not offer custom code support and cannot offer assistance with the implementation of custom code. If your custom CSS interferes with default Semplice functionality, we recommend removing it. 

Adding custom code or CSS to Semplice is very simple. If you're familiar with coding or you have a small snippet to add for a plugin or hack, here's where to add it.

Please note, custom CSS added will NOT show in the content editor and will only show while viewing or previewing your live site. 

Adding custom CSS globally

To add custom CSS that will take place on your entire website, navigate to Customize > Advanced > Custom CSS.

Adding custom CSS on a page-by-page basis

You can also add CSS that will only take place on your page individually. Navigate to the Branding tab located in the top bar of the editor, and find the 'Edit Custom CSS'. CSS added here will only take place on this page.

Adding custom CSS for each device width

You can also set your custom CSS to only take place at certain device widths. Under Customize > Advanced > Custom CSS, just select a device width from the dropdown options.

Note: Any custom CSS you add within Semplice will not be erased if your site files are moved or deleted.

FAQ

Will custom CSS be overwritten when updating Semplice?

Customizations added in the Semplice backend will never be erased or overwritten when updating your Semplice theme. The only time modifications will be overwritten is if you've modified core Semplice site files without creating a child theme first.

Troubleshooting

Why is my custom CSS not showing?

Custom CSS will only take place when viewing your site live or in preview mode. If you've added custom CSS but it's not displaying correctly, we recommend you check your CSS syntax to ensure there are no errors. You can use a CSS validator like this one to check for errors.