TEMPLATE DOCUMENTATION

Read this page before making any changes to the template. Also, please register for our template restyle course:

*By the way, this page is pass-protected. You can just keep it in the Not Linked section and consult it when you need to

 

What's covered in this guide:

  1. How to get started / Watch the course

  2. Access CANVA graphics

  3. Blog navigation (browse by category)

  4. Custom CSS explained

  5. Headline 4 font

  6. Website header dropdown menu

  7. "BRIGHT 1" sections with a gradient background

  8. Testimonials

  9. “Info cards with borders” sections

  10. Blog navigation style

1. How to get started / Watch the course

First, duplicate all the pages you plan to use before making any changes to the design. This way you will save the original design of the layouts for your future reference. Many things can go wrong when you start designing, and some of them are difficult to reverse. Duplicating the pages beforehand will safeguard your customization process. If you mess something up, you can always start fresh. You can duplicate pages within one website as many times as you need.

To duplicate a page click a small gear icon next to it. In the general settings scroll down and click Duplicate page. You can put these duplicated pages in the Not-Linked section, so no one sees them except for you. To do this, just click the name of the page and drag it down.

You can also save template’s sections to favorites. When you click “Add a section“, you will see all your saved sections along with Squarespace default ones.

We also advise you to watch the course and prepare your content before tweaking the template. The course walks you through Squarespace website builder and explains how to customize your template using basic design principles. Watching it before jumping into tweaking ensures the best possible outcome.

2. Access CANVA graphics

3. Blog navigation (browse by category)

This templates features a navigation by category block on he Blog page. If you edit the Blog page, you will notice a markdown block with some code in it (as seen on the screenshot below).

Click edit on the Markdown block to see the the HTML code, structured like this:

If you added / replaced categories in your blog, you will need to manually edit this block to account for any changes you made.

Text inside the <a> … </a> HTML tags needs to be the same as your blog categories. Same goes for category names listed after =“/blog?category=…“, in red on the screenshot above. You can add / remove lines in the code snippet if you add / remove blog categories in your post(s).

4. Custom CSS explained

Although Squarespace Fliud Engine (more on difference between Classic Editor and Fluid Engine here) is an amazing tool which allows us to design functional and visually stunning templates, to achieve certain design and layout effects we use custom CSS code. To access it, navigate to Design > Custom CSS from your template admin panel. There are lots of comments in the code which should help you navigate it and make changes where necessary. Below we explain the key changes we make using custom CSS:

5. Headline 4 font

All the headings on Squarespace websites use one font. It is set in Design > Site Styles > Fonts > Headings and applies to h1, h2, h3, h4. In this template, however, we gave h4 a different font. While h1, h2, and h3 use Meno Banner, h4 uses ITC Avant Garde Gothic Pro.

If you want to set some other font for Headline 4, you will first need to add that new font to your website. Go to Design > Fonts > Miscellaneous and choose the one you like in the collection of fonts.

Now go to Design > Custom CSS and find this snippet in the code:

// Typography
h4 {
  font-family: itc-avant-garde-gothic-pro;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.12em;
}

Change the name of the font (after font-family:) for the one you have set in Miscellaneous. You can also tweak more settings here – choose your font to be uppercase or lowercase, change weight, line height, and letter spacing. Click Save in the upper-left corner, when you are done tweaking and you like the final look.

6. Website header dropdown menu

Items in the dropdown menu tend to appear too close together, which is what we fix with this snippet:

//This changes line height and color in the header dropdown menu
.header-nav {
  .header-nav-item--folder {
    .header-nav-folder-content {
      .header-nav-folder-item {
        line-height: 2.5;
        margin-left: 5px;
        margin-right: 12px;
      }
    }
  }
}

7. "BRIGHT 1" sections with a gradient background

To add a gradient to a section, simply go into Edit mode, then click Edit Section > Colors and select BRIGHT 1. No matter what color you set for BRIGHT 1 it will always add a brown-gold gradient as background, as it is set in custom CSS via this snippet:

// Add gradient to all "Bright 1" sections 
section[data-section-theme="bright-inverse"] {
  .section-border,
  .section-divider {
    .section-background {
      background: linear-gradient(105.53deg, #6D5227 0.44%, #B5863D 100%);
    }
  }
}

You can either remove the snippet above completely, thus reverting to default behavior, or edit the background: linear-gradient… line to adjust the gradient. You can use this handy tool (cssgradient.io) to visually generate a gradient.

8. Testimonials

Changes we make to “Testimonials“ type sections:

  • Make image round and make it smaller

  • Remove background from navigational arrows and make same color as the testimonial text

  • Tweak mobile view to make it fit smaller screens better

Here are the two snippets we use for that:

// Overall List items carousel adjustments
// In particular this is applied to Testimonials
.light {
  .user-items-list-carousel {
    // Change the color of the carousel arrows
    .desktop-arrows,
    .mobile-arrows {
      .user-items-list-carousel__arrow-icon-background {
        background-color: transparent;
      }
      .user-items-list-carousel__arrow-icon,
      .mobile-arrow-icon {
        path {
          stroke: var(--list-section-carousel-title-color);
        }
      }
    }
  
    .list-item-content__description {
      @media @up-to-mobile {
        max-width: 100% !important;
      }
    }
  }
}

// Testimonials
//   Section type - Testimonials 
//   Design type - Carousel, with:
//     * Max Columns : 1
//     * Image Crop : "1:1"
//     * Infinite Scroll : true
//     * Style & Size settings adjusted 
//       to make it look as close 
//       to final design as possible
.user-items-list-section {
  .user-items-list {
    .user-items-list-item-container {
      ul.user-items-list-carousel__slides {
        li.list-item.user-items-list-carousel__slide {

          // Image container
          .user-items-list-carousel__media-container {
            @media @from-mobile {
              width: 8.5% !important;
            }
             @media @up-to-mobile {
              width: 20% !important;
            }

            .user-items-list-carousel__media-inner {
              img {
                border-radius: 50%;
              }
            }
          }

          // Text container
          .list-item-content {

            // Title (testimonial text)
            .list-item-content__title {
              @media @up-to-mobile {
                max-width: 90% !important;
              }
            }

            // Content (testimonial person name)
            .list-item-content__description {
              @media @up-to-mobile {
                max-width: 90% !important;
              }
            }
          }
        }
      }
    }
  }
}

9. “Info cards with borders” sections

To achieve this stylish look of info cards, we adjust via some custom CSS the look and feel of the default Squarespace “List Section“. When you go into page edit more and click to add a new section, Squarespace suggest an array of templated options for you. Although you won’t find something explicitly called a “List Section“ there, many of those templates actually rely on this one base template. For example, “People“ and “Testimonials“ sections both rely on a List Section.

To trigger the above look, add a List Section (select People or Testimonials from the suggested sections), go to Section Settings > Design and make sure you have “Simple List“ layout option selected. Also while inside Section Settings > Deign go to Style and toggle the Card option ON. Finally, make sure the section Color is set to “Lightest 2“ - this design is only applied when the above conditions are met.

Below is the code snippet controlling this design:

// Style for the cards (Section type - Simple List)
// Use a "Testimonials" section template in Squarespace
// Changes font size, color, description top margin
// Only applies to Lightest 2 theme
// Toggled via Section Settings -> Edit Content -> Design -> Style -> Card (toggle ON)
.user-items-list-section {
  &.white-bold {
    .user-items-list-item-container {
      &.user-items-list-simple {
        .list-item[data-is-card-enabled="true"] {
          background: transparent;
          border: solid 1px var(--list-section-simple-card-title-color);

          .list-item-content__description {
            margin-top: .25rem !important;

            p {
              color: var(--list-section-simple-card-title-color);
            }
          }
        }
      }
    }
  }
}

10. Blog navigation style

// Blog
// Header justified categories
.applet-justified-links {
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  text-align: center;
  font-weight: 600;
  font-size: 1.3em;

  @media @up-to-mobile {
    flex-direction: column;
  }

  a {
    margin-left: 10px;
    margin-left: 10px;

    @media @up-to-mobile {
      margin-top: 15px;
    }

  }
}

The snippet above controls how the markdown block containing blog category navigation looks like (see #2 in this documentation for more on category navigation).