Site Documentation for the Stamford COOP Team

There are a couple elements of the site that don’t exactly use the standard Squarespace treatments as intended. This page is here to document those elements for future maintenance.

Header Images

The header images on pages are set up differently than standard images on the site. They’re actually empty sections with static background images. This was done in order to make them work properly in a full width layout. Here’s how they can be updated:

Step 1: Navigate to the page you want to edit in the “website” section of squarespace’s editor and click the “edit” button in the upper left to open the page for editing.

Step 2: Hover over the header image with your mouse and a menu will pop up in the top right. Click the “Edit section” button at the top of that menu.

Step 3: The menu will expand to show further options. Click the “Background” tab.

Step 4: From that tab you can either replace the image with one that’s already been uploaded to the site, upload a new image, or edit the image.

Home Page Carousel

The Carousel on the home page has been heavily modified in order to get it to look and function the way that was intended. This was done with code injection and some custom CSS.

Navigating to the mods within squarespace

Step 1: In squarespace, navigate to the “Website” section

Step 2: Scroll down to the bottom and click “Website Tools”

For the custom code

Click “Code Injection,” this will navigate you to a page with a code editor that modifies the content of the header tags on the website.

There is some custom code there that changes the behavior of the default Squarespace carousel, making it advance automatically.

The modification was sourced from here, there are a list of settings in the article: https://www.will-myers.com/articles/auto-scroll-for-carousel-banner-slideshows-for-auto-layout-sections-in-squarespace-71

For the custom CSS

Click “Custom CSS,” this will again take you to a page with a text editor. There are some CSS definitions here that rearrange the content of the default Squarespace carousel. The changes make the images and text display side-by-side instead of vertically, hide the default carousel navigation buttons, and fix some spacing issues.

There are also some additional class definitions to modify the appearance of hyperlinks in text headers, but these aren’t related to the carousel.