Customize & Install CSS (optional)

In this tutorial, I’ll show you how to work with the simple code snippets included in the design. These snippets are optional, but will change some of the design options if you choose not to use them.


FUNCTIONAL CSS SNIPPETS

The following snippets can be copied and pasted AS IS into the Custom CSS area of your Squarespace site. They require no additional customization, and simply provide a few functional features that make your site work better.

  • The “blog spacer” snippet constrains the sides of the content in your blog making for a better reading experience.

  • The “no underline” snippet removes the underline effect from links, making for a cleaner looking site.

  • The “hide top/bottom footer” snippet removes the top and bottom blocks of the footer area, making for a more tightly controlled footer area.

  • The “tablet column stacking” snippet improves the look of the template in tablet view.

Simply copy the code below and paste it into home > design > custom css

/* START BLOG SPACER */
@media only screen and (min-width: 960px) {.BlogItem>.sqs-layout {
margin-left: 20vw;
margin-right: 20vw;}
}
/* END BLOG SPACER */

/* START NO UNDERLINE FOR LINKS */
.sqs-block-content a, .sqs-block-content a:visited {
border: none !important;
}
/* END NO UNDERLINE FOR LINKS */

/* START HIDE TOP/BOTTOM FOOTER BLOCK */
.Footer-blocks--top {display: none !important;}
.Footer-blocks--bottom {display: none !important;}
/* END HIDE TOP/BOTTOM FOOTER BLOCK */

/*START TABLET COLUMN STACKING */
@media screen and (max-width: 1280px) {.sqs-layout [class*=sqs-col] {
float: none !important;
width: auto !important;}
}
/*END TABLET COLUMN STACKING */


DESIGN CSS SNIPPETS

The following snippets can be copied and pasted AS IS into the Custom CSS area of your Squarespace site if you want to maintain the exact look of the template, OR you can tweak them slightly to reflect your brand colors.

To use as is, with the provided template colors, simply copy the code below exactly as is and paste it into home > design > custom css.

To add your own colors, copy the code exactly as is into a text doc, follow the directions below to change the colors, and then copy the tweaked code and paste it into home > design > custom css.

For the “lowlight heading” snippet, simply replace the bolded hex color code with the color of your choice. This will change the highlighted look of the accents on Heading One only. The first bolded number (#ded1cb) will add the pale pink lowlight to Heading One > ITALICS. The second bolded number (#757880) will add the darker gray lowlight to Heading One > BOLD. I recommend using the first option for dark writing with a pale lowlight on a light background, and the second option for white writing with a darker lowlight on a dark/image background.

/* START LOWLIGHT HEADING */
h1 em {
font-weight: 300;
font-style: normal;
text-transform: none;
background: linear-gradient(180deg, rgba(255,255,255,0) 60%, #ded1cb 60%);
display: inline;
}

h1 strong {
font-weight: 300;
text-transform: none;
background: linear-gradient(180deg, rgba(255,255,255,0) 60%, #757880 60%);
display: inline;
}
/* END LOWLIGHT HEADING */

05Kate Densmore