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

The Brine family has multiple templates, which share the same underlying structure and functionality. This guide applies to all these templates.

 

This guide walks you through the options for adjusting the look and feel of your site.

Before you begin

  • This is a supplement to the guide Making style changes, which we suggest you read first if you're new to Squarespace.
  • To access the Style Editor, go to the Home Menu and click Design, then Style Editor.
  • Some tweaks are specific to certain pages. To see these tweaks, go to that page and then open the Style Editor.
  • There are separate style options for parts of your mobile site (such as your site title) and for content that displays over banners.

Supported pages

Add pages to your site to create your site's underlying structure. Pages can appear as links in your site's navigation.

Templates in the Brine family support these page types:

Site header

The header at the top of the page sets the tone for your site and plays a big role in how visitors navigate and interact with your content.

In the Brine family, the header is divided into top and bottom sections. You can place the following header elements in any of these sections, on the left, center, or right:

  • Site title or logo (“branding”)
  • Tag line
  • Navigation links
  • Social icons
  • Shopping cart
  • Sign In / My Account link
  • Search bar

To learn more, visit Brine site header.

You can also add a background image to the lower half of the header. To learn more, visit Brine banners

brine-header.png

Navigation links

The Brine family supports three navigation areas, each of which you can style independently:

  • Primary Navigation - Displays in the site header.
  • Secondary Navigation - Displays in the site header.
  • Footer navigation - Displays in the site footer. 

Add links to these areas in the Pages panel, and style them in the Style Editor. To learn more, visit Brine site header and Brine site footer.

marta-navigations.png

Site width and layout

Use the Design tweak in the Site section of the Style Editor to choose the width of your site. 

  • Design: Full Width - Content displays at the width of the browser, minus the Side Padding. Banners display full-bleed.
  • Design: Full Background - Content displays at the width set with the Width tweak, minus the Side Padding. The background color chosen in the Main section of the Style Editor extends out to the edge of the browser. Banners display full-bleed.
  • Design: Constrained Width - Content displays at the width set with the Width tweak, minus the Side Padding. Banners ignore the side padding but display within the set width. The background color chosen in the Site section of the Style Editor displays outside the main content area.
Tip: The site border also affects the layout.

Here's an example of the same site showing the three layout options. For Full Background and Constrained Width, the Width is set to 880 pixels: 

brine-full-background.png

brine-constrained-width.png

brine-full-width.png

Border

Add a frame around your entire site in the Site: Border section of the Style Editor. Check Show Border and then use the tweaks that appear to adjust the width and color.

The border is site-wide and displays around the header, main content area, and footer. 

  • Depending on your site's width and layout, you may see a background color on the sides.
  • Cover Pages won't show the border. 

In this example, the site has a green border: 

brine-site-border.png

Background colors

These are the Style Editor tweaks for changing the background colors of your site:

  • Main content area - Use the Color tweak in the Main section.
  • Side margins - If you've chosen the Design: Constrained Width layout, use the Background tweak in the Site section.
  • Border - The border creates a frame around your entire site. Use the Color tweak in the Site: Border section.
  • Top header - Use the Background tweak in the Header: Top section. (The bottom header matches the main content area, or displays a banner.)
  • Footer - Use the Background Color in the Footer section.
  • Index sections - Sections without a background image have the same background color as the main content area (the Color tweak in the Main section).
  • Behind transparent banner images - Displays the Overlay Color in the Main: Overlay section, even if this color is set to transparent.

This example image shows many of these background areas:

just-colors.png

Fonts and font colors

These are the Style Editor tweaks for changing the font styles on your site:

  • Adjust the fonts for body text and headings in the Main: Content Fonts section of the Style Editor.
  • Adjust the colors for body text, headings, links, and lines with the Main: Content Colors section.
  • (Overlay) tweaks affect the style for body text, headings, links, and lines that display over banners.
  • Adjust the title and body fonts and colors for galleries in an Index with the Index: Gallery section.
  • Set the font and color for each of the header elements (like site title, navigation links, and tag line) within their individual Header sections.
  • Adjust Product Page fonts with the Products section.
  • Use the Blog: Typography & Colors section to adjust blog fonts and colors.

Content inset

These templates support a content inset feature to help your content stand out. When arranged in a single column, certain blocks will be centered with extra white space on either side, making them narrower than the other page content.

This affects all editable blocks areas, including:

  • Regular Pages
  • Blog posts
  • Intro areas
  • Footer blocks areas

Adjust the column width with the Content Inset tweak in the Main: Content section of the Style Editor.

  • To remove the content inset, set the Content Inset tweak to 0.
  • You can further adjust the column width with the Width and Site Padding tweaks in the Site section.
  • There must be at least one affected block on the page for the Content Inset tweak to appear.

The content inset affects most blocks, including:

These blocks aren't affected:

For a list of all affected blocks, visit Content inset.

The content inset particularly emphasizes any floated blocks on the page. To learn how to float blocks, visit Moving blocks.

Banners and parallax scrolling

In the Brine family, you can add a full-bleed image at the top of the page as a banner. You can also stack multiple banners vertically in an Index Page.

These banners support a special visual effect called parallax scrolling, where elements on the page scroll at different speeds.

To create a banner, add an image or video in the Media tab of Page Settings. To learn more, visit Brine banners.

parallax-scroll.gif

Intro areas

Most pages support a page-specific header area called the "intro." This is a great way to customize individual pages and introduce the page content to your visitors. On pages with banners, the intro displays over the banner. In the screenshot below, it's the area in the yellow box.

To learn more, visit Brine site header.

Share buttons

Special customizable Share buttons display on blog posts and product item pages. These buttons allow visitors to share content to their social profiles in one click, helping to expand your audience and drive more traffic to your site.

To choose which buttons display, or hide them all, go to the Home Menu and click Settings, then Marketing. Then click Share Buttons, and check or uncheck the buttons you want to display. Learn more at Adding Share buttons.

The Brine family supports Advanced Share buttons for Blog and Products Pages. Navigate to a blog post or product item page and open the Style Editor to adjust the display settings:

  • Use the Share Buttons section to adjust their size, spacing, color, and style (icon only, solid, outline, or raised).
  • Depending on which style you choose, more tweaks will appear to add labels and adjust the button options.
  • Blog post - Use the Share Icons tweak in the Blog: Item section to change where they display (below content or above content).
  • Product item - Share buttons display with the product details, which you can adjust with the Products: Details section. Hide the Share buttons by unchecking Show Share Buttons.

A Share link with pop-up Share buttons also appears on Album and Events Pages. These Share buttons don’t take on the customized styles. Learn more at Adding Share buttons.

Tip: The Pinterest button only displays on pages that have thumbnail images.

brine-advanced-share-buttons.png

Ajax loading

Ajax (asynchronous JavaScript and XML) is a special method for site loading, which retrieves server data for specific elements without reloading the whole page. This makes content-heavy pages like a Blog Page much faster and more nimble.

  • Use the Site: Loading section of the Style Editor to enable Ajax loading and style or hide the loading bar that displays while pages load.
  • To create a seamless browsing experience, we recommend keeping Ajax loading enabled. Occasionally, Ajax may conflict with embedded custom code. If you’re troubleshooting issues with embedded custom code, you can disable Ajax by unchecking Enable Ajax Loading.

Footer

The bottom of your site is often where visitors look first for important information such as contact details, FAQs, terms of service, and return policies.

The footer in the Brine family contains a business information area, a navigation area, and three areas you can customize with blocks. You can also choose between a stacked layout and a columns layout.

To learn more, visit Brine footers.

Changing languages

In the Brine family, you can choose the language for your site's built-in text, such as submission forms and the Order Confirmed message. To learn more, visit Changing languages.

Tip: If you haven't created a site yet, you can start with a FrenchGerman, ItalianPortuguese, or Spanish template.

 

Gafas_de_sol.png

Mobile

Because Squarespace templates are built with responsive design, your site adjusts on mobile devices to better fit the format of that device. These templates have mobile-specific tweaks for an extra layer of customization, including:

  • Add one or two mobile navigation bars.
  • Choose whether the top bar is fixed.
  • Set separate styles for header icons.
  • Adjust where the icons appear.

To learn more, visit Brine mobile styles.

Sidebar

These templates don't support a sidebar on any page. To learn more about sidebars and the templates that support them, see Editing sidebars.

To add supplemental content to pages in the Brine family, we recommend these options:

  • The footer has editable content areas that display on every page of your site.
  • Most pages support an intro area where you can add content to the top of individual pages.
  • You can create multi-column layouts on Regular Pages and blog posts. Once you have a layout you like, you can duplicate pages or blog posts so you don't have to start from scratch each time.

FAQs

See Brine troubleshooting for more help, including:

Was this article helpful?
18 out of 36 found this helpful
Brine structure and style