jpeter

@DomDom282 It looks like your website uses Ajax to load new content in without refreshing the page. Because it's using Ajax to refresh the page, you'll want to wrap your code with window.Squarespace.onInitialize(Y, function() {}) . This will cause the code to re-run on every ajax request.  Added new JS code below that should resolve your issue. 

New JavaScript
window.Squarespace.onInitialize(Y, function() { fetch('https://ipapi.co/json/') .then(response => response.json()) .then(data => { if (data.country_code === 'AU') { window.location.href = 'https://www.louisedemasi.com/my-art-supplies-au'; } }) .catch(err => console.log('Error:', err)); }); Be sure to keep the JS code wrapped in <script> tags like so:
<script> // Add JS code here </script>  

@StudioFine 
Add the following JavaScript code to the Footer using Code Injection. Just update the LINKS array to whatever relative or absolute path(s) you'd like to add the query parameters to. 
This script loop through all of the links on the page and add the query parameters from the URL to the links that are defined in the LINKS variable. 
(function () { const LINKS = [ '/some/relative/path', 'https://www.example.com/donate' ]; // Function to attach query parameters to a list of links function attachQueryParametersToLinks() { const selectors = LINKS.map(link => `a[href="${link}"]`); const links = document.querySelectorAll(selectors.join(',')); const urlSearchParams = new URLSearchParams(window.location.search); // Iterate over the links and update their href attributes links.forEach(link => { const originalHref = link.getAttribute('href'); const linkSearchParams = new URLSearchParams(link.search); const mergedSearchParams = new URLSearchParams([...urlSearchParams, ...linkSearchParams]); link.setAttribute('href', `${originalHref}?${mergedSearchParams.toString()}`); }); } if (document.readyState == 'complete') { attachQueryParametersToLinks() } else { window.addEventListener('DOMContentLoaded', attachQueryParametersToLinks); } })() Be sure to place the javascript between <script> tags e.g.:
<script> // Add JS here </script>  

@maya_m
STEP 1: 
Add the following JavaScript code to the Footer using Code Injection.  This script adds an "active" class on the link that matches whatever filter is defined in the URL. 
(function () { // Get all the links inside the specified container const links = document.querySelectorAll("#block-yui_3_17_2_1_1706047640137_2381 a"); // Loop through each link and check if its path matches the path in the URL links.forEach((link) => { // Add the "active" class if the pathname of in the URL matches if (window.location.pathname === link.pathname) { link.classList.add("active"); } }); })(); Be sure to add the JavaScript code above between <script> tags like so:
<script> // Add JS here </script>  
Step 2:
You can now style the class like so using the following CSS:
/* Style active filter link */ #block-yui_3_17_2_1_1706047640137_2381 .active { color: blue; }  

@sunjo Remove #siteWrapper.site-wrapper from your selector. The new selector should be:
section[data-section-id="65c47f89c55103377481a7fa"] .sqs-button-element--tertiary{ }  

@orkoellis I see that your site uses Google Tag Manager, I'd recommend you use that to handle this by creating a Custom HTML tag for each aap(...)  tracking code and then create a Trigger that will fire the Custom HTML tag based on the click text of the element being clicked. 

@mackenzieu The CSS below should do the trick. You can play with the height CSS property with the 30px value to adjust the amount clipped from the bottom.

CSS
/* Clip wave image from the bottom */ #block-yui_3_17_2_1_1706127503146_48723 img { object-fit: fill !important; object-position: top !important; height: calc(100% + 30px); } /* Make wave image span entire width of page */ #block-yui_3_17_2_1_1706127503146_48723 .fluid-image-container { width: 100% !important; } See article on how to add CSS if you're not sure how. 
Here's a screenshot of it working:

@Celeste_Woodside You'll want to place the JavaScript (JS) code in the Footer using Code Injection. Be sure to place the JS code in between <script> tags like so:
<script> // Add JS code here </script>  

If you're using this template then you can leverage the pointer-events: none css rule set to prevent the element from being clicked. Here's the CSS you would add using the CSS editor based on the templates ID and classes being used:
/* Prevent item from being clicked */ #mainNavigation .folder-toggle { pointer-events: none; }  

@sprucerow You can use the following CSS below. You'll need to update the URL of the background-image property to a transparent version of the brushstroke and then play around with the height property as well. 

CSS
[data-section-id="6566207a3608ec2faeee84dc"] .slideshow-wrapper:after { background-image: url('https://www.onlygfx.com/wp-content/uploads/2019/03/14-white-grunge-brush-stroke-6.png'); height: 60px; content: ''; width: 100%; bottom: 0; left: 0; display: block; z-index: 10; background-size: cover; position: absolute; background-repeat: repeat-x; background-position-y: top; }

@jcny85 
STEP 1: 
Add the following JavaScript code to the Footer using Code Injection.  This script adds an "active" class on the link that matches whatever filter is defined in the query parameter in the URL. 
(function () { // Get all the links inside the specified container const links = document.querySelectorAll("#block-yui_3_17_2_1_1705961330405_3743 a"); // Get the query parameter from the URL const urlSearchParams = new URLSearchParams(window.location.search); const urlTag = urlSearchParams.get("tag"); // Loop through each link and check if its query parameter matches the one in the URL links.forEach((link) => { const linkSearchParams = new URLSearchParams(link.href.split("?")[1] || ""); const linkTag = linkSearchParams.get("tag"); // Add the "active" class if the query parameters match if (linkTag === urlTag) { link.classList.add("active"); } }); })();  
Step 2:
You can now style the class like so using the following CSS:
/* Style active blog filter link */ #block-yui_3_17_2_1_1705961330405_3743 .active { color: blue; }  

@Teifi Looking at Chrome's dev tools, it looks like you have CSS on that page that is hiding the dropdown menu. I would update at CSS to the following:

NEW CSS
/* Change HEADER nav links on DESKTOP so it goes to home page instead of being anchor links on same page */ .header-nav-list > div:nth-of-type(1), .header-nav-list > div:nth-of-type(2), .header-nav-list > div:nth-of-type(3), .header-nav-list > div:nth-of-type(4) { display: none; margin-right: 0; } This will target the <div> tags that are direct children of the .header-nav-list element rather than ALL <div> tags.

Screenshot of code causing the issue:

@JoshA You can use the following CSS below. This adds CSS variables to the blog-item container and then uses them in the category-* classes that is set on each "card". 
CSS
.blog-item { --pamphlet: red; --report: blue; --definition: green; --imagination-lab: pink; --declaration: black; --article: gray; --data-study: tomato; } .category-pamphlet { background-color: var(--pamphlet) !important; } .category-report { background-color: var(--report) !important; } .category-definition { background-color: var(--definition) !important; } .category-imagination-lab { background-color: var(--imagination-lab) !important; } .category-declaration { background-color: var(--declaration) !important; } .category-article { background-color: var(--article) !important; } .category-data-study { background-color: var(--data-study) !important; }
Screenshot
Here's a screenshot of Chrome dev tools open. You'll notice that each card has a class set based on the category in with the following  format, "category-*" .

@lauren-offpaper Did you place the JavaScript code between <script> tags? That may be why you were seeing the code rendering on the page. For example:
<script> // Add JS code here </script>  

@AmoryLujo You can align the buttons with the following CSS below by targeting each button container's ID. It moves them over to the left.
CSS
/* Adjust "Services" buttons to align with heading */ #block-3050c3c6eb259cb341aa, #block-3fa04d9eacb1867459b5, #block-42aa1aeaabdf5011da55 { transform: translateX(15px); } @media (min-width: 768px) { #block-3050c3c6eb259cb341aa, #block-3fa04d9eacb1867459b5, #block-42aa1aeaabdf5011da55 { transform: translateX(-28px); } }

@Vic_O @DanFar
You can add an aria-label attribute on the <a> tag for each social media link by adding the following JavaScript to the Footer using Code Injection:
(function(){ // Add aria-label to Instagram link document.querySelectorAll('.instagram-unauth') .forEach(el => el.setAttribute('aria-label', 'Instagram')); // Add aria-label to Facebook link document.querySelectorAll('.facebook-unauth') .forEach(el => el.setAttribute('aria-label', 'Facebook')); // Add aria-label to Twitter link document.querySelectorAll('.twitter-unauth') .forEach(el => el.setAttribute('aria-label', 'Twitter')); // Add aria-label to LinkedIn link document.querySelectorAll('.linkedin-unauth') .forEach(el => el.setAttribute('aria-label', 'LinkedIn')); })()  
Be sure to add the JS between <script> tags, e.g.
<script> // Add JS here </script>  

@PartTwoDesign You can use the following CSS that adds height of 100% to some of the containers and then overrides the object-fit property from contain to cover
#block-yui_3_17_2_1_1705927316935_8707.video-block > .sqs-block-content, #block-yui_3_17_2_1_1705927316935_8707.video-block .intrinsic, #block-yui_3_17_2_1_1705927316935_8707.video-block .embed-block-wrapper, #block-yui_3_17_2_1_1705927316935_8707.video-block .sqs-native-video { height: 100%; } #block-yui_3_17_2_1_1705927316935_8707.video-block .video-player { padding: 0; } #block-yui_3_17_2_1_1705927316935_8707.video-block video { object-fit: cover; } Working example:
tUYEFEvAnU.mp4    

@tuku You can use the following CSS:
/* Setup the parent to allow button to be centered */ .user-items-list-simple .list-item { position: relative; } /* Add transparent background of black to parent item */ .user-items-list-simple .list-item::before { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: block; background-color: rgba(0,0,0,.2); z-index: 1; transition: all .2s; } /* Darken the background when a user hovers over the link or uses the keyboard to focus in on the link */ .user-items-list-simple .list-item:has(.list-item-content__button:hover):before, .user-items-list-simple .list-item:has(.list-item-content__button:focus-visible):before { background-color: rgba(0,0,0,.6); } /* Center the button in the list-item */ .user-items-list-simple .list-item-content__button-wrapper { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } /* Bring the content layer on top of the transparent background image */ .user-items-list-simple .list-item-content { z-index: 1; } Here's an example of the above CSS working:
kpZnrYORJU.mp4    

@jcny85 The following CSS should do the trick:
 
/* Update Audio widget's Light version's background color on hover */ .sqs-widgets-audio-player.light { transition: background-color .3s; } .sqs-widgets-audio-player.light:hover, .sqs-widgets-audio-player .action:hover { background-color: red; }
Just change the background-color to whatever color you need.

@sian75 Adding the following CSS should do the trick:
.blog-masonry .blog-image-wrapper, .blog-masonry .blog-meta-section { margin-bottom: 0; }

@Mataway The JavaScript below should fix the issue. Looks like there's multiple social media elements on the page with the same class and using document.querySelector will only target the first instance. The JS below uses document.querySelectorAll to updates all instances. 

JavaScript
window.Squarespace.onInitialize(Y, function () { document.querySelectorAll(".facebook") .forEach(el => el.setAttribute("aria-label", "Open Proposition Chicken Facebook page (in a new window)")); document.querySelectorAll(".instagram-unauth") .forEach(el => el.setAttribute("aria-label", "Open Proposition Chicken Instagram (in a new window)")); }); OR 
If you don't want to change all instances, you can update the specificity of each selector you're passing to the querySelector method by adding .socialaccountlinks-v2-block as a parent like so:
window.Squarespace.onInitialize(Y, function () { document.querySelector(".socialaccountlinks-v2-block .facebook") .setAttribute("aria-label", "Open Proposition Chicken Facebook page (in a new window)"); document.querySelector(".socialaccountlinks-v2-block .instagram-unauth") .setAttribute("aria-label", "Open Proposition Chicken Instagram(In a new window)"); });  

The JavaScript below should work. It swaps the URL and Title.
JavaScript
(function(){ // Get previous element url and title const prevEl = document.querySelector('.item-pagination-link--prev'); const prevUrl = prevEl && prevEl.getAttribute('href'); const prevTitleEl = prevEl && prevEl.querySelector('.item-pagination-title'); const prevTitle = prevTitleEl && prevTitleEl.textContent; const prevTitleWrapper = prevEl && prevEl.querySelector('.pagination-title-wrapper'); const prevIcon = prevEl && prevEl.querySelector('.icon'); // Get next element url and title const nextEl = document.querySelector('.item-pagination-link--next'); const nextUrl = nextEl && nextEl.getAttribute('href'); const nextTitleEl = nextEl && nextEl.querySelector('.item-pagination-title'); const nextTitle = nextTitleEl && nextTitleEl.textContent; const nextTitleWrapper = nextEl && nextEl.querySelector('.pagination-title-wrapper'); const nextIcon = nextEl && nextEl.querySelector('.icon'); // Handle when user is on first page if(!prevEl && nextEl && nextTitleWrapper) { const tpl = document.createElement('template'); tpl.innerHTML = `<div class="item-pagination-icon icon icon--stroke"><svg class="caret-left-icon--small" viewBox="0 0 9 16"><polyline fill="none" stroke-miterlimit="10" points="7.3,14.7 2.5,8 7.3,1.2"></polyline></svg></div>`; nextTitleWrapper.innerHTML = nextTitleWrapper.innerHTML.replace(/\bNext\b/g, 'Previous'); nextEl.classList.add('item-pagination-link--prev'); nextEl.classList.remove('item-pagination-link--next'); nextIcon && nextEl.removeChild(nextIcon); nextIcon && nextEl.prepend(tpl.content) } // Handle when user is on last page if(prevEl && !nextEl && prevTitleWrapper) { const tpl = document.createElement('template'); tpl.innerHTML = `<div class="item-pagination-icon icon icon--stroke"><svg class="caret-right-icon--small" viewBox="0 0 9 16"><polyline fill="none" stroke-miterlimit="10" points="1.6,1.2 6.5,7.9 1.6,14.7"></polyline></svg></div>`; prevTitleWrapper.innerHTML = prevTitleWrapper.innerHTML.replace(/\bPrevious\b/g, 'Next'); prevEl.classList.add('item-pagination-link--next'); prevEl.classList.remove('item-pagination-link--prev'); prevIcon && prevEl.removeChild(prevIcon); prevIcon && prevEl.appendChild(tpl.content) } // Set next element title and url with the previous if(nextEl && nextTitleEl && prevUrl && prevTitle) { nextEl.setAttribute('href', prevUrl); nextTitleEl.textContent = prevTitle; } // Set previous element title and url with the next if(prevEl && prevTitleEl && nextUrl && nextTitle) { prevEl.setAttribute('href', nextUrl); prevTitleEl.textContent = nextTitle; } })()  
Make sure you add the JavaScript to the Footer using Code Injection and place it between <script> tags, e.g.
<script> // Add JS here </script>
Here's a video of me updating the JS via Chrome's dev tools to ensure it works. 

9xlp5mzmcK.mp4  

The following CSS should do the trick:
.summary-item.sqs-gallery-design-carousel-slide .summary-content { margin-top: 0; display: flex; align-items: center; justify-content: center; } .summary-item.sqs-gallery-design-carousel-slide .summary-thumbnail-container { margin-bottom: 0; } .summary-item.sqs-gallery-design-carousel-slide .summary-title a { padding-top: 0; }

@BartelsCreativeCo Here's updated code to also include the aria-required attribute to each of of the input fields:
(function(){ setTimeout(() => { document.querySelector('[name="fname"]').setAttribute('aria-label', 'First Name'); document.querySelector('[name="fname"]').setAttribute('aria-required', 'true'); document.querySelector('[name="lname"]').setAttribute('aria-label', 'Last Name'); document.querySelector('[name="lname"]').setAttribute('aria-required', 'true'); document.querySelector('[name="email"]').setAttribute('aria-label', 'Email Address'); document.querySelector('[name="email"]').setAttribute('aria-required', 'true'); }, 500); })()  

@mbockmaster Wrote new code that takes a different approach. It uses method chaining and uses some descriptive methods with the following pattern:

In the example code below, you'll instantiate a new ToggleFields() class. Then run the id() method by passing in the value of the "id" or "name" attribute of the parent field. Then run the hasValues() method by passing in an array of values that are expected to trigger the dependency field to show. Then the last method to run is the thenShow() method which is an array of id's take from the "id" attribute of the fields that are needing to be hidden or shown. 
JavaScript
(function () { const DELAY = 500; // Delays code execution so other scripts can run const SLIDE_UP_SPEED = 0; // Speed in milleseconds const SLIDE_DOWN_SPEED = 200; // Speed in milleseconds setTimeout(() => { const field = new ToggleFields(); field .id('select-7e5087e2-19de-427f-9bab-9ed57e548c5d-field') .hasValues([ 'Registered massage therapy', ]) .thenShow([ 'select-f65e7041-7c99-4cb3-b089-e9363ba0b0bb' ]); field .id('select-7e5087e2-19de-427f-9bab-9ed57e548c5d-field') .hasValues([ 'Face', ]) .thenShow([ 'checkbox-897fc44a-47cc-4187-a9a3-2c07eac942cd' ]); field .id('select-7e5087e2-19de-427f-9bab-9ed57e548c5d-field') .hasValues([ 'Body', ]) .thenShow([ 'checkbox-d05a8b96-5202-43d7-9c62-bbf68ee166f4' ]); field .id('select-7e5087e2-19de-427f-9bab-9ed57e548c5d-field') .hasValues([ 'Nails', ]) .thenShow([ 'checkbox-9b633fdd-ed93-4173-9e68-0219fc67502f' ]); field .id('select-84584693-059c-4a6b-82f4-002531232b32-field') .hasValues([ 'Registered massage therapy', ]) .thenShow([ 'select-cb6f6cab-fb33-498c-b4e5-8c025e64982b' ]); field .id('select-84584693-059c-4a6b-82f4-002531232b32-field') .hasValues([ 'Face', ]) .thenShow([ 'select-92778fbb-eb9b-45a9-bf16-ae2d9b531611' ]); }, DELAY); /********************************************************************* * DO NOT ALTER BELOW THIS LINE UNLESS YOU KNOW WHAT YOU'RE DOING *********************************************************************/ class ToggleFields { constructor() { this.parentEl = null; this.parents = {}; this.dependenciesFields = []; this.values = []; this.showFields = []; this.valueMapping = null; } id(id) { if (typeof id == 'string') { // Get the parent element const parentFieldId = document.querySelector('[id="' + id + '"]'); const parentFieldName = document.querySelector('[name="' + id + '"]'); let parent; if (parentFieldId) { this.parentEl = parentFieldId; } if (parentFieldName) { this.parentEl = parentFieldName } this.parentEl.valueMap = this.parentEl.valueMap || {}; this.parents[this.parentEl.id || this.parentEl.name] = this.parentEl; if(!this.parentEl) { return this; } } return this; } hasValues(values) { if (!Array.isArray(values)) { return this; } this.values = values; if(this.parentEl) { values.forEach(value => { this.parentEl.valueMap[value] = this.parentEl.valueMap[value] || { fields: [], hidden: true }; }) } return this; } thenShow(fields) { if (!Array.isArray(fields)) { return this; } if(this.parentEl) { fields.forEach(field => { this.values.forEach(key => { this.parentEl.valueMap[key].fields.push(`#${field}`); }); }); } const fieldIds = fields.map(field => '#' + field); $(fieldIds.join(',')).hide(); this.onLoad(() => { // Load jQuery if not loaded if (!window.jQuery) { return this.loadJquery(this.thenShow(fields)) } this.showFields = fields; // Assign jQuery to a variable const $ = jQuery; Object.keys(this.parents).forEach(id => { const parentEl = this.parents[id]; if (!parentEl || parentEl.toggleFieldInit) { return; } parentEl.toggleFieldInit = true; // Show or hide the dependent field based on the PARENT_VALUE $(parentEl).on('change', (evt) => { const value = evt.target.value; Object.keys(parentEl.valueMap).forEach(key => { if(parentEl.valueMap[key].hidden == false) { $(parentEl.valueMap[key].fields.join(',')).slideUp(SLIDE_UP_SPEED); parentEl.valueMap[key].hidden = true; } }) if(parentEl.valueMap[value]) { $(parentEl.valueMap[value].fields.join(',')).slideDown(SLIDE_DOWN_SPEED); parentEl.valueMap[value].hidden = false; } }); }); }) return this; } loadJquery() { var s = document.createElement('script'); s.src = 'https://code.jquery.com/jquery-3.6.0.min.js'; s.onload = this.thenShow(this.fields); document.body.appendChild(s); } onLoad(callback) { // Initialize after the page has been loaded if (document.readyState === 'complete') { setTimeout(callback, DELAY) } else { document.addEventListener("DOMContentLoaded", function () { setTimeout(callback, DELAY); }, false); } } } })();
7Vz7ShBQiQ.mp4  

The reason you're seeing the black box is because the form fields are breaking outside of their container due to this CSS selector in your custom CSS:
.newsletter-block .newsletter-form-fields-wrapper { display: inline-flex; } You probably can delete that CSS selector and that will prevent the form fields from breaking out of their container.