This guide is a reference for all Site Styles tweaks in the Flatiron 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 general style settings for your site.
- Background Color - The background color for the main content area of your site
- Header/Footer Background Color
- Site Alignment: Left, Center - Align the main content area of your site.
- Border Color - Use with the Blog Border tweak.
These tweaks affect the site header elements.
- Logo Image Height
- Site Title Font
- Site Title Color
- Site Subtitle Font - Subtitle tweaks adjust the tag line.
- Site Subtitle Color
- Site Title/Logo Position: Right, Left
- Header Position: Fixed, Normal - Fix the header at the top of your site, or set it to scroll up with the page.
Adjust the style of the Main Navigation links that display in the header.
- Main Nav Font
- Navigation Text Color
- Navigation Hover Color
- Navigation Active Color
- Nav Spacing
Adjust the fonts for your site.
- Text - Adjust the body text.
- Text Color
- Headings - Style all headers on your site. The size option sets the Heading 1 size; Heading 2 and Heading 3 text scales proportionally.
- Headings Color
- Quote Font
- Quote Color
- Inline Quote Size
- Link Color
- Link Hover Color
- Share/Like Background Color - Adjust the color of the Share link that appears on Album Pages, Gallery Pages, product items, and blog posts; and the Simple Like button that appears on blog posts.
- Grid Headings - Grid Headings tweaks adjust the page titles that display over Index thumbnails.
- Grid Headings Color
- Grid Subheadings - Grid Subheadings tweaks adjust the - view - text that displays below the page title on Index thumbnails.
- Grid Subheading Color
- Grid Background Color - Adjust the color that displays behind the page title on Index thumbnails.
- Project Width - Adjust the width of the Index Page thumbnails.
- Project Detail Width - Adjust the width of Gallery Page images, and the width of page content on Regular Pages opened via the Index.
- Project Hover Zoom - When checked, thumbnails zoom in on hover. Project Squares must also be checked.
- Project Hover Panning - When checked, thumbnails change focal points as you move your mouse over them.
- Project Squares - When checked, thumbnails are cropped to squares. When unchecked, thumbnails take their original aspect ratio.
- Project Meta Width - Change the width of the page title and description that display on the left side of Gallery Pages, and of Regular Pages opened via the Index.
- Project Pagination - Adjust the color of the navigation arrows that display on Regular Pages and Gallery Pages opened via the Index.
- Project Pagination Background
- Hide Project Title - Hide the page titles that appear over Index Page thumbnails on mobile.
- Blog Borders - Add borders to your Blog Page and blog posts. Adjust the color with the Border Color tweak.
- Show Author - Display or hide the author on the blog list.
- Blog Post Spacing - Adjust the padding between blog posts on the blog list.
Adjust the settings for your site-wide footer.
- Autohide Footer - Set the footer to always display, or to only appear on hover.
- Social Icon Color
- Social Icon Size
- Social Icon Style: Normal, Round, Square
- 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.
- 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.
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 to learn more.
Tweaks for certain blocks also display in Site Styles. To learn more about available style changes, visit What are blocks? to find help content for your specific block.