Custom CSS
CSS (Cascading Style Sheets), is the code used to create custom styling and layout on your website. Each of our templates include a minimal amount of custom CSS to achieve a specific look that otherwise wouldn’t be possible with the standard features of Squarespace. Although custom CSS has been added to this template, fear not! The CSS code has been written so that you do not need to modify it to edit any of the styles on your site. If you change a color in your palette, the CSS is written to change accordingly. If you are familiar with CSS (or are learning) and would like to make changes to the code, basic instructions are below.
How to Use the CSS Editor
To edit the Custom CSS, go to your Pages menu, scroll down to Utilities, and click Website Tools. Then, click Custom CSS under Custom Code.
Once in the Custom CSS panel, you will notice 100–200 lines of CSS code that we have added to the template. We have written the CSS using a consistent structure of:
*/ === HEADER STYLING ===*/ – This refers to a broader area on the site and all CSS underneath that note refers to that area.
//Nav Item Hover Color – This is to note the specific item affected by that code.
CSS code snippet – The actual CSS code comes after the two structural notes listed above.
We recommend that you copy and paste the existing template CSS into a Word document before making any changes so that you can always revert to the original code, if needed.
