CSS Styles, Settings (Guide)

This template includes additional CSS for simple design tweaks. These design tweaks have been added to Design > Custom CSS.

Everything else will be related to Squarespace and its settings.

Squarespace Settings

This template uses the DARK 1 color palette. These built-in style settings have been enabled and are not code related.

Site Animations (Design Settings)
Header Gradient Style (Header Color Settings)
Sticky Image Blocks (Block Settings)

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

Coming Soon Page - Hide Header and Footer

The Header and Footer on the Coming Soon Page is hidden and disabled in the page’s settings.

Downloadables

This template does not include any files. Demo images are sourced from Unsplash and icons are sourced from The Noun Project.

TILTED IMAGE BLOCKS - On Homepage

Adds a left title to an image block and a right tilt to an image block on the Home Page. The code is targeting the Block ID of that specific block, so don’t delete those blocks.

Use this free Chrome Extension to find the Block IDs of other blocks you want to add.

// TILTED IMAGE BLOCKS BY BLOCK ID - On Homepage //

#block-04da4fdbb88b2f9a4666{
  transform: rotate(-10deg); // LEFT TILT
}

#block-ca74ff19c6f709a4f8e1 {
  transform: rotate(10deg) // RIGHT TILT
}

HEADER BUTTON - Available Dot

Adds a colored dot next to the header navigation button. You can adjust the character, color, top spacing, and font size.

// HEADER BUTTON - Available Dot //

.header-actions .header-actions-action--cta:after, .header-menu-cta a:after{
  content: "●";
  color: #1BBD71;
  margin: 0px;
  font-size: 16px;
}

HEADER NAVIGATION LIST - Pill Style

Adds a pill shape style to the header navigation list. You can adjust background color, padding, border, and border radius.

// NAVIGATION LIST - Pill Style //

.header-nav-list {
  background: #111111;
  padding: 10px;
  border: 1px solid #222;
  border-radius: 10px;
}

HEADER NAVIGATION LIST - Floating Style and Gradient Background

Adds a bottom floating bar style to the header navigation list. This can be removed to revert back to Squarespace’s native navigation at the top of the site.

Also adds a gradient color to the bottom of the site on desktop match the gradient style in the header. Adjust the background image color and padding. Does not apply on mobile.

⚠️ Header Layout must be set to Logo and Navigation Center.

// NAVIGATION LIST - Floating Style and Gradient Background //

.header-nav {
  background-image: linear-gradient(to bottom, rgba(255,0,0,0), rgba(0,0,0,1));
  padding: 50px 0px 30px 0px;
  bottom: 0px !important; 
  left: 0px !important;
  width: 100% !important;
  position: fixed !important;
}

NAVIGATION FOLDER - Border Style

Adds a background color, padding, border style, and rounded corners. Link color can be changed in Squarespace settings.

// NAVIGATION FOLDER - Border Style //

.header-nav .header-nav-item--folder .header-nav-folder-content { 
  bottom: 25px;
  background: #111 !important;
  padding: 15px !important;
  border: 1px solid #222;
  border-radius: 10px;
}

MOBILE MENU - Link and Button Font Size

Adjusts the font size of the links and button in the mobil menu.

// MOBILE MENU - Link and Button Font Size //

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

AUTO LIST - IMAGE (LOGO) - Smaller Image Size

Makes the Auto List’s image size a bit smaller beyond Squarespace’s default minimum setting.

// AUTO LIST - IMAGE (LOGO) - Smaller Image Size //

.user-items-list-carousel__media-container {
  max-width: 80px;
}

IMAGE BLOCK AND BLOG POST IMAGES - Tilt Hover

Adds a floating bar style to the header. Pre-set options included or can be removed to revert back to Squarespace’s native header.

// IMAGE BLOCK AND BLOG POST IMAGES - Tilt Hover //

.sqs-block-image:hover, .blog-basic-grid .image-wrapper:hover {
  transform: rotate(5deg) !important;
  transition: all 0.2s ease-in-out !important;
}

.sqs-block-image, .blog-basic-grid .image-wrapper {
  transition: all 0.2s ease-in-out !important;
}

NEWSLETTER BLOCK - Full Width Field and Button On Mobile

Makes the newsletter block’s input fields and button full width on mobile for a better look.

// NEWSLETTER BLOCK - Full Width Field and Button On Mobile //

@media only screen and (max-width: 640px) { .newsletter-block .newsletter-form-button-wrapper, .newsletter-block .newsletter-form-button, .newsletter-block .newsletter-form-fields-wrapper, .newsletter-block .newsletter-form-field-wrapper, .newsletter-block .newsletter-form-wrapper--layoutStack .newsletter-form-field-wrapper, .newsletter-block .newsletter-form-name-fieldset {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  margin: 0px !important;
  }}

FOOTER - Border Style

Adds a border to the top of the Footer to help separate the Footer from the last page section.

// FOOTER - Border Style //

footer {
  border-top: 1px solid #222;
}

Get more plugins.

Customize your template even more with our library of Free Plugins and Premium Plugins for Squarespace. Use code BOO for 10% off.

ghostplugins.com