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

Flatiron Site Styles tweaks

This is a list of all Site Styles tweaks for the Flatiron template.

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 Flatiron template guide.


Set the general style settings for your site. 

  • Background Color - Affects 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 in Blog Styles.

Site Header

These tweaks affect the header. Subtitle tweaks affect the tagline.

  • Logo Image Height
  • Site Title Font
  • Site Title Color
  • Site Subtitle Font
  • 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.


Style the Main Navigation links that display in the header.

  • Main Nav Font
  • Navigation Text Color
  • Navigation Hover Color
  • Navigation Active Color
  • Nav Spacing

Main Content

Style your site's fonts.

  • Text - Set the body text.
  • Text Color
  • Headings - Style all headers on your site. The size option affects Heading 1; 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 - Style the Share link on Album Pages, Gallery Pages, product items, and blog posts, and the Simple Like button on blog posts.

Gallery Styles

These tweaks apply to Index Pages, Layout Pages accessed via the Index, and Gallery Pages. Learn more in the Flatiron template guide.

  • Grid Headings - Change the page titles that display over Index thumbnails.
  • Grid Headings Color
  • Grid Subheadings - Change the "View" text below page titles on Index thumbnails.
  • Grid Subheading Color
  • Grid Background Color - Change the color that displays behind page titles on Index thumbnails.
  • Project Width - Set the width of Index Page thumbnails.
  • Project Detail Width - Set the width of Gallery Page images, and the width of page content on Layout 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 on Gallery Pages, and on Layout Pages opened from Indexes.
  • Project Pagination - Change the color of the navigation arrows on Layout Pages and Gallery Pages opened from Indexes.
  • Project Pagination Background


  • Hide Project Title - Hide the page titles that appear over Index Page thumbnails on mobile.

Blog Styles

These tweaks appear on Flatiron Blog Pages.

  • Blog Borders - Add borders to your Blog Page and blog posts. Change the color with the Border Color in General.
  • Show Author - Display or hide author names.
  • Blog Post Spacing - Change the padding between posts on the landing page.

Site Footer

Change 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


These tweaks appear on Classic Products Pages.


  • Show Category Navigation
  • Category Nav Font
  • Category Nav Color
  • Category Nav Active Color
  • Product Background Color
  • Product Overlay Color
  • Products Per Row
  • Product List Titles: Under, Overlay
  • Product List Alignment: Center, Left
  • Product Item Size
  • Product Image Auto Crop
  • Product Gallery Size
  • Product Gallery Auto Crop
  • Show Product Price
  • Show Product Item Nav
  • Product Social Sharing

Products: Related Products

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


These tweaks appear on Events Pages.

  • 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

Album Options

These tweaks appear on Album Pages.

  • 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 Site Styles. To learn about the style options, visit Adding content with blocks and click the name of the block you want to learn more about.

Was this article helpful?
1 out of 17 found this helpful
Flatiron Site Styles tweaks