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

Brine, Aria, Basil, Blend, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Lincoln, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, and West 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 these 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

(Overlay) tweaks affect elements that display over banner images. On the Index Page, they apply to content sections with background images, and all gallery sections.

Social Icons

Enable social icons in the Header: Layout section.

  • Size
  • Style: Regular, Border, Knockout, Solid
  • Shape: Square, Rounded, Circle
  • Color
  • Color (Overlay)

Site

Site

  • Background - Site background color, visible with Design: Constrained Width.
  • Design: Full Width, Full Background, Constrained Width. Learn more.
  • Width  
  • Site Padding  
  • Icons: Hairline, Light, Medium, Heavy  - Affects both mobile and desktop.

Site: Border 

  • Show Border
  • Width  
  • Color  

Site: Loading

  • Enable Ajax Loading
  • Show Loading Bar
  • Width
  • Color

Header

The header is split into a top and bottom section. Learn more at Structure and style.

Header: Top

  • Background - Background color.
  • Padding  
  • Left Layout: Horizontal, Stacked 
  • Center LayoutHorizontal, Stacked  
  • Right LayoutHorizontal, Stacked

Header: Bottom

  • Padding  
  • Left LayoutHorizontal, Stacked  
  • Center LayoutHorizontal, Stacked  
  • Right LayoutHorizontal, Stacked

Header: Layout

  • Element Spacing (Horizontal)  
  • Element Spacing (Vertical)  
  • Branding Position  
  • Tagline Position  
  • Primary Nav Position  
  • Secondary Nav Position
  • Social Position
  • Search Position  
  • Cart Position
  • Customer Accounts Link Position 

Each of the header elements can be displayed in the following areas of the header:

  • Top Left
  • Top Center
  • Top Right
  • Bottom Left
  • Bottom Center
  • Bottom Right 

Or select Hide to hide any element. Learn more at Structure and style.

Header: Branding 

  • Logo Width
  • Font  
  • Color  
  • Color (Overlay)  - Adjust the color over banners.

Header: Tag Line

  • Font 
  • Color  
  • Color (Overlay)  - Adjust the color over banners.

Header: Primary Navigation

(Overlay) tweaks adjust the color over banners.

  • Link Spacing
  • Style: Plain, Fade, Spotlight, Active, Button
  • Button Style: Solid, Outline, Raised
  • Button Shape: Square, Rounded, Pill
  • Font  
  • Color  
  • Active Color  
  • Button Text Color
  • Folder Color  
  • Folder Text Color  
  • Color (Overlay)  
  • Active Color (Overlay)  
  • Button Text Color (Overlay)
  • Folder Color (Overlay)  
  • Folder Text Color (Overlay) 

Header: Secondary Navigation 

(Overlay) tweaks adjust the color over banners.

  • Inherit Primary Navigation Styles - Uncheck to style Secondary Navigation differently than Primary Navigation.
  • Link Spacing
  • StylePlain, Fade, Spotlight, Active
  • Button Style: Solid, Outline, Raised
  • Button Shape: Square, Rounded, Pill
  • Font  
  • Color  
  • Active Color  
  • Button Text Color
  • Folder Color  
  • Folder Text Color  
  • Color (Overlay)  
  • Active Color (Overlay)  
  • Button Text Color (Overlay)
  • Folder Color (Overlay)  
  • Folder Text Color (Overlay)  

Header: Search 

Adjust the search bar. (Overlay) tweaks adjust the color over banners.

  • Style: Rectangle, Underlined, Icon Only
  • Show Placeholder Text - Add or remove the "Search" text
  • Font
  • Icon Scale - Set the size of the icon
  • Icon Color  
  • Background Color  
  • Border Color  
  • Text Color  
  • Icon Color (Overlay)  
  • Background Color (Overlay)  
  • Border Color (Overlay)
  • Text Color (Overlay)  

Header: Cart 

Adjust the shopping cart. (Overlay) tweaks adjust the color over banners.

  • Style: Text, Cart, Bag, Cart (Alternate), Bag (Alternate)
  • Font  
  • Color  
  • Quantity Color  
  • Quantity Text Color  
  • Color (Overlay)  
  • Quantity Color (Overlay)  
  • Quantity Text Color (Overlay)  

Header: Customer Accounts Link

  • Style: Text or Icon.
  • Font
  • Color

Adjust the shopping cart. (Overlay) tweaks adjust the color over banners.

  • Style: Text, Cart, Bag, Cart (Alternate), Bag (Alternate)
  • Font  
  • Color  
  • Quantity Color  
  • Quantity Text Color  
  • Color (Overlay)  
  • Quantity Color (Overlay)  
  • Quantity Text Color (Overlay)  

Main

Main 

  • Color  - Adjust the background color of the main content area.
  • Intro Padding (No Background Image) - Set the spacing above and below the content in the intro areas for pages without banners.
  • Intro Padding (With Background Image) - Set the spacing above and below the content for intro areas displaying over banners.
  • Content Section Padding - Set the spacing above and below the page content.
  • Content inset  - Set the width of the content inset. There must be at least one affected block on the page for this tweak to appear.

Main: Overlay

  • Enable Parallax - Enable parallax scrolling on banners.
  • Parallax Smart Crop - Ensure the banners crop the minimal amount.
  • Overlay Color

Index

Learn more at Index Pages.

Index: Navigation

Style the Index navigation.

  • Style: None, Radio, Filled Dots, Faded Dots, Horizontal Lines, Vertical Lines, Expanding Horizontal Lines 
  • Position: Left, Right
  • Breakpoint - Set the browser width at which the Index navigation disappears. 640 pixels is the standard for mobile devices.
  • Offset
  • Spacing
  • Indicator Size
  • Color - Set the color of the circle or line of the non-active sections.
  • Active Color - Set the color of the circle or line of the active section.
  • Color (Overlay) - For content sections with background images, and gallery sections.
  • Active Color (Overlay) - For content sections with background images, and gallery sections.
  • Show Titles - Choose whether titles appear on hover.
  • Font
  • Text Color
  • Text Color (Overlay)

Index: Page 

  • Padding  
  • Padding (Overlay Pages)
  • Apply Minimum Height: None, First Page Only, Pages with Backgrounds Only, All Pages - This tweak affects content sections
  • Minimum Height - Set the minimum height. Learn more.
  • Mirror Border Below First Page - Add padding beneath some first sections. Learn more.

Index: Scroll Indicator

  • Option: None, Icon Only, Icon and Text
  • Icon: Line, Arrow
  • Icon Weight: Hairline, Light, Medium, Heavy
  • Font
  • Color

Index: Gallery

Index Page gallery sections are made from Gallery Pages. Learn more.

  • Overlay Header on First Index Gallery - If the first section in your Index is a gallery, choose whether the bottom header overlays it.
  • Layout: Packed, Split, Grid, Slideshow - Set the layout for all gallery sections.
  • Spacing
  • Apply Spacing on Sides
  • Apply Spacing on Top/Bottom
  • Use Fixed Height - Set the height for all gallery sections.
  • Mirror Border Below First Gallery - Add padding beneath some first sections. Learn more.
  • Aspect Ratio
  • Max Items Per Row - Appears with Layout: Grid
  • Min Item Width - Appears with Layout: Grid
  • Hover Style: Plain, Fade
  • Image Overlay - Adjust the color overlay.

Index: Slideshow Gallery

Style gallery sections when set to Layout: Slideshow.

  • Next/Previous Controls: None, Large Arrows, Small Arrows - Add or hide the navigation arrows that display over the gallery.
  • Controls Offset
  • Controls Padding
  • Controls Weight: Hairline, Light, Medium, Heavy
  • Controls Color
  • Controls Background Color
  • Indicators: None, Dots, Line - Adjust the dots or lines that show how many images are in the gallery.
  • Indicators Offset
  • Indicator Width
  • Indicator Height
  • Indicator Spacing
  • Indicator Color
  • Indicator Color (Active)
  • Autoplay - Choose whether the slideshow moves through the images automatically.
  • Autoplay Duration (Seconds)
  • Transitions: None, Fade, Slide, Card - Set how the gallery moves from one image to the next.
  • Transition Duration (Milliseconds)

Index: Gallery Content

Style the image titles and descriptions that appear over gallery images.

  • Content Position: Top-Left, Top-Center, Top-Right, Middle-Left, Middle-Center, Middle-Right, Bottom-Left, Bottom-Center, Bottom-Right
  • Content Offset (Top)  
  • Content Offset (Right)  
  • Content Offset (Bottom)  
  • Content Offset (Left)  
  • Content Max Width
  • Content Padding  
  • Content Text Alignment: Left, Center, Right
  • Content Background  
  • Title Font  
  • Title Color  
  • Body Font  
  • Body Color  

Content

Content Fonts

  • Body Text
  • Heading 1  
  • Heading 2  
  • Heading 3  

Content Colors

(Overlay) tweaks adjust the color over banners. 

  • Body Text
  • Heading 1  
  • Heading 2  
  • Heading 3  
  • Links  
  • Lines  
  • Body Text (Overlay)  
  • Heading 1 (Overlay)  
  • Heading 2 (Overlay)  
  • Heading 3 (Overlay)  
  • Link (Overlay)  
  • Lines (Overlay)   

Footer

Footer 

  • Show Footer - Show or hide the footer on all pages
  • Layout: Stacked, Columns
  • Auto Width Columns - Choose whether to manually adjust the width of the columns. Use the Width tweaks in the Footer: Business and Footer: Navigation sections to set the widths.
  • Padding  
  • Alignment: Left, Center, Right
  • Background Color  

Footer: Business 

Style your Business Information.

  • Show Business Info
  • Business Info Width - Appears when Auto Width Columns is unchecked
  • Name Font
  • Name Color  
  • Info Font  
  • Info Color  
  • Show Business Hours
  • Business Hours Width - Appears when Auto Width Columns is unchecked
  • Hours Heading Font  
  • Hours Heading Color  
  • Hours Font  
  • Hours Color  

Footer: Navigation

  • Navigation Column Width - Appears when Auto Width Columns is unchecked
  • Navigation Heading Font
  • Navigation Heading Color
  • Navigation Font
  • Navigation Color

Footer Content: Colors 

  • Body Text  
  • Heading 1  
  • Heading 2  
  • Heading 3  
  • Links  
  • Lines  

Mobile

Style how your site’s branding, navigation menu, shopping cart, and search icon display when viewed on a mobile device.

Mobile

  • Mobile Breakpoint - Choose the browser width at which your site switches to mobile view. The default is 640 pixels.

Mobile: Top 

To add a top mobile bar, add any mobile header element (branding, menu icon, search icon, cart) to one of the Top positions in the sections below.

  • Fixed Mobile Top - Choose whether the top bar is fixed at the top or scrolls up with the page. The bottom bar is always fixed.
  • Top Background  - Adjust the color of the top mobile bar. 

Mobile: Bottom 

To add a bottom mobile bar, add any mobile header element (branding, menu icon, search icon, cart) to one of the Bottom positions in the sections below. This section won't appear if all elements are in the top bar.

  • Bottom Background - Adjust the color of the bottom mobile bar.

Mobile: Branding 

Style how your title or logo displays on mobile. 

  • PositionHide, Top Left, Top Center, Top Right, Bottom Left, Bottom Center, Bottom Right
  • Logo Width - Adjust the logo's size.
  • Font - Set the site title's font. You may want to keep your branding consistent across devices by using the same font as the Header: Branding section.
  • Color - Set the site title's color.

Mobile: Menu Icon 

Adjust the menu ("hamburger") icon.

  • Menu Icon PositionHide, Top Left, Top Center, Top Right, Bottom Left, Bottom Center, Bottom Right - Choose whether it displays in the top or bottom mobile bar.
  • Menu Icon: Hamburger, Two Lines, Plus, Horizontal Dots, Vertical Dots, Horizontal Squares, Vertical Squares
  • Menu Icon Color - Change the color.

Mobile: Search Icon 

Adjust the search bar icon.

  • PositionHide, Top Left, Top Center, Top Right, Bottom Left, Bottom Center, Bottom Right
  • Color 

Mobile: Cart 

Adjust the shopping cart that appears when you add a Products Page to your site. You may want to keep your branding consistent across devices by using the same style as the Header: Cart section.

  • PositionHide, Top Left, Top Center, Top Right, Bottom Left, Bottom Center, Bottom Right  
  • Style: Text, Cart, Bag - Choose the shopping cart's mobile style. 
  • Font - Adjust the font for a Text shopping cart.
  • Color - Set the icon or text color.
  • Quantity Color - For the Cart style, adjust the quantity circle.
  • Quantity Text Color

Mobile: Customer Accounts Link 

If you enabled customer accounts, style how your Sign In / My Account link displays on mobile.

  • Position: Hide, Top Left, Top Center, Top Right, Bottom Left, Bottom Center, Bottom Right
  • Style - Text or Icon.
  • Font - Set the link's font. You may want to keep your branding consistent across devices by using the same font as the Header: Customer Account section.
  • Color - Set the link's color.

Mobile Menu: General

Adjust the overlay that appears when you tap the menu icon on mobile.

  • Side: Left, Right
  • Backdrop Color  
  • Show Close Button  
  • Close Background Color  
  • Close Icon Color  
  • Menu Color  
  • Indicator Color - Set the expand/collapse folder icon's color

Mobile Menu: Primary

  • Font  
  • Text Color  
  • Convert Primary Nav to Buttons
  • Button Style: Solid, Outline, Raised - Folder sub-pages won't display as buttons.
  • Button Shape: Square, Rounded, Pill
  • Font
  • Button Color
  • Button Text Color

Mobile Menu: Secondary

  • Inherit Primary Nav Styles - Uncheck to style Secondary Navigation differently than Primary Navigation.
  • Font  
  • Text Color  
  • Convert Secondary Nav to Buttons
  • Button Style: Solid, Outline, Raised - Folder sub-pages won't display as buttons.
  • Button Shape: Square, Rounded, Pill
  • Font
  • Button Color
  • Button Text Color

Album

Album Options

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

  • Album Text Color  
  • Hide Album Share Link  

Blog

Learn more at Blog Pages.

Blog: Metadata 

You can display up to two metadata elements on Blog Pages and blog posts.

  • Primary: None, Category, Author, Date, Location, Tags, Comments
  • Secondary: None, Category, Author, Date, Location, Tags, Comments 

Blog: List 

  • Style: Grid, Stacked
  • Posts Per Row (Max)  
  • Spacing  
  • Show Separator - Add or remove a line between stacked posts.
  • Separator Width  
  • Separator Color  
  • Alignment: Left, Center, Right
  • Item Spacing  
  • Show Image  
  • Image Aspect Ratio
  • Max Image Width
  • Show Title
  • Show Excerpt
  • Show Post Body
  • Read More Link: Hide, Inline, Below Excerpt
  • Metadata - Above Title, Below Title, Below Content
  • Show Pagination Label
  • Show Pagination Arrows
  • Pagination Arrow Weight: Hairline, Light, Medium, Heavy

Blog: Item 

  • Alignment: Left, Center, Right
  • Item Spacing
  • Metadata: Above Title, Below title
  • Share Icons: Above Content, Below Content
  • Show Pagination Arrows  
  • Show Pagination Label  
  • Show Pagination Title  
  • Pagination Meta: Hide, Category, Author, Date, Location, Tags
  • Pagination Arrow Weight: Hairline, Light, Medium, Heavy 

Blog: Typography & Colors

  • List Title Font 
  • Item Title Font  
  • Title Color  
  • Meta Font  
  • Meta Color  
  • Excerpt Font  
  • Excerpt Color  
  • Read More Link Font  
  • Read More Link Color  
  • Pagination Label Font  
  • Pagination Label Color  
  • Pagination Arrow Color  

Events

These tweaks appear when you’re on an Events Page. For general help, visit Styling the 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  
  • Show Icons  

Gallery

Gallery Styles

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

  • Use the Gallery Design tweak to set the layout.

Gallery Design: Grid

  • Aspect Ratio - Controls the aspect ratio (width:height) for the gallery active slide.
  • 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

Gallery Design: 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 - 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 - Set the height of gallery navigation thumbnail images.
  • 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 - Options under image: Center, Left. Options for 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, 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

These 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. To learn more, visit Structure and style.

  • 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 to learn more.

Blocks

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

Certain blocks in these templates feature a content inset. To learn more, visit Structure and style.

Was this article helpful?
3 out of 9 found this helpful
Brine Style Editor tweaks