Skip to main content
Writing custom CSS

How to write or paste custom CSS in your sites and themes

Dan Sackett avatar
Written by Dan Sackett
Updated over a week ago

When you need to do advance customization with your sites and themes you can always use custom CSS. This option should only be used if you know what you are doing with CSS and are confident that the current style fields are not giving you enough control.

When to use custom CSS

There are many good reasons to use custom CSS in your themes. Some of those include:

  • Adding media queries to the subpages of your Site.

  • Making custom positioning to header elements

  • Customizing your custom footers

  • Adding font-face declarations for custom web fonts

  • Targeting classes not available in the theme editor input fields already

Adding custom CSS

CSS can be added on a site level if it's only needed for a specific site, and in the theme level when you want that CSS to be used in multiple sites.

Here you can write any CSS you would like to apply to the site or theme. You are not 100% on your own since the CSS validator will be running while you type, but you should be careful about the CSS code you include. Some things to consider are:

  • Make sure CSS attributes you use are available in the browsers you want to share your sites with. Some newer CSS3 attributes may not work as well across all platforms so check before you add your styles.

  • Make sure your classes are spelled correctly and you are targeting the correct elements in your site. Applying styles to the wrong classes could break your site.

  • Make sure you are not overriding a style that can be set easier in the input fields above. A lot of times you can find the correlating field already defined rather than adding a custom styling for it.

Adding theme-level custom CSS

Adding custom CSS through the theme editor will affect all the sites using the same theme.

  1. Go to the Theme Dashboard.

  2. Select a theme that you want to customize.

  3. Click Edit to open the Theme Editor.

  4. Click on Custom CSS to open the theme CSS editor.

  5. Write or paste the CSS within the editor.

Adding site-level custom CSS

Adding custom CSS through the site editor will only affect the specific site.

  1. Go to the Sites Dashboard.

  2. Select a site that you want to customize.

  3. Click Edit to open the Site Editor.

  4. Click Styling.

  5. Click Edit Site CSS below Local Site Styles.

  6. Write or paste the CSS within the editor.

Did this answer your question?