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.

Black background with the text 'Available For Work' and a green dot.

// 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.

Collage featuring a building facade with the word 'SAFA,' green palm leaves, and a close-up of hands wearing a gold ring. A navigation menu overlays the bottom with options: Home, Work, Blog, Contact, More.

// 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.

Top of a bread roll partially visible with navigation buttons labeled "Contact" and "More" overlapping.

// 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.

Dark-themed website navigation menu with tabs for Home, Work, Blog, Contact, More, and a dropdown menu under Work showing options: Work v1, Work v2, Details v1, Details v2.

// 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.

Vertical menu with options: Home, Work, Blog, Contact, More, each with an arrow.

// 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.

Screenshot of a webpage with two blog post sections. The first image shows a modern museum interior with sculptures. The second image is a close-up of green leaves against a blue sky. Both sections show a date, "7/14/24," and a placeholder text with the label "Blog Post Title."

// 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;
}

White lightning bolt icon on a black background

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