Custom style examples

Once you've created a custom style, you can use the options in the Appearance Editor to edit the fonts, layout, colors, padding, and more.

This guide shows examples of different style changes you can make.

Before you begin

• For a general overview, visit Creating a custom style.
• It's important to save your changes after every change. Otherwise, the change you made will revert to the previous setting.
• Custom style changes affect every page on your site. For page-specific changes, create a style override.

Add a banner image

In Style mode, add a banner image in the Banner & Navigation tab. Banners display at their original dimensions and replace the header text (site title and subtitle).

To learn more, visit Adding a banner image.

Set the site width

To set the width of your main content area:

1. Enter Style Mode.
2. Click Banner & Navigation. (If you haven't already, you'll be prompted to create a custom style.)
3. Click Change Widths.
4. Use the slider or Current Value field to set the width for Content Width.
5. Click Save Changes.

For more help, visit Changing content and sidebar widths.

Create a minimalist style

A minimalist design creates a calm and open layout, and helps to emphasize your content. Minimalist web design usually involves blank areas (“white space” or “negative space”), limited fonts and colors, and well-curated content. The following tutorial has tips for creating a minimalist design on Squarespace 5.

Style your site's icons

You can style the default icons that display on your site, such as the share and comment icons that can display with your blog posts. 

To style all the icons on your site: 

1. Enter Style Mode.
2. Click Settings. (If you haven't already, you'll be prompted to create a custom style.)
3. In the Icon Set section, use the Style drop-down menu to choose a style.
4. Use the Opacity slider to set how transparent or opaque the icons appear. 0 is completely transparent, and 1 is completely opaque. 
5. Click Save Changes. 

Change your fonts

1. Enter Style Mode.
2. Click Fonts, Colors & Sizes. (If you haven't already, you'll be prompted to create a custom style.)
3. Click an element on your site, or select one from the drop-down menu. For example, you could click your blog post title, or choose Journal > Post Title from the drop-down menu.
4. Use the options to style your text. For example, click Font, then choose a new font.

For more help, visit Changing fonts.

Add a background image

To add a background image:

1. Enter Style Mode.
2. Click Fonts, Colors & Sizes. (If you haven't already, you'll be prompted to create a custom style.)
3. Click the background area in the site preview.
4. Click Background Image.
5. Add an image URL, or click Select to choose an image from your file storage or computer.
6. Click Save, then click Save Changes.

For more help, visit Adding a background image or color.

Center your site

To center your site in the browser:

1. Enter Style Mode.
2. Click Fonts, Colors & Sizes. (If you haven't already, you'll be prompted to create a custom style.)
3. In the drop-down menu, select Canvas.
4. For Margin Right and Margin Left, type in Auto and click Set.
5. Click Save Changes.

Tip: To center text within a page, use the text editor to set the alignment.