Custom CSS gives you more control over the appearance of your Workspace website when the options in Website Styles do not cover a particular design requirement. It is intended for people who are comfortable reading and maintaining CSS, or who are working with a web designer.
Workspace no longer uses traditional website themes. Start with Settings → Website Styles to set your site-wide fonts, colours and common design choices. We’ll also be introducing styled component libraries and website themes over the coming weeks and months. Use Custom CSS only for changes that need more specific control.
Open Custom CSS
- Open Settings in Workspace.
- Select Custom CSS.
- Add or edit your CSS in the editor.
- Save your changes, then review the public website.
Custom CSS is added after Workspace’s standard website styling, so it can override the normal appearance of an element when your selector is specific enough.
Keep your CSS focused
Use the smallest, most specific rule that achieves the result you need. Where possible, add a custom CSS class to the relevant Page Designer widget and target that class instead of changing every element of the same type across the website.
For example:
.featured-introduction {
max-width: 760px;
margin: 0 auto;
}
Use clear class names and add comments when the purpose of a rule may not be obvious later. Avoid copying large stylesheets or code from an unknown source.
Check different screen sizes
A change that looks right on a desktop screen may behave differently on a phone or tablet. After saving your CSS, check:
- Important pages on desktop, tablet and mobile widths.
- Navigation, buttons, forms and gallery links.
- Long headings and paragraphs.
- Portrait and landscape images.
- Any page that uses the class or selector you changed.
Use media queries when a rule should apply only at particular screen widths.
Keep a copy of your CSS
Keep a dated copy of your working CSS before making a substantial change. If something stops displaying correctly, remove or temporarily comment out the most recent rules and test the website again. This helps establish whether the problem comes from Custom CSS or from the underlying page content.
Maintaining Custom CSS
Custom CSS is code that you or your web designer add and control. Workspace is continually improved, and changes to website components or their underlying structure may occasionally affect a custom rule. You are responsible for reviewing and maintaining your Custom CSS as your website and Workspace evolve.
Our team can help you identify whether Custom CSS is causing a display problem. If you need us to investigate, rewrite or maintain custom code, a support or development charge may apply. We will let you know before undertaking chargeable work.
When to use Website Styles instead
Use Website Styles for shared choices such as typography, colours, buttons, navigation and footer styling. These settings are easier to maintain and are designed to remain consistent across your site. Custom CSS is best reserved for a deliberate exception or a design requirement that Website Styles cannot yet provide.
