Skip to content

How to Customize Tracks with CSS

CSS can be used to customize the style of any element in Tracks. The easiest way to add your own CSS is with the Additional CSS section in the Customizer.

To add your own CSS with the Additional CSS section:

  1. Visit the Customizer (Appearance → Customize)
  2. Click on the Additional CSS section
  3. Paste in or write the CSS you want to add
  4. Once you've added your code, click the Save & Publish button

Your site will update with your CSS edits as you type, so you can easily preview them before saving any changes.

Note: want a head start with your CSS? Check out the Tracks CSS Snippets Collection. It's full of pre-written code snippets you can copy and paste to customize your site with.

Common Questions

I added my CSS, but nothing is happening?

First, check for any syntax errors in your code. Is there a period missing before a class name, or a misspelled selector?

If not, your CSS is likely not "specific" enough. Try adding an !important tag like this:

.site-title {
  font-size: 24px !important;
}

Should I be using a child theme?

You could use a child theme to add your CSS. However, using the Additional CSS section is much easier and works similarly.

If you want to edit template files, reorder elements on the page, or modify any functionality in Tracks, you will need to use a child theme.

To learn how to customize Tracks with a child theme, please refer to the child theme tutorial.

Return to Tracks Support Center