This guide is a reference for all Site Styles tweaks in the Five template. To learn how to use Site Styles, visit Making style changes.
Note: The Squarespace platform is constantly evolving to give you the best possible tools for building your website. We update these guides frequently, but if the platform has recently changed you may see slightly different options than the ones listed below. The best way to learn the functionality of any tweak is to experiment with it and see what changes on your site.
Adjust the overall layout of your site.
- Site Background - Set the color for the site background. The site background visible when the Canvas Setting tweak is set to Site Width.
- Site Background Image - Replace the background color with an image. The site background is visible when the Canvas Setting tweak is set to Site Width.
- Site Width
- Canvas Setting: Full Width, Site Width - Determines whether the page content expands to the full width of the browser or to the width set in Site Width.
- Canvas Offset - Control how much of the site background displays at the top and bottom of your site.
- Canvas Padding - Adjust the padding of the main content area, sidebars, and between the logo and navigation.
- Canvas Border Size - Add a border around your main content area.
- Lines & Decorations - Set the color for lines and other decoration elements on your site, including the Canvas Border.
- Hide Delimiter - Remove the / lines between the page links in your Main Navigation.
Adjust your site’s banners and text.
- Header Background - This color shows if Page Thumbnail as Banner is unchecked and there is no Header Background Image.
- Header Background Image - Add a single image to all banners on your site. Page Thumbnail as Banner must be unchecked. If Page Thumbnail as Banner is checked, the site-wide header image will display only on pages that don't have page banners.
- Site Title - Adjust the site title’s font style. Appears when the Banner Content: Site Title Logo Tagline tweak is selected.
- Site Title Color
- Site Title Hover Color
- Page Title - Adjust the page title’s font style.
- Page Title Color
- Site Tagline - Adjust the font styles for the tagline or page description on banners.
- Site Tagline Color - Change the color of the tagline or page description on banners.
- Banner Area Height - Appears when the Banner Content: Empty tweak is selected. Note: This tweak doesn’t affect the banner area height on mobile.
- Banner Area Spacing - Appears when the Banner Content tweak is set to Site Title Logo Tagline or Page Title Description.
- Logo Height (Banner) - Appears when Banner Content is set to Site Title Logo Tagline.
- Banner Overlay Color - Add a filter effect over page banners by selecting an overlay color with partial opacity.
- Banner Text Width
- Banner Content: Site Title Logo Tagline, Page Title Description, Empty - Choose what text displays on banners: the site title or logo plus the tagline, or the page title and description. Choose Empty to display no text on banners.
- Banner Alignment: Left, Center, Right - Align the text on banners.
- Page Thumbnail as Banner
- Stretch Page Thumbnail
Adjust the font and style of your Main Navigation.
- Navigation Background - Change the background color behind the Main Navigation.
- Site Name - Adjust the site title’s font style. Appears when Page Title Description or Empty is selected in the Banner Content tweak in the Header section.
- Navigation - Adjust the font style for the Main Navigation. Also affects excerpt links.
- Navigation Link Color
- Navigation Link Hover Color
- Navigation Active Link Color
- Navigation Spacing - Adjust the space at the top and bottom of the Main Navigation area.
- Logo Height (Navigation) - Adjust the height of the logo when it’s displaying with the Main Navigation. Appears when Page Title Description or Empty is selected in the Banner Content tweak in the Header section.
- Top Navigation Position: Above Banner, Below Banner, None - Change the layout of the site header.
- Top Navigation Alignment: Left, Center, Right
- Disable Navigation Border - Appears when Top Navigation Position: Below Banner is selected. The color of the navigation border is set by the Lines & Decorations tweak in the Site Wide section.
Change the background color, spacing, and font styles of the main content (page body) area.
- Canvas Background - Change the background color of the main content area.
- Canvas Background Image
- Heading 1 - Heading 1 text includes events, album, and blog post titles.
- Heading 1 Color
- Heading 2
- Heading 2 Color
- Heading 3 - Heading 3 text includes sidebar titles.
- Heading 3 Color
- Body Text
- Body Text Color
- Body Link Color - Change the color of links in the body text. Also affects excerpt links.
- Body Link Hover Color - Change the hover color of links in the body text. Also affects excerpt links.
- Page Spacing - Adjust the space at the top and bottom of pages.
Adjust the site-wide style of your sidebars. You must be on a page with at least one sidebar to see most of these tweaks.
- Sidebar 1 Width
- Sidebar 2 Width
- Sidebar Text Size - Set the size of the h3 sidebar title font.
- Sidebar Position: Right, Left - Set the display location of the sidebar or sidebars across all pages.
- Underline Sidebar h3
- Site Description in Sidebar
- Site Description - Adjust the font style of the site description. Appears when Site Description in Sidebar is checked.
- Site Description Color - Appears when Site Description in Sidebar is checked.
Adjust the style of the site-wide footer.
- Footer Text
- Footer Alignment: Left, Center, Right
- Disable Footer Border
Adjust the style and position of the social icons that appear in the header and/or footer of the site. Select Social Icon Placement: Hide to remove them altogether.
Note: the Social Links Block in the footer has its own styling options.
- Social Icon Size
- Social Icon Color
- Social Icon Style: Normal, Square, Round
- Social Icon Placement: Top Bottom, Top Only, Bottom Only, Hide
These tweaks appear when you’re on a Blog Page. Pagination tweaks affect the navigation below each blog post. Meta Text tweaks affect metadata such as date and author.
For more information, visit Blogging with Squarespace.
- Meta Text
- Meta Text Color
- Article Spacing
- Blog List Display: Full, Header and Footer Only, Header Only
- Blog Byline: Top, Bottom, Hidden - Move or hide the post author name.
- Blog Dateline: Above Title, Top, Bottom, Hidden - Move or hide the post date.
- Blog Pagination - Adjust the font style of the navigation below each blog post.
- Pagination Link Color
- Pagination Link Hover Color
- Pagination Active Link Color
- Disable Pagination Border
- Hide Excerpt Thumbnail
- Hide Icons
- Hide Tags Categories
- Show Category Navigation - Hide or display the category navigation.
- Product Background Color - The color behind the product image.
- Product Overlay Color - Set the color of the on-hover overlay when Product List Titles: Overlay is enabled.
- Products Per Row - Set the number of products per row on the Products Page.
- Product List Titles: Under, Overlay - Set the title and price to display under the thumbnail image or on hover.
- Product List Alignment: Center, Left - Set text to Center or Left when Product List Titles: Under is enabled.
- Product Item Size - Set the image ratio (width:height) for photos on the Products Page.
- Product Image Auto Crop - Crop product images to the aspect ratio set with the Product Item Size tweak.
- Product Gallery Size - Set the image ratio (width:height) for photos on product item pages.
- Product Gallery Auto Crop - Crop images on product item pages to the aspect ratio set with the Product Gallery Size tweak.
- Show Product Price - Show or hide prices on the Product Page. If unchecked, the price will still appear on product item pages.
- Show Product Item Nav - Display a navigation link back to the Products Page.
- Product Social Sharing - Add or remove Share buttons from product item pages.
- Use the Gallery Design tweak to set the layout.
Gallery Design: Grid
- Aspect Ratio - Controls the aspect ratio (width:height).
- Grid Spacing - Increase the padding between individual images in your grid.
- Min Column Width - Set the width of columns in your grid.
- Lightbox Style: Dark, Light
Gallery Design: Slideshow
- Gallery Navigation: Thumbnails, Bullets, Numbers, Circles, Simple, None - The type of navigation provided on the page.
- Gallery Info Overlay: Always Show, Show on Hover, Hide - For image titles and captions
- Gallery Aspect Ratio - Controls the aspect ratio (width:height). Use with the Gallery Auto Crop tweak.
- Gallery Arrow Style: Round Corners, Rectangular, Circular, No Background - Style the arrows used to cycle through the slides.
- Gallery Transitions: Fade, Scroll
- Gallery Show Arrows - Uncheck to hide arrows on your gallery display.
- Gallery Auto Crop - Auto-crops images to the aspect ratio set with the Gallery Aspect Ratio tweak.
- Gallery Autoplay - Cycle gallery images automatically without user interaction.
- Gallery Loop - Enable a gallery to cycle through to the first slide after the last slide.
- Gallery Autoplay Speed (sec)
- Gallery Thumbnail Size - Set the height of gallery navigation thumbnail images.
- Gallery Arrow Background
- Gallery Arrow Color
- Gallery Circle Color
- Gallery Info Background - The color used as the background for the image titles and captions.
- Disable Item Pages - Disable the title link for individual events. When unchecked, clicking an event's title opens the individual event page.
- Show past Events
- Show Thumbnails - Show the thumbnail image for each event on the Event Page to the left of the event.
- Thumbnail Size
- Show Date Tag - The date tag highlights event dates. It displays to the left of each event in on the Event Page.
- Show Date Tag w/ Time
- Show Categories
- Show Date
- Show Time
- Show Location
- Show Export Links - Export links allow visitors to export event details to Google Calendar or iCal.
- Show Social Buttons
- Show Excerpt - Excerpts display a brief description of an event in the Events Page List view.
- Show Button
- Show Back Link - Shows the 'Back To All Events’ link on individual event pages.
- 24-Hour Time
- Stacked View - Display your events as a stacked list withthumbnails appearing above the event at full-width.
These tweaks appear when you’re on an Album Page.
- Album Text Color
- Hide Album Share Link
Cover Pages are styled independently of a site’s template. Visit Styling a Cover Page for more information.
Tweaks for certain blocks also display in Site Styles. For more information about available style changes, visit What are blocks? to find help content for your specific block.