The styles and features of the Brine template family.
With templates in the Brine family, you can create a professional web presence for any brand or company. Customize the headers, footer, content inset, and mobile styles to make your site stand out. Add full-bleed banners to any page, or stack them in the index. Optional parallax scrolling moves banners more slowly than the page content, creating an illusion of depth and immersion.
This guide covers the features and design options for the Brine family. See a list of Brine's templates.
Style your site in the Site styles panel. In this guide, style tweaks and the section they appear under in the Site Styles panel are bold.
Brine supports these page types:
- Album pages
- Blog pages - Standard grid/list
- Cover pages
- Events pages
- Gallery pages - Standard
- Index pages - Stacked
- Layout pages
- Store pages - Advanced
Visitors use the header at the top to navigate your site. In Brine, the header is divided into top and bottom sections.
- Add elements such as the site title or logo and navigation links to the top and bottom headers in the Header: layout section of site styles.
- The bottom header supports a background image and an intro area where you can add your own content.
Style the headers
Style the top header with these Header: top tweaks:
- Set the height with Padding.
- Set the color with Background.
The bottom header displays page banners as background images or videos. If there's no banner, the background color is the same as the page (set using the Color tweak under Main).
To change the height of the bottom header:
- All pages - Change the Padding under Header: bottom and the Intro padding tweak under Main.
- Individual pages - Add height by adding extra line breaks to the intro area.
- Index pages - Change the height of the top index section.
Add and style header elements
- Site title or logo (“branding”)
- Navigation links
- Built-in social icons
- Search bar
- Shopping cart
- Sign In / My account link
Choose where they display or hide them in the Header: layout section of site styles. For example, choose Branding position: Top center to add your site title or logo to the middle of the top header.
Style them using the tweaks in each of their Header sections. For example, go to Header: primary navigation to choose the font and color of the links.
- For elements in the bottom header, set their (Overlay) colors so they're visible over banners.
- Choose if elements in the same area (for example, Bottom center) stack or not with the Layout tweaks in Header: top and Header: bottom.
- Set their separate mobile styles to ensure they look good on mobile.
More help with headers
Keep tips in mind:
- For best results, place each element in a different area of the header. Elements may overlap if there isn't enough space.
- Some tweaks won't display until the elements they affect are added to your site.
- If the top header has no elements, it won't appear.
- For more tips, visit Building a site header.
Brine has three navigation areas.
Primary navigation and secondary navigation links:
- Can display in the top or bottom header.
- Are styled using the Header: primary navigation and Header: secondary navigation style tweaks. For example, choose Style: button to style primary or secondary navigation links as buttons.
Footer navigation links:
- Display in the site footer.
- Are styled with Footer: navigation tweaks.
In Brine, banners:
- Display for layout pages and collection pages.
- Become backgrounds for the bottom header.
- Display full-bleed, except with the Design: constrained layout.
- Can scroll slower than the rest of the page with parallax scrolling.
- Don't display for collection items (like blog posts, product items, and individual events).
You can stack multiple banners in an Index.
Use these options to style your banners:
- Add a color filter with the Overlay color tweak under Main: overlay.
- Add text and other blocks, like button blocks, in the intro area.
- To change the height, edit the intro area and add line breaks.
- Choose if banners scroll slower than the rest of the page with the Enable parallax tweak under Site: loading.
- In site styles, (Overlay) tweaks affect elements that display over banner images, like text and navigation links.
Cropping and centering
- If parallax scrolling is enabled, use the Parallax smart crop tweak under Site: loading to ensure banners crop the minimal amount.
- If the images are cut off in a way you don't expect, see our cropping troubleshooting tips.
- Choose how banner images are centered by changing their focal points. To ensure your image stays in view while scrolling, set the focal point near the center of the image.
More help with banners
Keep in mind:
- The first image in a gallery page automatically becomes the banner image if there isn't one. Replace or delete it in page settings.
- Create the effect of a slideshow page banner with an index with a slideshow gallery.
- For general help, visit Adding banner images.
The intro area in the bottom header is a page-specific header area that you can edit with text, images, and other content. This is a great way to customize the top of individual pages.
To edit the intro:
- Hover over the area above the page content, and click Edit.
- Add text and other content with blocks.
The intro area can display extra padding while you're editing your site. To see how the intro spacing appears on your live site, save your changes and view the page in preview mode.
Customize the site-wide footer to help visitors get the answers they need. Brine's footer has:
- Three blocks areas you can customize with your own content.
- An area that displays your business information.
- Footer navigation links.
- Two layout options (use the Layout tweak under Footer).
Style the fonts and colors with the Footer tweaks. To hide the footer, uncheck Show footer.
A blocks area, the business information, and the navigation display horizontally, with a blocks area above and below. Folders and index pages create columns. The index page and folders' titles display as headers that aren't links, with the sub-page links below.
The business information and navigation stack vertically, with blocks areas above, between, and below. Folder and index page titles don't display, and their sub-page links display horizontally.
The Brine template family uses a standard grid/list blog page. To learn more about the unique features and style options of this type of blog, visit Standard grid/list blog pages in version 7.0.
Brine index pages turn the content from multiple pages into stacked sections, so you can highlight different images and information in one location.
- Content sections are great for displaying text, buttons, and other blocks.
- Gallery index sections showcase images in a grid or slideshow format.
- Content inset (optional) creates extra white space around some blocks.
- If the top section is a content section, it displays in the bottom header.
To set the minimum height for some or all sections, use Apply minimum height under Index: page:
- Set this for the first section only, pages with banners, all pages, or no pages.
- Use Padding and Padding (overlay pages) to change the height of all sections.
- If the page content is longer than the minimum height, the section stretches to fit the content, including padding.
- To change just one section's height, add line breaks to the page content to make it longer.
- Banners can feature parallax scrolling.
- If there's no banner, the background color is the same as the page (set using the Color tweak under Main).
Gallery index sections
In the Index: gallery section of site styles:
- Choose if all gallery Index sections display as slideshows or grids with Layout.
- To change the spacing or create full-bleed effects, uncheck Apply spacing on sides and use the Spacing tweaks.
- Set the shape of images with Aspect ratio.
- If the section at the top is a gallery, use Overlay header on first index gallery to choose if it displays behind the bottom header.
- Add a color filter to images with Image overlay.
- Hover style sets what happens when you hover over an image.
Gallery index sections don't have parallax scrolling. If parallax is enabled, they appear to slide over the slower-moving content sections.
To help visitors explore your Index:
- Use the Index: scroll indicator tweak to add an arrow, line, or text to the first section to encourage them to scroll down (content sections only).
- Add navigation dots or lines with the Style tweak under Index: navigation. Clicking a dot or line takes them to the corresponding section.
Add space below the first section
If your site has a border, you can add a matching line of spacing beneath the first section.
- Check the Mirror border below first page tweak under Index: page or the Mirror border below first gallery tweak under Index: gallery, depending on the top section's type.
- The second section must be a content section with no banner.
- The spacing color is the same as the page. For best results, match this to the border color.
More help with Indexes
Keep in mind:
- Index pages don't have intro areas, and the intro areas for sub-pages don’t display.
- In header navigations, index pages create a single link.
- In footers, index pages display all their sub-page links.
- You can use an index to create a slideshow banner or full-page background image.
- See our tips on adding other types of content.
- Visit Using index pages for more help.
Structure and style
Use these options to change the look and feel of your site.
Ajax is a special method for site loading that makes content-heavy pages, like blog pages, faster and more nimble. To create a seamless browsing experience, we recommend keeping Ajax loading enabled.
- Enable or disable Ajax loading with the Enable Ajax loading tweak under Site: loading.
- Style or hide the loading bar that displays while pages load with the other Site: loading tweaks.
- Occasionally, Ajax may conflict with custom code, anchor links, and analytics.
- For more help, visit Ajax loading.
Add and style a site-wide frame around the header, main content area, and footer with Site: border tweaks. Cover pages don't show the border.
Style the fonts on your site with these Site Styles options:
- Site fonts - Content: fonts and Content: colors
- Text on banners - All (Overlay) tweaks
- Gallery index sections - Index: gallery
- Header elements - In their Header sections (for example, Header: branding)
- Product pages - Products
- Blog pages - Blog: typography & colors
Text links are underlined.
Parallax is a special scrolling effect where background images or videos move slower than the page content. Brine has parallax scrolling for its banners.
You can add Share buttons to most pages. Visitors use these buttons to share content to their social profiles.
- Blog and store pages - Advanced share buttons
- Album and events pages - Classic share links
Set the width with the tweaks in Site:
- Set the width of the content area with Width.
- The layout you choose with Design sets how the content area displays.
- The site border also affects the layout.
In the examples below, the Width is set to 880 pixels. The background color of the content area is set in the Main section of site styles.
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 amount, minus the Side Padding. Banners display full-bleed.
Design: constrained width
The background color from the Site section displays outside the content area. Banners display in the content area.
Use the content inset to create eye-catching layouts. When arranged in a single column, some blocks, such as text and quote blocks, display narrower than other page content, such as image blocks.
- This affects all areas where you can add blocks, including intro areas and the footer.
- Set the width with Content inset under Main.
- To remove the inset, set Content inset to 0.
- For more help, visit Content inset.
Use the following tweaks to set the background colors for your site:
- Main content area - Color in Main
- Side margins - Background in Site
- Border - Color in Site: border
- Top header - Background in Header: top
- Bottom header - Matches the main content area, or displays a banner
- Footer - Background color in Footer
- Index sections - Matches the main content area, or displays a banner
- Behind transparent banner images - Overlay color in Main: overlay, even if this color is set to transparent
Tip: You can use an Index to create the effect of a page background image.
This example shows many of the background areas:
With Squarespace's built-in responsive design, your site adjusts to look great on any device. In Brine, you can customize how your site appears in mobile devices and narrow browsers.
Choose the browser width where your site switches to mobile view with Mobile breakpoint tweak under Mobile. The default is 640 pixels.
Mobile header elements display in top or bottom navigation bars.
- To add a top or bottom bar, move any header element into it. For example, go to the Mobile: branding section of site styles and choose Position: top left to add the top bar.
- Choose if the top bar is fixed at the top or scrolls up with the page with the Fixed mobile top tweak under Mobile: top.
- The bottom bar is always fixed.
- Set the background colors with the Mobile: top and Mobile: bottom tweaks.
Your site's header elements display in the navigation bars and have separate mobile styles.
- Style them in each of their Mobile sections of site styles. For example, style the site title or logo with the Mobile: branding tweaks.
- Navigation collapses to a ☰ icon. Both the primary and secondary navigation display when the ☰ is tapped.
- Set the navigation background color with the Menu color tweak under Mobile menu: general.
- Close button tweaks in Mobile menu: general style the X that closes the navigation menu.
- Social icons and taglines don’t display on mobile.
- When tapped, the search icon opens an overlay with a search bar. The overlay background follows the site background color.
Although they have separate styles, the same element displays on both computer and mobile. For example, you:
- Can - Give your mobile site title a different color and font.
- Can - Display your search bar on mobile but hide it on a computer.
- Can't - Display a site title on a computer and a logo on mobile.
More help with mobile
Keep in mind:
- Store pages have mobile style options.
- Index navigation disappears on mobile.
- Parallax scrolling works on mobile.
- Video banners sometimes won't load for slow connection speeds and old browser versions. Set a mobile fallback image to appear when the video banner can't load.
- Long headings hyphenate and break to the next line.
- Unlike some templates, you can’t disable mobile styles.
- See our troubleshooting tips for mobile banner and background image cropping issues.
- See our general tips for how sites behave on mobile devices.
Templates in the Brine family
All templates in the Brine family have the same style options and features. You can browse Brine templates in the version 7.0 template store.
The Brine family includes:
- Custom Template (discontinued)
- Lincoln (discontinued)
Brine supports two language options: