Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Avenue Style Editor tweaks

This guide is a reference for all Style Editor tweaks in the Avenue template. To learn how to use the Style Editor, 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.

Colors

Adjust the colors for the background, text, and page elements. For general help, visit Changing colors.

  • Site Background  
  • Site Background Image - Add an image as your site background. For styling help, visit Adding a background image.
  • Canvas Background  
  • Site Title Color  
  • Site Title (Hover) Color  
  • Site Subtitle Color  
  • Navigation Color  
  • Navigation (Hover) Color  
  • Navigation (Active) Color  
  • Heading 1 Color  
  • Heading 2 Color  
  • Heading 3 Color  
  • Text Color  
  • Body Link Color  
  • Body Link (Hover) Color  
  • Page Border Color  
  • Social Icon Color  

Typography

Change the fonts throughout your site. For more information, visit Changing fonts.

  • Site Title  
  • Site Subtitle  
  • Navigation  
  • Heading 1  
  • Heading 2  
  • Heading 3  
  • Body Text  

Sizes & Values

Adjust the padding and spacing of your site.

  • Site Width  
  • Canvas Padding  
  • Top Padding 
  • Navigation Link Spacing  
  • Header Padding - This tweak doesn't affect mobile display.
  • Page Padding  
  • Footer Padding  
  • Logo Size (Max)  
  • Mobile Logo Size
  • Social Icon Size  

Options

These tweaks adjust the layout and alignment of key elements on your site.

  • Layout Style: Right, Center, Left - Adjust the layout of your site title and navigation. If you choose Center, the navigation displays below the site title. This tweak affects the site-wide footer.
  • Page Borders: Dotted, Thin, Thick, None
  • Underline Body Links  
  • Social Icon Style: Normal, Round, Square
  • Hide Social Icons - Social icons link to your connected accounts.

Blog Styles

These tweaks appear when you’re on a Blog Page. To learn more, visit Blogging with Squarespace.

  • Blog Meta Color  
  • Blog Sidebar Display: Auto, Right, Left, Hidden
  • Blog Sidebar Width  
  • Blog Post Spacing  

Index Styles

The Thumb and Thumbnail tweaks in this section affect the thumbnail images on Avenue Index Pages, and the colors and fonts of the navigation titles that display beneath them.

Regular Page and Gallery Pages open within the structure of the Index. The thumbnails and titles appear as navigation below these pages once they’re open (“active pages”).

These tweaks only appear when you've opened a Gallery Page through the Index:

  • Index Item Detail Width - Adjust the width of the images that display on Gallery Pages opened from the Index
  • Index Item Layout: Auto, Left, Right, Center - Adjust the layout. Center displays the page title and description above the images. If you choose Auto, the Gallery Page layout will follow the site layout (set with the Layout Style tweak). 

These tweaks affect the Index Page:

  • Index Thumb Title  - Adjust the font and size of the navigation titles
  • Index Thumb Title Color - Adjust the color of the navigation titles
  • Index Thumb Title Position: Below, Overlay - Choose whether the navigation titles display under the thumbnail, or appear on hover
  • Index Thumb Layout: Autocolumns, Basic Grid - Choose whether the thumbnail images display as squares in a grid, or at their original aspect ratio.
  • Index Thumb Background - This color displays behind thumbnails while the Index Page loads. Combine with the Thumbnail Opacity tweaks to display on hover.
  • Thumbnails Per Row - Choose the number of columns. Appears when Index Thumb Layout: Basic Grid is selected. 
  • Thumbnail Ratio - Adjust the thumbnail height. Appears when Index Thumb Layout: Basic Grid is selected. 
  • Thumbnail Max Width - Adjust the thumbnail size. Appears when Index Thumb Layout: Autocolumn is selected. Adjusts the thumbnail size.
  • Thumbnail Padding  
  • Thumbnail Opacity - Combine with the Index Thumb Background or Site Background tweaks to add a color filter effect.
  • Thumbnail Hover Opacity - Combine with the Index Thumb Background or Site Background tweaks to add a color filter effect on hover.
  • Thumbnails on Open Page: Show All, Hide Active, Hide All - Determines which Index Page thumbnails display as navigation at the bottom of active pages
  • Hide Index Thumb Titles - Remove the navigation titles that display below or over the images
  • Full Width Index - Display active pages at the width of the site, minus Canvas Padding.

For more information, visit Avenue Index Pages and the Avenue section of the Index Styles guide. 

Gallery Styles

These tweaks appear when you’re on a Gallery Page. For general help, visit Styling a Gallery Page.

  • Gallery Page Controls: Tiny Thumbnails, Bullets, Numbers, Simple, Hidden
  • Gallery Auto Play  
  • Gallery Play Speed  

Products

These tweaks appear when you’re on a Products Page. For in-depth information, visit Styling the Products Page.

  • Show Category Navigation - Hide or display the category navigation.
  • Category Nav Font  
  • Category Nav Color  
  • Category Nav Active Color  
  • 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.

Events

These tweaks appear when you’re on an Events Page. For general help, visit Styling the Events Page.

  • 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 with thumbnails appearing above the event at full-width.

Album Options

These tweaks appear when you’re on an Album Page.

  • Album Text Color  
  • Hide Album Share Link  

Cover Pages

Cover Pages are styled independently of a site’s template. Visit Styling a Cover Page to learn more.

Block tweaks

Tweaks for certain blocks also display in the Style Editor. To learn more about available style changes, visit What are blocks? to find help content for your specific block.

 

Was this article helpful?
0 out of 13 found this helpful
Avenue Style Editor tweaks