The style and features of the Skye template family.

The Skye template family (Foundry, Indigo, Ready, Skye, Tudor) is ideal for bloggers, magazines, and news sites. With multiple striking layout options, you can highlight your content and share it with the world. Special features include a navigation overlay, sophisticated blog pages, and advanced store pages.

This guide covers the features and design options for the Skye family. Site styles tweaks and the section they appear under in the Site Styles panel are bold.

Supported pages

Skye supports these page types:

• Album pages
• Blog pages - Grid
• Cover pages
• Events pages
• Gallery pages - Standard
• Layout pages
• Store pages - Advanced

Background

Use the Site background tweak under Site to change the background color of your site. The background color displays behind the header, footer, and all page content. Skye templates don't support a background image.

Header

Visitors use the header at the top to navigate your site. In Skye, the header displays over the site background color and contains the following elements:

• Navigation menu (☰) on the left
• Branding elements (site title, logo, and tagline) in the middle
• Shopping cart, search bar icon, and built-in social icons on the right

As you scroll down, the header remains as a fixed transparent overlay over your site’s content. To add a solid color behind the header on scroll, check the Header background when Scrolled tweak under Site, then use Header background color to set the color.

Style the site title and tagline with the Site branding tweaks:

• Layout - Display the site title and tagline next to each other, or stacked with the site title on top
• Borders - Add a border above, below, or above and below the site title and tagline
• Show tagline - Uncheck to hide the tagline

If you’ve replaced the site title with a logo, use the Logo height tweak to change its size. The tagline always displays below the logo. There aren’t border options when you’ve added a logo.

Use the following tweaks to style the rest of the header elements:

• Change the appearance of the navigation, search, and shopping cart icons with the UI icon color and UI icon weight tweaks under Site navigation.
• Hide or show the search and social icons with the tweaks in Header right side.
• Style the built-in social icons, including using the icon’s standard brand colors, with the tweaks under Header social icons. If there isn't enough room for all social icons, they display as three dots.

Navigation overlay

The Main navigation always displays in the header behind the ☰ menu. When you click the icon, it opens an overlay split into a right and left side:

• On the left, you’ll see your navigation links. Dropdowns have a + icon; when clicked, the links in the dropdown expand. Customize the area under the navigation with blocks.
• On the right is an optional section called the sidetray. Use blocks to add content that sets the tone for your site.

Use these tweaks to style the overlay and navigation links:

• Change the links’ font, color, and spacing with the Site navigation tweaks.
• The overlay background color follows the Site background tweak under Site.
• To hide the sidetray, check Hide right column under Site navigation.

Tip: Open the navigation overlay before opening site styles to see your style changes as you make them.

Footer

The site-wide footer contains a customizable content area and a footer navigation.

• The content area follows the content inset layout and site-wide text styles.
• Footer navigation links display below the content area. Dropdowns have a + icon and create menus when clicked.
• Choose the link font and color with the Footer nav tweaks in Site navigation.

Text

Style the text on your site with the tweaks under Site-wide fonts and Site-wide text colors. Text in some editable blocks areas follows the content inset.

You can set certain text to scale up or down depending on browser width. Here’s how you’d do this for Heading 1 text:

1. Open Site Styles and scroll down to Site-wide fonts.
2. Use the Heading 1 tweak to set the maximum font size, for example, 65px.
3. Use the Heading 1 min tweak to set the minimum font size, for example, 15px.

We recommend setting each header’s minimum font size larger than your body text font size. For more information, visit Scaling fonts.

Content inset

Use the content inset feature to add white space margins on the sides of all your page content, or to create compelling layouts with a mix of site-wide blocks and indented blocks. Layout pages, blog posts, and footers follow this feature.

Style the content inset with these Site tweaks:

• Change the column width with Content inset. To remove the inset, set it to 0.
• Check Full bleed images, Video, and Gallery to display Image blocks, Video blocks, and Gallery blocks at the width of the main content area. All other blocks retain the content inset.

Line blocks and columns of two or more blocks always display at site width.

Blog pages

Skye Blog pages feature a customizable layout of post thumbnail tiles.

On the landing page:

• Blog posts display in a grid of post thumbnail tiles. If a post has a featured image, that image displays above the tile text. If a post doesn’t have a featured image, only the text displays.
• Post titles and dates always display in the thumbnail tile text. Choose where and how the date appears with the Date style tweak under Blog options.
• Add metadata (author or categories) to the bottom of each thumbnail tile using the Promoted meta tweak under Blog options.
• Excerpts are text-only and display when you check Show excerpt on blog list under Blog grid options.

On individual posts:

• Post featured images can create a banner at the top of the blog post. To hide the banner image, uncheck the Show banner image tweak under Blog post options.
• Use the Banner image width tweak to set the image's size to Normal or Narrow. The height is set by the original image, proportional to the width.
• Post titles and dates always display above the post. Choose where and how the date appears with the Date style tweak under Blog options.
• Categories, tags, comments, Likes, and share buttons display below the post. Use the Promoted meta tweak in Blog options to choose which element (author name, category, and tags) displays below the post title instead.
• On hover, the navigation arrows display post dates and titles. If you've checked the Show banner image tweak, it also shows the post's featured image.
• On mobile devices and narrower browsers, the arrows, title, and dates display on the page below the post content. Featured images don't appear.
• If you enabled related posts, three posts display at the bottom of the post. Only the featured image, date and post title display, and they inherit the style of your blog page thumbnail tiles.

Style blog pages and posts using the tweaks under Blog grid options, Blog options, and Blog post options:

• Use Date color to change the text color of publish dates on Blog Pages and posts. If you choose Date style: callout or Callout circle, the text auto-adjusts to either black or white, depending on the Date color.
• The Image cropping tweak sets the shape of the all featured images on blog pages.
• Use the Grid alignment tweaks to change how featured display on blog pages.
• Thumbnail tile text can display over a background color, or “card,” on blog pages. Use Card Background color to change the color. Uncheck Card style to display the text over the site background color instead..
• A divider line appears below the post title on both the landing page and individual posts. To hide this line, uncheck Show divider. Style the divider line with the Divider tweaks.
• Use the tweaks under Share buttons to customize the size, spacing, color, and style of the advanced share buttons on blog posts.
• Blog post text follows the content inset.

Sidebar

Blog posts support a site-wide sidebar. Customize it with blocks.

• The sidebar scrolls up with the page.
• Set the width and choose if the author profile appears in the sidebar using the sidebar tweaks under Blog post options.
• On mobile, the sidebar displays below the page content.
• You can’t edit the sidebar while the blog post editor is open.

Disable the sidebar by unchecking Show sidebar under Blog post options. If you’re going to hide the blog sidebar, delete the demo content first. Even when hidden, text from the sidebar may get pulled into posts when sharing on social media.

Author profile

Author profiles display authors names, website links, and bios. Click the author name to view a filtered results page for that author’s posts.

Author profiles can display in the sidebar, or below the post and Share buttons. Use the Author profile tweak under Blog post options to change where they display, or to hide them.

The author name won't display below the post when the author profile appears on the page. The author name metadata always displays when the author profile is hidden.

Page loading

A progress pie tells visitors how far into the post they are. The progress pie appears in the bottom-left corner as you scroll.

To change the color of the progress pie, use the Progress indicator fill color tweak under Blog post options.

Banners

Post featured images create banners above individual blog posts. The Skye family doesn't support page banners.

Share buttons

You can add customizable share buttons to blog posts and product pages. Visitors use these buttons to share content to their social profiles.

• Use the Share buttons tweaks to change their size, spacing, color, and style.
• Style product share buttons with the Products: details tweaks. Hide the icons for products by unchecking Show share buttons.

A share link with popup share buttons also appears on album pages and events pages. These share buttons don’t take on the customized styles.

Mobile

With Squarespace's built-in responsive design, your site adjusts to look great on any device.

• The navigation, search icon, and shopping cart display at the bottom in a navigation bar, and open as an overlay when tapped.
• Social icons display as a three dot “more” icon.
• Sidebar content displays beneath page content.
• You can’t disable mobile styles.

Troubleshooting Skye

Here are some common issues with this template. Some of these are bugs or known issues. Although we still support Squarespace version 7.0, fixing bugs or issues is a lower priority for us while we focus on our current platform, version 7.1. You can move your version 7.0 site to version 7.1 using our update tool.

I can’t edit my sidebar’s content

Blog posts in these templates support a sidebar. While on a blog post, hover over the sidebar and click Edit to customize it with blocks. Here are some tips:

• If your author profile is in the sidebar, hover over the sidebar content below the profile to activate the Edit annotation.
• Remove the author profile from the sidebar with the Author profile tweak under Blog post options.
• You can't edit the sidebar while editing the blog post.

Learn more about the blog post sidebar.

My blog post thumbnails are too small

To display blog page thumbnails at the width of the tiles:

1. Open your blog page and navigate to site styles.
2. Scroll down to Blog grid layout.
3. Uncheck Inset images.

To edit the images at the top of a blog post:

1. Open a blog post and navigate to site styles.
2. Scroll down to Blog post options.
3. Adjust the Banner image width.

My post title doesn’t fit in its thumbnail tile

Although text wraps in blog post thumbnail tiles, individual words don’t break when they reach the edge of a container. Depending on your style settings, longer words may be cut off or break through the edge of the tile.

There are certain style options you can use to help prevent this from happening. We recommend going to your blog page, opening site styles, and experimenting with these options:

• Reduce the minimum size of your titles - Reduce the List title and List title min sizes in the Site-wide fonts section of site styles. Use List title size no image tweaks for posts that don’t have featured images.
• Increase the width of the tiles - Change the Minimum column width in the Blog grid layout section.

I want to recreate the navigation links in the Skye demo site

The Skye demo site's navigation links take visitors to pages of blog posts that are filtered by category. Learn how to achieve the same effect in Linking to categories or tags.

I want to recreate the sidetray in the Skye navigation overlay

The Skye template mimics the look of an author profile in the sidetray of the navigation overlay. To recreate this, add an image block, cropping the image with third-party software to make it a circle. Below that, add a text block and a social links block.