Custom CSS

CSS is the language that tells a browser how a page looks: colours, fonts, sizes, spacing, what’s visible. With custom CSS you add your own rules on top of your theme, for changes that Theme options don’t offer, such as a different font size for listing titles or hiding a section you don’t need.

Your CSS is on the Design › Custom code page (it used to be called Custom CSS), together with the boxes for code in the head and footer.

You need to know a little CSS to use this page. If you don’t, start with Theme options: colours, the logo, the sidebar and the home page sections are all there.

Add your CSS

1. In the admin panel, go to Design › Custom code.
2. Switch on Use custom CSS.
3. Type or paste your CSS in the editor (the box labelled web-custom.css). The Tab key indents, as in a code editor.
4. Click Save changes in the bar at the bottom. You see CSS file saved.
5. Open your site and reload the page to check the result.

Your CSS is loaded on every page visitors and members see, including their account pages, after the theme’s own styles, so your rules win when they target the same thing. It is not loaded in the admin panel, so a mistake can never lock you out of it.

Each save publishes a new version of the file, so visitors get your changes straight away. Open saved file shows the version that is live.

Switch it off without losing it

Switch Use custom CSS off and click Save changes. Your site goes back to the theme’s own look, and your CSS stays in the editor for later. This is the quickest way to check whether a display problem comes from your CSS.

Find what to change

Your browser can show you which CSS rules style any part of the page:

1. Open your site in Chrome, Edge, Firefox or Safari.
2. Right-click the element you want to change and choose Inspect.
3. The panel that opens shows the element’s class names (for example nv-hero) and the rules that apply to it. You can try changes there before copying them to your CSS editor.

Examples for Nova

Nova keeps its main colours and shapes in CSS variables, so many changes are one line:

/* Rounder or squarer cards and buttons */
:root {
  --nova-radius: 8px;
  --nova-radius-sm: 6px;
}

/* A smaller home page headline */
.nv-hero h1 {
  font-size: clamp(30px, 5vw, 48px) !important;
}

/* Hide the "1,234 listings" counter above the headline */
.nv-hero .nv-pill {
  display: none;
}

/* A taller logo in the header */
.nv-brand img {
  max-height: 56px;
}

/* A coloured footer */
.nv-footer {
  background: #f3f6ff;
}

For the accent colour of buttons and links, use Accent color in Theme options rather than CSS: it also adjusts the hover colour and the light tints for you.

Things to know

• Your CSS follows you when you switch theme, but class names differ between themes, so rules written for one theme may do nothing, or something unexpected, in another. Review it after a theme switch.
• Only CSS goes here. Don’t paste <style> or <script> tags. For scripts, verification tags or tracking codes, use the Head and footer code boxes further down the same page: see Add code to the head and footer.
• Keep a copy. Paste your CSS into a text file on your computer before big edits, so you can go back.
• If the panel says it can’t read your file, it shows an empty editor. Saving the empty editor keeps your current CSS; anything you type replaces it. If this persists, contact support.
• Changes don’t show? Reload the page with Ctrl+F5 (⌘+Shift+R on a Mac), and check that Use custom CSS is on. See My changes don’t show up.

Related guides

• Theme options — colours, layout and home page without code.
• Add code to the head and footer — scripts and meta tags, on the same page.
• Choose and change your theme — and our custom theme service.