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

Skye, Foundry, Indigo, Ready, and Tudor share the same underlying structure and functionality. This guide applies to all these templates.

This guide is a reference for all Style Editor tweaks in the Skye, Foundry, Indigo, Ready, and Tudor templates. 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.

Before you begin

Many fonts on these templates have the option to scale, which allows you to set the maximum and minimum font size. This helps you control how your site looks in different browsers.

With scaling, set the maximum font size with the main font tweak (such as Title Font) and then set the minimum size (Site Title Font Min).

To learn more, visit Scaling fonts.

Site

  • Site Background - Sets the color for the whole site, including header, footer, and navigation overlay.
  • Header Padding - Adjusts the space at the top and bottom of the header.
  • Header Background When Scrolled
  • Header Background Color
  • Content Inset - Adds margins to the sides of some or all content. Learn more.
  • Full Bleed Images, Video, and Gallery - Remove the content inset from these blocks only so they display at the width of the main content area. Learn more.
  • Underline Body Links - Adds an underline to any links in body text.

Site Navigation

Site navigation always appears as a hamburger icon, with an overlay on click. Learn more.

  • Font
  • Link Color
  • Active Link Color
  • UI Icon Color
  • Footer Nav Font Size
  • Footer Nav Link Color
  • Footer Nav Active Link Color
  • UI Icon Weights: Hairline, Light, Medium, Heavy
  • Spacing: Small, Medium, Heavy
  • Hide Right Column 

Site Branding

The site title, logo, and tag line display in the middle of the header. Learn more.

  • Title Font
  • Site Title Font Min - Learn more about scaling fonts.
  • Tagline Font
  • Site Tagline Font Min - Learn more about scaling fonts.
  • Title Color
  • Tagline Color
  • Borders: Bottom, Top, Top and Bottom, None
  • Border Size
  • Show Tagline
  • Layout: Inline, Stacked
  • Logo Height 

Header Right Side

The header right side displays a shopping cart, search icon, and social icons. Learn more.

  • Show Search
  • Show Social

Site-Wide Fonts

Titles and headings support scaling fonts.

  • List Title - List Title tweaks adjust the post titles on Blog Pages.
  • List Title Min
  • List Title Size No Image - No Image tweaks adjust posts that don't have thumbnail images 
  • List Title Size No Image Min
  • Item Title Font - Item Title tweaks adjust the post titles on blog posts.
  • Item Title Min
  • Excerpt - Excerpts display on Blog Pages.
  • Meta - Adjusts the categories, tags, and author name.
  • Label - Adjusts the Share link on Album Pages.
  • Heading 1
  • Heading 1 Min
  • Heading 2
  • Heading 2 Min
  • Heading 3
  • Heading 3 Min
  • Body
  • Image & Gallery Block Captions

Site-Wide Text Colors

  • Title Color - Title tweaks adjust the post titles on Blog Pages.
  • Title Color for Cards
  • Excerpt Color - Excerpts display on Blog Pages.
  • Excerpt Color for Cards
  • Meta Color - Meta tweaks adjust the categories, tags, and author name
  • Meta Color for Cards
  • Label Color
  • Heading 1 Color
  • Heading 2 Color
  • Heading 3 Color
  • Body Text Color
  • Body Link Color
  • Image & Gallery Block Captions
  • Gallery Block Title

Blog Grid Layout

Adjust the layout of blog landing pages.

  • Grid Alignment: Top, Baseline, Masonry - Learn more
  • Minimum Column Width
  • Maximum Number of Columns
  • Container Max Width: Full, Wide, Narrow
  • Inset Images
  • Image Cropping: Square, Horizontal, Vertical, None

Blog Grid Options

Adjust the blog landing page.

  • Overlay Color - Add a color filter over the thumbnail image.
  • Reverse Overlay - Hide color filter color on hover.
  • Card Style - Adds a background color behind Blog Page thumbnail tile text.
  • Card Background Color
  • Show Excerpt on Blog List
  • Infinite Scroll
  • Grayscale Images (no IE support) - Set thumbnails to black and white. On Internet Explorer and Edge 20, colors show with their original colors.

Blog Options

  • Text Alignment: Left, Center - Adjust the text on the blog landing page.
  • Promoted Meta: Author, Categories, None
  • Date Style: With Title, Above Title, Callout, Callout Circle
  • Date Color
  • Date Color for Cards
  • Show Divider
  • Divider Height
  • Divider Width
  • Divider Color
  • Divider Color for Cards

Blog Post Options 

  • Show Banner Image
  • Banner Image Width: Normal, Narrow
  • Show Sidebar
  • Sidebar Width
  • Author Profile: Hide, In Sidebar, Below Post
  • Show Progress Indicator
  • Progress Indicator Fill Color

Header Social Icons

Social icons link to your connected accounts

  • Style: Regular, Circle (Border, Knockout, Solid), Square (Border, Knockout, Solid), Rounded (Border, Knockout, Solid)
  • Size
  • Standard Color - Use the icon’s default brand colors
  • Custom Color

Album Options

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

  • Album Text Color
  • Hide Album Share Link

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 - Controls the aspect ratio (width:height) for event thumbnails.
  • Show Date Tag
  • Show Date Tag w/ Time
  • Show Categories
  • Show Date - The date tag highlights event dates. It displays to the left of each event in on the Event Page.
  • 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.

Gallery Styles

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

  • Gallery Design: Slideshow, Grid

These tweaks are available when Gallery Design is set to Grid:

  • Aspect Ratio - Controls the aspect ratio (width:height) for the gallery active slide. If the aspect ratio is set to Auto, images rearrange to create the best fit on the page. They may display in a different order than how they were uploaded.
  • 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

These tweaks are available when Gallery Design is set to 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 - The type of display used for image titles and captions.
  • Gallery Aspect Ratio - Controls the aspect ratio (width:height) for the gallery active slide. 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 - Control the height of thumbnail images when used for gallery navigation.
  • Gallery Arrow Background  
  • Gallery Arrow Color  
  • Gallery Circle Color  
  • Gallery Info Background - The color used as the background for the image titles and captions.

Products

These tweaks appear when you’re on a Products Page. Learn more at Styling the Advanced Products Page.

Products: Layout

  • Items Per Row
  • Item Spacing
  • Image Aspect Ratio
  • Item Hover Behavior: Show Alternate Image, Fade, None
  • Spacing
  • Top Padding
  • Nav Display: Breadcrumb Only, Pagination Only, Breadcrumb and Pagination, None
  • Pagination Style: Previous/Next, Titles
  • Nav Alignment: Left, Center, Right, Split
  • Nav Font
  • Nav Color
  • Nav Separator Color 

Products: Details

  • Position: Under, Overlay
  • Position (Mobile): Under, Overlay
  • Alignment: Center, Left
  • Alignment [Overlay]: Top-Left, Top-Center, Top-Right, Center-Left, Center-Center, Center-Right, Bottom-Left, Bottom-Center, Bottom-Right
  • Overlay Color
  • Overlay Padding
  • Spacing
  • Show Title
  • Title Font
  • Title Color
  • Title Color (Mobile)
  • Title Spacing
  • Show Price
  • Price Font
  • Price Color
  • Price Color (Mobile)
  • Sale Price Color
  • Sale Price Color (Mobile)
  • Price Spacing
  • Alignment: Left, Center, Right
  • Spacing
  • Show Title
  • Title Font
  • Title Color
  • Show Price
  • Price Font
  • Price Color
  • Sale Price Color
  • Show Excerpt
  • Excerpt Position: Above Price, Below Price, Below Add to Cart Button
  • Excerpt Font
  • Excerpt Color
  • Excerpt Link Color
  • Show Share Buttons

Products: Sort + Filter

  • Display: Hide, Top, Left Side, Right Side
  • Width
  • Margin
  • Item Spacing
  • Alignment: Left, Center, Right
  • Font
  • Color
  • Active Color

Products: Gallery

  • Position: Left, Center, Right
  • Design: Slideshow, Stacked
  • Width
  • Aspect Ratio
  • Thumbnail Alignment: Left, Center, Right
  • Thumbnail Width
  • Thumbnail Spacing
  • Spacing

Products: Options

  • Show Variants
  • Show Quantity
  • Style: Text-Only, Square, Rounded, Pill
  • Border Color
  • Background Color
  • Label Font
  • Label Color
  • Font
  • Text Color

Products: Add To Cart Button

  • Show Button
  • Style: Solid, Outline, Raised
  • Shape: Square, Rounded, Pill
  • Padding: Small, Medium, Large
  • Color
  • Text Color
  • Font

Products: Image Zoom

  • Enable Image Zoom
  • Zoom Factor
  • Zoom Activates On: Hover, Click
  • Enable Lightbox

Products: Status Badges

  • Style: Rectangle, Square, Circle, None
  • Sale Color
  • Sold-Out Color
  • Font
  • Padding
  • Position: Top-Left, Top-Center, Top-Right, Center-Left, Center-Center, Center-Right, Bottom-Left, Bottom-Center, Bottom-Right
  • Inset: Floating, Flush, Dock Vertically, Dock Horizontally
  • Inset Size

Products: Quick View Button

  • Style: Bar, Floating, Docked
  • Color
  • Font
  • Padding
  • Position: Top, Center, Bottom
  • Inset Size 

Products: Quick View Lightbox

  • Padding
  • Overlay Color
  • Background Color
  • Excerpt Display: Truncate, Hide
  • Controls: Show Arrows
  • Controls: Show Close Button
  • Controls Color
  • Controls Weight: Hairline, Light, Medium, Heavy
  • Controls Size

Share Buttons

Special Share button tweaks appear when you’re on a blog post or product item page. Which tweaks appear depends on which option you’ve chosen for the Style tweak.

  • Style: Icon Only, Solid, Outline, Raised
  • Show Icons
  • Show Labels
  • Show Counts
  • Rounding
  • Size
  • Spacing
  • Border: Width
  • Border: Color
  • Icons: Standard Color
  • Icons: Custom Color
  • Background: Standard Color
  • Background: Custom Color
  • Label: Font
  • Label: Color

Cover Pages

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

Block tweaks

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

Was this article helpful?
1 out of 5 found this helpful
Skye Style Editor tweaks