jpeter

@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>

@lauren-offpaper The issue is the JavaScript code that you have running that superscripts the registration mark is removing the JavaScript events attached to the accordion. Replace the JavaScript that superscripts the registration mark with the new JS below: New JavaScript /* superscripting all ® which aren't already */ window.addEventListener("DOMContentLoaded", function () { document.querySelectorAll("p, a, h1, h2, h3, h4, h5, h6, label").forEach(function (el) { const isAccordionItem = el.closest('.accordion-item__title-wrapper') !== null; const accordionTitleEl = isAccordionItem && el.querySelector('.accordion-item__title'); if (accordionTitleEl) { accordionTitleEl.innerHTML = accordionTitleEl.innerHTML.replace(/®(?!\<\/sup)/g, "^®"); } else { el.innerHTML = el.innerHTML.replace(/®(?!\<\/sup)/g, "^®"); } }) }); Screenshot of the old/current JS:

@AmoryLujo Updated the code in my original comment. Hopefully that works. You may want to play around with the translateX value(s). Here's what it looks like on my end:

@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); } }

@PartTwoDesign It looks like you may have been trying to divide the sections using, -----------------------, but the appears to be breaking the CSS. If you want to divide the section of CSS, use a CSS comment insead by adding an opening /* and closing */ like so: /* ---------------------- */ Here's a video deleting the divider using Chrome dev tools and that fixes the issue: Z0JBfc7ADh.mp4

@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>

@markduncan The following CSS should resolve the issue: #footer-sections .video-block { max-width: 150px; margin: 0 auto; }

@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

@Celeste_Woodside You can use add the following CSS to update the spacing: .eventlist-description { margin-bottom: 17px; } You can use the following JavaScript to update the title: // Update Event list button from "View Event" to "Session Info" document.querySelectorAll('.eventlist-button').forEach(button => button.textContent = 'Session Info');

@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.

@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

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

@DanFar for your case, I would use following code to target each individual link leveraging the a[href^="<URL>"] CSS attribute selector as the string in the querySelectorAll method: (function(){ // Add aria-label to Instagram story link document.querySelectorAll('a[href^="https://www.instagram.com/p/D3VfSds/"]') .forEach(el => el.setAttribute('aria-label', 'My Story')); // Add aria-label to Instagram story link document.querySelectorAll('a[href^="https://www.instagram.com/p/TEST124/"]') .forEach(el => el.setAttribute('aria-label', 'My Story 2')); })()

@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>

@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)"); });

@tors Updated the code above to account for the first and last books in the series.

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; }

@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.

@cludgate Looks like the target attribute on the <a> tag is using smart quotes(”) to wrap the _blank value. Try using regular quotes, e.g.: <a href="https://lodgeatbowlake.com/s/TheLodgeAtBowLake-Winter-Activity-Release-Waiver.pdf" target="_blank">click here</a>

@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); })()

@BartelsCreativeCo The following JS should do the trick: JavaScript (function(){ setTimeout(() => { document.querySelector('[name="fname"]').setAttribute('aria-label', 'First Name'); document.querySelector('[name="lname"]').setAttribute('aria-label', 'Last Name'); document.querySelector('[name="email"]').setAttribute('aria-label', 'Email Address'); }, 500); })() Make sure you add it in the Footer section and in between <script> tags like so: <script> // Add JS here </script>

@mbockmaster Updated the code in this comment that should resolve the issue.

@mbockmaster I've updated the code in this comment and added two new variables, SLIDE_UP_SPEED and SLIDE_DOWN_SPEED. I've set the SLIDE_UP_SPEED to 0 so the fields hide immediately allowing for the new field to slide in normally.

@mbockmaster Updated the JS code here to account for the DELAY variable. The reason it wasn't working is due to our code running too soon and so we needed to allow time for the form's code to run first before running our custom code.