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

This is a list of all Site Styles tweaks for templates in the Brine family. See a list of Brine's templates.

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

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 built-in 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 - Learn more.
  • Show Loading Bar
  • Width
  • Color

Header

The header is split into top and bottom sections.

Header: Top

  • Background - Background color for the top header.
  • 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.

Header: Branding 

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

Header: Tag Line

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

Header: Primary Navigation

(Overlay) tweaks set 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 set 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)

Style the search bar. (Overlay) tweaks set 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 

Style the shopping cart. (Overlay) tweaks set 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

Main

Main 

  • Color  - Set the background color of the main content area.
  • Intro Padding (No Background Image) - Set the spacing above and below the content in intro areas for all pages without banners. This tweak appears when you're on a page without a banner.
  • Intro Padding (With Background Image) - Set the spacing above and below the content in intro areas displaying over banners. This tweak appears when you're on a page with a banner.
  • 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 banners crop the minimal amount.
  • Overlay Color - Add a color filter to all banners on your site.

Index

Learn more about Brine 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. This uses a percentage of the viewport height (the part of a browser where your site displays). For example, if you choose 100vh, the section takes up 100% of the viewport height. The actual height in pixels varies depending on the height of a visitor's browser or device.
  • Mirror Border Below First Page - Add padding beneath some first sections.

Index: Scroll Indicator

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

Style Index gallery sections.

  • 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. Packed and Split set their layouts automatically based on the number and size of the images in the gallery, and their padding.
  • Spacing
  • Apply Spacing on Sides
  • Apply Spacing on Top/Bottom
  • Use Fixed Height - Set the height (slideshow sections only)
  • Mirror Border Below First Gallery - Add padding beneath some first sections.
  • Aspect Ratio - Set the shape. Setting the slider percentage to 100 creates square images. For more help, see our tips on calculating aspect ratio as a percentage.
  • Max Items Per Row - Appears with Layout: Grid.
  • Min Item Width - Appears with Layout: Grid.
  • Hover Style: Plain, Fade
  • Image Overlay - Set the color overlay.

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 - Style 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)

Style the 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 set 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

  • Show Footer - Show or hide the footer on all pages
  • Layout: Stacked, Columns
  • Auto Width Columns - Choose whether to manually set 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

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
  • Navigation Column Width - Appears when Auto Width Columns is unchecked
  • Navigation Heading Font
  • Navigation Heading Color
  • Navigation Font
  • Navigation Color
  • Body Text 
  • Heading 1 
  • Heading 2 
  • Heading 3 
  • Links
  • Lines

Mobile

Style how your site’s header elements display on mobile devices.

Mobile

  • Mobile Breakpoint - Choose the browser width at which your header 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  - Set 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 - Set the color of the bottom mobile bar.

Mobile: Branding 

Style how your site title or logo displays on mobile. 

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

Mobile: Menu Icon 

Style the ☰ icon.

  • Menu Icon PositionHide, Top Left, Top Center, Top Right, Bottom Left, Bottom Center, Bottom Right - Choose if 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 

Style the search bar icon.

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

Mobile: Cart 

Style the shopping cart that appears when you add a Products Page to your site. To keep your branding consistent across devices, use 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 - Set the font for a Text shopping cart.
  • Color - Set the icon or text color.
  • Quantity Color - For the Cart style, change 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. To keep your branding consistent across devices, use the same font as the Header: Customer Account section.
  • Color - Set the link's color.

Mobile Menu: General

Style 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

Quote Block

  • Alignment: Left, Center, Right
  • Quote Font
  • Source Font

Album Options

These tweaks appear on Album Pages.

  • Album Text Color
  • Hide Album Share Link

Blog

These tweaks appear on grid/stacked 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
  • 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 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
  • Show Icons

Gallery Styles

These tweaks appear on standard Gallery Pages.

  • Gallery Design - Set the layout.
  • Aspect Ratio
  • Grid Spacing
  • Min Column Width
  • Lightbox Style: Dark, Light
  • 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 - 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: 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

These tweaks appear on blog posts or product item pages. Which tweaks appear depends on what 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. 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 About blocks and click the name of the block you want to learn more about.

Certain blocks feature a content inset.

Was this article helpful?
8 out of 33 found this helpful
Brine Site Styles tweaks