SoNET Web Engine, user support.

How-To Customize Your Website. Videos and articles.

Help Center Look & Design

Add your own CSS

For changes the Template Kit has no setting for, you can type your own CSS rules on the Custom CSS tab. They are added after all other styles of your site.

Watch it done: a short silent video with captions · 0:56. The steps below show the same thing picture by picture.

Before you start

  • Log in and open ADMIN › Template Kit.
  • Some knowledge of CSS (the language web page styles are written in).

Template Kit first

Step 1. In the Template Kit, open the Custom CSS tab.

Step 1: In the Template Kit, open the Custom CSS tab.

Step 2. Colors, fonts, buttons and spacing have their own Template Kit fields: use those first. Custom CSS is for what they cannot do.

Step 2: Colors, fonts, buttons and spacing have their own Template Kit fields: use those first. Custom CSS is for what they cannot do.

Create CSS from a description

Step 3. Type CSS rules in the box (they are added after all other site styles, so they win), or click Create from Description and say what you want.

Step 3: Type CSS rules in the box (they are added after all other site styles, so they win), or click Create from Description and say what you want.

Step 4. Describe the styles in plain words. Here: "Give quotes in blog posts a thin line on the left and italic text."

Step 4: Describe the styles in plain words. Here: "Give quotes in blog posts a thin line on the left and italic text."

Step 5. Leave Update existing CSS ticked: it changes your own rules where it can, and adds the rest.

Step 5: Leave Update existing CSS ticked: it changes your own rules where it can, and adds the rest.

Step 6. Click Create. After a few seconds the CSS it wrote appears under Generated CSS (preview).

Step 6: Click Create. After a few seconds the CSS it wrote appears under Generated CSS (preview).

Step 7. Read it, and the line under it that says how many rules Apply will update or add.

Step 7: Read it, and the line under it that says how many rules Apply will update or add.

Step 8. Click Apply: the CSS goes into the Custom CSS box. Nothing is saved yet.

Step 8: Click Apply: the CSS goes into the Custom CSS box. Nothing is saved yet.

Preview, then save or leave

Step 9. Click Apply Preview to try it.

Step 9: Click Apply Preview to try it.

Step 10. Reset Custom CSS is here too (not clicked in this video). Save makes your rules live (not clicked in this video).

Step 10: Reset Custom CSS is here too (not clicked in this video). Save makes your rules live (not clicked in this video).

Step 11. Leave without saving and nothing changes.

Step 11: Leave without saving and nothing changes.

Check it worked

After saving, look at the pages your rule affects as a visitor, also on a phone.

Good to know

  • Copy the box's text somewhere safe before big changes, so you can put it back.

Related help

Shown on the 2026 version of the SoNET Web Engine. Last checked 9 November 2026. Something different on your screen? Tell us through the Contact page.