Guide

Enabled settings and simple CSS styles.

This template includes additional CSS for simple design tweaks. Everything else will be related to Squarespace’s built-in settings.

Go To Design > Custom CSS

Settings

Squarespace Settings

These built-in style settings that have been enabled.

  • Site Animations (Design Settings)

  • Header - Border Style (Header Settings)

  • Header - Drop Shadow (Header Settings)

  • Page Section - Overlap (Shape Block)

Other style settings (fonts, colors, buttons, etc) can be found in the site styles.

Files

Downloadables

This template includes topographic graphics (PNG, PSD). Images are sourced from Unsplash.

Text Block - Border Style

Adds a border style to the text block when the background setting is enabled.

// TEXT BLOCK - Border Style When Set With Background Setting //

.sqs-block.sqs-background-enabled {
  border: 1px solid #eee;
}

Navigation Folder - Link Hover Style

Adds a hover border style and extra padding between the links in the navigation drop down folder.

// NAV FOLDER - Link Hover Style //

.header-nav .header-nav-item--folder .header-nav-folder-content .header-nav-folder-item:hover {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
}

.header-nav .header-nav-item--folder .header-nav-folder-content .header-nav-folder-item {
  padding: 10px 15px;
  border: 1px solid #fff;
}

Navigation Folder - Border Style

Adds a border style, rounded corners, and padding to the navigation drop down folder.

// NAV FOLDER - Border Style //

.header-nav .header-nav-item--folder .header-nav-folder-content {
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 15px;
}

Mobile Menu - Link Size

Adjust the size of the links in the mobile menu.

// MOBILE MENU - Link Size //

@media screen and (max-width: 800px) {
  .header-menu-nav-item a, .header--menu-open .header-menu .header-menu-cta a {
    font-size: 22px !important;
    font-weight: 700;
  }
}

Italic Text - Underline Style

Adds an underline style to any text when set to italic.

// ITALIC TEXT - Underline Style //

em {
  padding: 10px;
  border-bottom: 1px solid #2a514c;
  font-style: normal;
}

Blog Read More Link - Button Style

Adds a button style to the blog post’s read more link. Applies to all blog layouts.

// BLOG READ MORE LINK - Button Style //

.blog-more-link {
  background: #2a514c;
  padding: 10px 20px !important;
  border-radius: 20px 0px 20px 0px;
}

.blog-more-link:after {
  display: none;
}

Page Section - Border Style

Adds a border to the bottom of each page section.

// PAGE SECTION - Border Style //

.page-section {
  border-bottom: 1px solid #eee;
}

Newsletter Block - Full Width Field and Button On Mobile

Makes the newsletter block’s input fields and button full width on mobile.

// FORM BLOCK - Background and Border Style // 

.form-wrapper .field-list .field .field-element {
  background: #fff;
  border: 1px solid #ddd;
  padding: 20px;
}

Coming Soon Page - Hide The Header and Footer

Hides the header and footer on the Coming Soon page. Use this free tool to find IDs of future pages.

// COMING SOON - Hide Header & Footer //

#collection-12345 {
  header, footer {  
    display: none !important;
  }}