Creating a custom style

In Squarespace 5, once you've chosen a template and style, you can make a new version of that style and customize it with your own style settings.

The original template and style won't be affected, and your site's content will remain the same (for example, all your widgets will remain in the sidebar). You can make multiple custom styles.

Step 1 - Create a new style

To customize your site, you'll start with an existing template and style, then make a new version that you can customize.

Tip: If you've already created a new style, you can skip to Step 2. You can also make a new version of an existing custom style.

1. Enter Style Mode.
2. Click Template & Styles.
3. If you haven't already, choose a template and style. This will be the basis of your new custom style.
4. Hover over the style and click Edit This Style. You can also click any of the other tabs, such as Banner & Navigation. 

5. A prompt appears asking you to Name Your New Style.
6. Enter a name and click Create Style.

7. The new style appears to the right of the existing styles within that template.

Tip: A Design Preview annotation indicates that the style is not yet live on your site. When you've finished customizing the style, you can make it live. 

Step 2 - Make style changes

Use the other tabs in the Appearance Editor to customize your site.

• Banner & Navigation - Organize the layout and structure of your site.
• Fonts, Colors & Sizes - Adjust the typography and other style options.
• Custom CSS - If you have coding knowledge, you can add CSS to change fonts, colors, and backgrounds.
• Settings - Rename your style and change advanced settings.

Tip: If you've already enabled your style, the changes will appear on your live site every time you save.

Step 3 - Enable your style

If you haven't already, enable your style to publish your style changes to your live site. 

1. Ensure you're in Style Mode.
2. In the Design Preview annotation, click Enable Style.

Banner & Navigation

In Style Mode, use the Banner & Navigation tab to organize the layout and structure of your site.

Use the Banner Image field to add a banner image to the top of your site. Learn more at Adding a banner image.

Use the other options to adjust the layout:

• Column Layout - Choose whether to display a sidebar or sidebars, and where the sidebars display.
• Change Widths - Adjust the width of the page content, sidebars, and site padding.
• Horizontal Navigation - Display navigation above or below the header, or hide it.

Learn more at Changing your site layout.

Fonts, Colors & Sizes

In Style Mode, use the Fonts, Colors & Sizes tab to adjust the typography and other style options for your site.

Click an element on the page to see its style options. A blue box appears around each element that will be affected. For example, if you click on one navigation link, blue boxes appear around all your navigation links. Any style change you make will affect all the highlighted elements.

You can also select an element from the drop-down menu to see its style options.

Tip: If changing a style option isn't affecting your site, ensure you don't have any conflicting custom CSS.

Custom CSS

If you have coding knowledge, you can add code in the Custom CSS tab.

• CSS should only be used to change fonts, colors, and backgrounds.
• Custom code, including CSS, falls outside the scope of our support.

To learn more, visit Using the CSS Editor.

Settings

On the left, adjust your custom style's settings and your site's icons:

• Style Name - Rename your style.
• Style Author - Change your style's author name.
• Icon Set - Change the icons that display on your site, and adjust their opacity. Learn more.

On the right, adjust the advanced options for your site. Note that these options fall outside our scope of support.

Duplicate a custom style

To make a copy of a custom style:

1. Enter Style Mode. 
2. Click Templates & Styles option and find the custom style.
3. Hover over the style and click Copy.
4. Name the style and click Create Style.

Delete a style

To delete a custom style:

1. Enter Style Mode. 
2. Click Templates & Styles.
3. Ensure you're not previewing the style you want to delete. If you are, click any other template and style to preview it instead.
4. Hover over the custom style you want to delete.
5. Click Delete.

Note: This can't be undone.

Export a style

You'll need to export a style to import it into another Squarespace 5 site. Exporting your style is also a good way to back up your style by saving it to your computer.

1. Enter Style Mode.
2. Click Templates & Styles.
3. Hover over the style and click Export.
4. Click Download Style XML and save it to your computer.

Import a style

To import a custom style into another Squarespace 5 site:

1. Ensure you have the style XML file. If you don't have one already, you'll need to export one.
2. Log into the Squarespace 5 site you want to import the style to.
3. Enter Style Mode.
4. Click Templates & Styles.
5. On the bottom-left, click Import Styles. 

6. Click Browse and choose the style's XML file. 
7. Click Import Style.

8. Click Preview Imported Style.
9. Make any style changes, then enable the style to make it live on your site.

Tip: In the Templates & Styles tab, the imported style will appear within the template you imported it to. For example, if you created and exported a style in Blueprint, but clicked Import Style in Canopy, the style will appear in Canopy.

Design preview

When you create a new style, it automatically displays as a preview. A Design Preview (Invisible To The Public) annotation displays. While previewing the style:

• Style changes you make won't appear on your live site.
• Changes you make to your site's content will appear on your live site.

For example, if you change the text on a page, the new text will appear on your live site, but any new fonts you've chosen in the style preview won't appear.

Once you enable your style, any style changes you save will appear on your live site.

To work in design preview mode again, create a copy of the custom style and make changes before enabling it. Once you've enabled a style, it can't be set back to design preview mode.

Tip: To see what your live site looks like, you can visit it in incognito mode. 

Examples

To see examples of custom styles, visit Custom style examples.