Code Snippets

1. The SVG design is one color. This makes it easy to change dynamically. A multi-color SVG could work, but I think you would need to target each element within the SVG using classes, and that's whole other exercise with lots of considerations around site color styles. I created my SVG in Affinity Designer (you can also use Adobe Illustrator); export as an SVG file of course.

2. Open the SVG using a text editor or code editor. Copy the SVG code and paste it into this free encoder: https://yoksel.github.io/url-encoder/

What you want is the 'Ready for CSS' code, which has removed the blank spaces (SVG's are HTML and we need this in a CSS readable format).

3. In Squarespace, hide the existing logo with .header-title-logo img {visibility: hidden;} (as shown in my post example above).

4. Below this, add the the second CSS class action, which includes the data path to the SVG detail. I'll just explain what's going on here:

A) We are targeting the 'a' tag, but just after it loads, so we use '.header-title-logo a:after'

B) We use a mask (I'll explain why shortly) which has two versions targeting different web browser standards, which means we need to access the SVG data twice. Rather than repeating a lot of SVG code in the CSS, we package it as a variable, a bit like a class of its own you can reuse. The variable in the example above started with '@svg: "data:image/svg+xml,...'. Where you see the trailing dots, replace those with your CSS-friendly SVG you created in step 2 (all those weird characters like '%3C%3F' are necessary space fillers to make the date 'flow' together)

C) The width and height, as well as mask-size will vary depending on your logo size; adjust as you need

D) For the dynamic color I have used the pre-defined Squarespace color variable '--navigationLinkColor'

E) Next in the CSS you'll add your mask-image '-webkit-mask-image: url(@svg);' and 'mask-image: url(@svg);' which is calling on the variable @svg created in step 4-B above.

That's it. If your logo is cropped off, adjust it as mentioned in step 4-C.

Sheetrock.js is a JavaScript library for querying, retrieving, and displaying data from Google Sheets. There are two JS links in the Custom Code header to the Sheetrock JS. Plus a script in the Custom Code footer targeting the Google Sheet shown below.

Check out https://chriszarate.github.io/sheetrock/#about for the JS script and documentation. We have implemented this on several Squarespace website and it works perfectly. On the custom CSS we have styled my tables to be responsive, so in doing that removed the sort function from the table for usability, but left in the search.

If you are looking for good responsive tables, check out examples on Codepen (like https://codepen.io/AllThingsSmitty/pen/MyqmdM).

On the custom coded side, we have added a function to Sheetrock.js to change the color of words that match a set criteria (in this example, 'sold' turns red). This approach could be adapted for other styling or functions.  

You could also setup a form on your website to post data to the Google Sheet, then pull it back into your website table.

Recreational has produced some smart applications using this base code, including responsive maps with tooltips drawing data from a Google Sheet.

‍

The example here uses an svg for the logo so that it dynamically changes color to match the section theme color. You can see it working here: https://www.discoveryspecialists.co.nz/Here's custom code injection to place in your header:
‍

Here's the custom CSS:
‍

Using var(--navigationLinkColor) will change the logo color.

I also use an SVG on the main logo too. I'll paste the custom CSS for that below:
‍

To get the text to appear on the right, the trick is to format your selected list text as italics, which is the ‘em’ class. We then ‘re-assign’  the ‘em’ class to display as normal without italics, and float (align) itself to the right providing it is in bold, defined as ‘strong’ in the css. The compromise is that you give up use of italics in your list and all items on the right will be bold. And just for fun we can turn text links into buttons by making a link bold (strong). Add italics to the link and the button will float right.

Custom CSS alters the standard Squarespace List Section to two columns:
‍

Optional: Custom CSS enables buttons in Squarespace List Sections:
‍

In summary:
a) Using italics (em) and bold (strong) together will place that text on the right.
b) Using bold (strong) on a text link will turn it into a button.
c) Add italics (em) to it to place that button on the right.
‍

This add-on to the Will Myres plug in enables a 'like' button to appear on each accordion item. As tehre is no database, the action of linking something is saved locally, i.e. to the users own device using the script below.

After we installed the Will Myres accordion plugin, we added this custom script to Squarespace Web Tools > Code Injection (footer). Note that each item in the accordion needs to be targeted in the code script (as shown below):
‍

CSS: We added this to the Web Tools > Custom CSS with Google Material Icons for the 'heart' icon (\e87e):
‍

HTML: The Will Myres plugin has just one simple div. We have added inside the div a bunch of buttons with class names that reference both the Custom CSS and the Custom Code (script):
‍

In summary:
a) Install the Will Myres accordion.
b) Add custom CSS and code.
c) Store 'like' on the users local device.

Tip: You can also target a specific item in the accordion with it's own link. For example /accordion-demo#like-04
‍