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

Skye Site Styles tweaks

This is a list of all Site Styles tweaks for the Skye family (Foundry, Indigo, Ready, Skye, and Tudor).

We constantly evolve the Squarespace platform to give you the best possible tools for building your website. If the platform recently changed, you may see different options than the ones listed below. The best way to learn how any tweak works is to experiment with it and see what changes on your site.

Tip: For general help, see the Skye template family guide.

Before you begin

Many fonts have the option to scale, so you can set the maximum and minimum font size. This helps you control how your site looks in different browsers. To learn more, visit Scaling fonts.

Site

  • Site Background - Sets the color for the whole site, including header, footer, and navigation overlay.
  • Header Padding - Change 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

  • 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 tagline display in the middle of the header. Learn more.

  • Title Font
  • Site Title Font Min
  • Tagline Font
  • Site Tagline Font Min
  • Title Color
  • Tagline Color
  • Borders: Bottom, Top, Top and Bottom, None
  • Border Size
  • Show Tagline
  • Layout: Inline, Stacked
  • Logo Height 

Header Right Side

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

  • Show Search
  • Show Social

Site-Wide 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, and the site search font.
  • Item Title Min
  • Excerpt
  • Meta - Style metadata elements (categories, tags, and author name).
  • Label - Style 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
  • Excerpt Color for Cards
  • Meta Color- Style metadata elements (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

Quote Block

  • Alignment: Left, Center
  • Font
  • Font Min
  • Quote Color

Blog Grid Layout

Select how thumbnails display on blog landing pages with Grid Alignment:

  • Grid Alignment: Top - Tiles align at the top.
  • Grid Alignment: Baseline - If there are thumbnail images, tiles align at the bottom of the thumbnail image.
  • Grid Alignment: Masonry - Positions items in the best layout based on the available space while reducing any gaps, giving it the look of a mosaic. Thumbnail images can’t be set to the same size with this tweak. Thumbnails may appear out of chronological order to ensure the best fit.

Style the layout of blog landing pages with these other tweaks

  • Minimum Column Width - Select the minimum width of each column, which helps determine how many post tiles display per row.
  • Maximum Number of Columns - Select the maximum number of columns that can display on the page. In narrower browsers, fewer columns may appear. This tweak affects the size of the post thumbnails.
  • Container Max Width: Full, Wide, Narrow - Set the width of the container the post tiles display within.
  • Inset Images - Add white space around the thumbnail image
  • Image Cropping:
    • Square
    • Horizontal - An aspect ratio of 4:3
    • Vertical - An aspect ratio of 3:4
    • None - Each thumbnail keeps its original aspect ratio

Blog Grid Options

Edit 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, they'll show their original colors.

Blog Options

  • Text Alignment: Left, Center
  • 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

Style your built-in social icons:

  • 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.

  • Disable Item Pages
  • Show Past Events
  • Show Thumbnails
  • Thumbnail Size
  • Show Date Tag
  • Show Date Tag w/ Time
  • Show Categories
  • Show Date
  • Show Time
  • Show Location
  • Show Export Links
  • Show Social Buttons
  • Show Excerpt
  • Show Button
  • Show Back Link
  • 24-Hour Time
  • Stacked View

Gallery Styles

These tweaks appear on standard Gallery Pages.

  • Set the layout with the Gallery Design tweak.

Gallery Design: Grid

  • Aspect Ratio
  • Grid Spacing
  • Min Column Width
  • Lightbox Style: Dark, Light

Gallery Design: Slideshow

  • Gallery Navigation: Thumbnails, Bullets, Numbers, Circles, Simple, None
  • Gallery Info Overlay: Always Show, Show on Hover, Hide
  • Gallery Aspect Ratio
  • Gallery Arrow Style: Round Corners, Rectangular, Circular, No Background
  • Gallery Transitions: Fade, Scroll
  • Gallery Show Arrows
  • Gallery Auto Crop
  • Gallery Autoplay
  • Gallery Loop
  • Gallery Autoplay Speed (sec)  
  • Gallery Thumbnail Size
  • Gallery Arrow Background  
  • Gallery Arrow Color  
  • Gallery Circle Color  
  • Gallery Info Background

Products

These tweaks appear on Advanced Products Pages.

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: Related Products

  • Items Per Row
  • Item Spacing
  • Image Aspect Ratio
  • Details Alignment
  • Item Title Spacing

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 details 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. Learn more in our Cover Pages guide.

Block tweaks

Tweaks for certain blocks also display in Site Styles. For more information about available style changes, visit Adding content with blocks to find help content for your specific block. 

Was this article helpful?
1 out of 12 found this helpful
Skye Site Styles tweaks