Style overrides

Style overrides let you create a customized look for individual pages on your site. For example, you could deviate from your site's overall style by giving a single page a different color background or uniquely styled text.

Note: If you’re using Squarespace 7, visit Making style changes on our Squarespace 7 help site.

Before you begin

• Style overrides are available for Squarespace 5 customers on the Unlimited plan.
• For general guidelines on styling your Squarespace 5 site, visit Styling your site.              

Watch a video

How style overrides work

Every template has multiple style variants. To give a page a unique style, you'll assign it a different variant within your template. There are two ways to do this:

1. Create a custom override style that you can modify with the settings you want by following Step 1.
2. Style the page with one of the pre-set style variants. For example, if you're using the Blueprint > Keystone style on your site, you could assign one page the Blueprint > Facade style. You don't need to create a custom style to do this, so skip to Step 4.

Note: You can only assign an override style variant from your site's current template. For example, you can't use a Blueprint style for your site and a Usonian style as an override.

Step 1 - Open the template selector

1. Log into your site and go to the page you want to modify.
2. Enter Style Mode.
3. Click Templates & Styles.

Step 2 - Create an override style

1. Hover over a style variant. As a rule of thumb, it's helpful to choose the style you're currently using on your site. This creates consistency for all site elements that you don't modify.
2. If it's a pre-set style, click Edit This Style. If it's a custom style, click Copy.

3. Give your style a distinctive name, like "Blog style," and click Create Style.
4. A Design Preview pop-up window appears. For now, don't click anything in this window.

Step 3 - Style the override style

1. Use the Banner & Navigation tab to set the layout. Click Save Changes after every change.
2. Use the Fonts Colors & Sizes tab to adjust the text and colors. Click Save Changes after every change.

Tip: For more help with this process, visit Styling your site.

3. When the page looks the way you want it, click Cancel in the Design Preview popup. Your new style will be saved. (If you click Enable, this style is set for your entire site.)

Step 4 - Set the page style

1. Enter Structure Mode.
2. At the top of the page content, click Configure This Page to open Page Configuration.
3. In the Configuration tab, scroll down to the very bottom.
4. Use the Style Override drop-down menu to select a style.
5. Click Save Page Configuration.

Your page will now display this unique style. You can add the same style to any other page on your site by going to that page and adding the style in its Page Configuration.

Note: If you switch templates, you'll need to create new style overrides.

Updating style overrides

To update custom style overrides:

1. Enter Style Mode.
2. In the Templates & Styles tab, click your override style.
3. Use the Banner & Navigation and Fonts, Colors & Sizes tabs to make adjustments.
4. Click Save Changes after every change.
5. When you've finished, click Cancel in the Design Preview window. Your pages set to this style override will update automatically. 

Example: Hiding navigation links

To create a page without navigation links, like a landing page or an "Under Construction" page:

1. Create the page you want to be the landing page.
2. Create a custom style by following Steps 1 through 3.
3. In the Banner & Navigation tab, choose the Horizontal Navigation option with No Horizontal Navigation Bar.

4. Optional: To also hide the sidebar, choose the Single Content Column option in the Column Layout section.

5. Click Save Changes.
6. Follow Step 4 to set that style for the page.
7. Optional: You may want to set this as your homepage.

Example: Adding a different background image

1. Create a custom style, following Steps 1 through 3, above.
2. In the Fonts, Colors, & Sizes tab, use the drop-down menu to choose Basic Layout > Canvas.
3. Use the Background Color to set the color. Click Save Changes.
4. Depending on your base template, there may be other style changes you need to adjust. Click the different areas of your site to see the style options for each area.
5. When you've finished, click Cancel in the Design Preview window.
6. Then follow Step 4 to set that style for any page.

Example: Hiding sidebar content

To hide the sidebar or sidebars for a page, there are two options.

The first is to hide sections directly your site's Architecture. This is a good option if you want to hide the sidebar on multiple pages at the same time.

Alternatively, you can create a unique page style that hides the sidebar. This is a good option if you're already setting a custom style for that page, such as hiding the navigation links on an Under Construction page.

1. Create a custom style, following Steps 1 through 3 above.
2. In the Banner & Navigation tab, go to Column Layout and choose Single Content Column.

3. Click Save Changes.
4. Follow Step 4 to set that style for the page.

Example: Adding unique banner images

When you add a banner image to your header, it displays on all pages by default. To add a unique banner image to a page, there are two options:

• Banner override - Add the banner in page configuration. This is a good option if you want a unique image on just one page.
• Style override - Create a style override that includes a banner image. This is a good option if you want to add the same banner on multiple pages on your site, without making it site-wide.

To learn more, visit Adding a banner image.