Hustle & Heart 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. CSS code explained - Heading 3 and Tertiary buttons

1. How to get started / Watch the course

Firstly, 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.

I 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

Access CANVA graphics below:

Palette and logo

Shop item

Blog item

3. CSS code explained - Heading 3 and Tertiary buttons

This template relies on the Squarespace 7.1 Fluid Engine functionality (you can read more about the difference between Fluid Engine and the Classic Editor here).

Which is why we are able to deliver amazing visuals and layout with almost no additional CSS code. We did make some adjustments, explained below. Also below you will find the complete custom CSS code for your records. To access our custom code and make changes, navigate to Design > Custom CSS from the website admin interface.

Here we adjust the font weight and line height of all Heading 3 elements : 

// Changing line height of h3
h3 { 
  font-weight: 500;
  line-height: 1.4;
}

The biggest change is done to “Tertiary” buttons - they are made transparent with an underline, on mouse hover that border is animated and the text and underline color changes to black:

#siteWrapper.site-wrapper {
  .sqs-block-button-element {
    &.sqs-button-element--tertiary {
      border-left: none;
      border-top: none;
      border-right: none;
      transition: all .4s ease;

      &:hover,
      &:active {
        padding-bottom: calc(~"0.5em / 2");
        margin-bottom: calc(~"0.5em / 2");
        color: #000;
        border-color: #000;
      }
    }
  }  
}

If you decide to make changes to the custom CSS code, don’t forget to click Save in the upper-left corner to apply your changes.