How to Add Custom CSS

Custom CSS is for small visual fixes after your colour scheme is set. Do not use it to restyle the whole site.

1. Open Custom CSS

Log in and open your website.

Go to Customise Website, then click Custom Css.

In Studio you can also open Custom CSS from the top tools.

2. Add one change

Type a focused rule. Change one area at a time.

Prefer class names over one-off selectors that hit the whole site.

3. Start with practical rules

This website uses Bootstrap 5.3. Write normal CSS or SCSS-compatible rules and target the classes already present in the template. Do not paste Tailwind utility examples into a Bootstrap template.

Change the brand variable:

:root {
  --primary: #642fdf;
}

Give primary buttons a softer shape:

.btn-primary {
  border-radius: 0.75rem;
}

Keep content images responsive:

.page-content img {
  max-width: 100%;
  height: auto;
}

4. Fix common styling problems

• A rule affects too much: add a component or page wrapper before the selector instead of styling every element globally.
• The rule does not apply: inspect whether the template uses a more specific Bootstrap selector. Increase specificity carefully; use !important only when the theme requires it.
• Desktop looks right but mobile breaks: add a focused media query and test at a phone width.
• A future template change breaks the rule: avoid selectors based on fragile element order such as deeply nested :nth-child chains.
• Colours are duplicated everywhere: use CSS variables so one brand change remains maintainable.

5. Preview

Watch the preview as you edit.

Check the same change on a phone-sized screen.

6. Publish

Click Publish when the preview looks right.

Open the live page and confirm the fix.

Pro-Tip

Set brand colours in Appearance Editor first. Keep Custom CSS short so later changes stay easy.