Customizing Themes

How to edit and create custom themes

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

Whether you are editing a theme or creating a new one, you will be introduced to the theme editor window. On this site is where you can select your colors, fonts, and sizes of the elements on your site.

Here is a quick video on how to use Themes to customize your sites:

Understanding the Theme Editor Site

The theme editor is broken up into different sections giving you varrying levels of control.

Section 1: Variable Input Fields

  • Most aspects of your theme can be changed here, including the fonts that can be used in sites in the Font Selector

  • Each field lets you change common elements in the sites using CSS

  • If your CSS is not entered correctly, you will encounter errors

Section 2: Theme users

  • This area contains all the places your theme is currently being used

  • If you change your theme, all of these sites will be affected

Section 3: Custom CSS

  • This area allows users to write custom CSS

  • Use this sparingly and only if there are no appropriate fields in Area 1

Updating Styles from Input Fields

For the most part, there are input fields for the common elements in themes, making adjusting fonts and sizes quick. These fields can be used to make easy adjustments and will be validated as you update them, ensuring that your CSS will work properly. A common workflow is:

  1. Make changes to the values in your fields.

  2. Wait for a second and check the box in the top left of the theme editor window.

  3. If there are errors, you will see a red box with the number of errors in your theme. Clicking this box will show where the errors are after all of the styles have been compiled into a stylesheet. If you are having trouble finding the issue still, you can view the Compiled CSS and check the line number where the problem occurs.

  4. If there were no errors or you fixed the errors you will see a green box which says “No Errors” and the Review Changes box will be blue.

  5. Click on the Review Changes button to see a list of changes that were made.

  6. If the changes look good, click the Publish button to save the styles. They will now be applied to all sites that are using your theme.

Did this answer your question?