Writing custom CSS

How to write custom CSS in your themes

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

Custom CSS

When you need to do more with your themes you can always write 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.

Furthermore, CSS should only be added on a theme level when you want that CSS to affect multiple sites. If you only want to affect a single site with the CSS you are writing, we recommend adding site level CSS in the site editor.

Adding Theme-Level Custom CSS

To open the Custom CSS area of the Theme Editor, click on Custom CSS:

Here you can write any CSS you would like to apply to the 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 things 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.

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

Did this answer your question?