Published Mar 25, 2024

Autocolor Fix

Squarespace just published a significant update to how color variables are handled within the platform, making the custom code used in my templates malfunction. This latest version of the custom code is much more robust, and is remotely update-able by me in case they randomly change again.

Severity

This affects ALL Studio Mesa templates, except a few early copies of Parable and Handshake (see more below) — you probably need to update your site.

Steps

Step 1 → Footer Code Injection

While in the starting Squarespace menu of your site, Press / to search for "Code Injection" — in the site-wide Footer Code Injection (not Header), delete everything pictured here. Depending on your template, this code may not be at the top of the window. Be careful not to delete anything else.

Step 2 → Header Code Injection

Now, in the Header injection (top window), find this bit of code and also delete it completely, ensuring not to accidentally delete anything else. Again, this may be in different locations per template, but generally, look at the bottom of the Header Code Injection window.

Note: If you purchased an early copy of one of my first couple templates, there may not be any Autocolor code in the Header section, so just remove all that you see in the Footer area and continue.

Step 3 → Replace Header Injection

Finally, copy + paste the code below at the bottom of the Header Code Injection, where you just removed the previous code in Step 2. Once you've made all of the changes, hit "save" in the top left, and you're good to go! You don't need to adjust anything else, and your site should return to as it was before the update.

<!--SM AUTOCOLOR V2 | Use Site Styles color palette in CSS-->
<div style="display:none;" data-section-theme="white" class="white"></div>
<div style="display:none;" data-section-theme="white-bold" class="white-bold"></div>
<div style="display:none;" data-section-theme="light" class="light"></div>
<div style="display:none;" data-section-theme="light-bold" class="light-bold"></div>
<div style="display:none;" data-section-theme="bright" class="bright"></div>
<div style="display:none;" data-section-theme="bright-inverse"class="bright-inverse"></div>
<div style="display:none;" data-section-theme="dark" class="dark"></div>
<div style="display:none;" data-section-theme="dark-bold" class="dark-bold"></div>
<div style="display:none;" data-section-theme="black" class="black"></div>
<div style="display:none;" data-section-theme="black-bold" class="black-bold"></div>
<script src="https://cdn.jsdelivr.net/gh/StudioMesa/auto-color@main/autocolor.js"></script> 
<!--END SM AUTOCOLOR V2-->

<!--SM AUTOCOLOR V2 | Use Site Styles color palette in CSS-->
<div style="display:none;" data-section-theme="white" class="white"></div>
<div style="display:none;" data-section-theme="white-bold" class="white-bold"></div>
<div style="display:none;" data-section-theme="light" class="light"></div>
<div style="display:none;" data-section-theme="light-bold" class="light-bold"></div>
<div style="display:none;" data-section-theme="bright" class="bright"></div>
<div style="display:none;" data-section-theme="bright-inverse"class="bright-inverse"></div>
<div style="display:none;" data-section-theme="dark" class="dark"></div>
<div style="display:none;" data-section-theme="dark-bold" class="dark-bold"></div>
<div style="display:none;" data-section-theme="black" class="black"></div>
<div style="display:none;" data-section-theme="black-bold" class="black-bold"></div>
<script src="https://cdn.jsdelivr.net/gh/StudioMesa/auto-color@main/autocolor.js"></script> 
<!--END SM AUTOCOLOR V2-->

<!--SM AUTOCOLOR V2 | Use Site Styles color palette in CSS-->
<div style="display:none;" data-section-theme="white" class="white"></div>
<div style="display:none;" data-section-theme="white-bold" class="white-bold"></div>
<div style="display:none;" data-section-theme="light" class="light"></div>
<div style="display:none;" data-section-theme="light-bold" class="light-bold"></div>
<div style="display:none;" data-section-theme="bright" class="bright"></div>
<div style="display:none;" data-section-theme="bright-inverse"class="bright-inverse"></div>
<div style="display:none;" data-section-theme="dark" class="dark"></div>
<div style="display:none;" data-section-theme="dark-bold" class="dark-bold"></div>
<div style="display:none;" data-section-theme="black" class="black"></div>
<div style="display:none;" data-section-theme="black-bold" class="black-bold"></div>
<script src="https://cdn.jsdelivr.net/gh/StudioMesa/auto-color@main/autocolor.js"></script> 
<!--END SM AUTOCOLOR V2-->

Exception: Early Parable + Handshake

If you bought one of my early copies of Parable or Handshake (thank you for believing in my work!) you probably won't see any of this code or the errors… because I hadn't made the Autocolor plugin yet! Personally, if you're not having trouble with your site and don't mind manually setting variables, I wouldn't change anything and just ignore these instructions. Don't fix what's not broken.

But, if you frequently use the template for multiple client projects, for example, you can add this plugin and make using color variables in CSS easier! Autocolor grabs the color value from the Section Background color of each color theme set in Site Styles and assigns it to a variable like "var(--dark)" or "var(--dark-bold).

If that sounds useful, just add the code above to the Header Injection and delete these variables from the Custom CSS window, as they'll conflict. Leave all other variables, but remove the color-specific ones.

Need some help or have a question?

Send me a message