Indie Studio 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. Summary block with shifted image borders

  4. Testimonials block

  5. Full-bleed galleries

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 & Figma graphics

3. Summary block with shifted image borders

This template features some additional CSS that creates a white shifted border to images in summary blocks. It is only applied to summary blocks styled as “Wall“ and “Grid“, not to “Carousel“ or “List“. To edit the CSS code, navigate to Design -> Custom CSS from the website admin interface. The complete code snippet for this is listed below for your reference.

// Add shifted borders to summary images
.sqs-block-summary-v2 {
  .summary-block-collection-type-blog-masonry {
    .summary-thumbnail-outer-container {
      a {
        position: relative;

        &:after {
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          border: solid 2px white;
          transform: translate(20px, -20px);
          content: "";          
        }
      }
    }    
  }
}

If you decide to make changes, don’t forget to click Save in the upper-left corner when you are done tweaking and you like the final look.

4. Testimonials block

Custom CSS for the default Squarespace Testimonials block adjusts featured images and tweaks some other sizing aspects (including font sizes). The CSS code in this template targets all Testimonial sections where design type is set as “Carousel“, max columns is set to 1 and image crop to 1:1

5. Full-bleed galleries

Last part of custom CSS which comes with this template tweaks Gallery type sections, which are slideshows and set to full-bleed width. Our code moves image captions to the center of each image and forces that text to appear in the Orpheus Pro font. Plus again adds some sizing tweaks.

Please keep in mind that if you change the default website font family (swap Orpheus Pro which is set as default with this template for some other font) via Design -> Site styles -> Fonts in the website admin, you will need to edit the custom CSS code and adjust font family name there. Don’t worry, our code is heavily commented - look for comments there telling you where to make edits.

Custom CSS code snippet for full-bleed galleries is also listed below for your reference.

// Full-bleed galleries
.gallery-section.full-bleed-section.content-width--wide {
  &.page-section:first-child {
    padding-top: 0 !important;
  }

  .gallery-fullscreen-slideshow {
    &[data-show-captions="true"] {
      &[data-width="full-bleed"] {
        margin-bottom: 0;

        figcaption.gallery-caption-fullscreen-slideshow {
          top: 50%;
          margin-top: 0;
          transform: translateY(-50%);

          .gallery-caption-wrapper {
            display: flex;
            flex-direction: column;
            justify-content: center;

            @media @up-to-mobile {
              margin-left: 20px;
              margin-right: 20px;
            }
          }
        }

        p.gallery-caption-content {
          // Edit line below if you change the defaut website font
          font-family: orpheus-pro !important;
          font-size: 2em !important;
        }
      }
    }
  }
}