Lesum

Hi @mavencreative, To make anchor links bold upon click or selection, add this code under Website > Pages > Website Tools > Code Injection > Header.
<script> document.addEventListener("DOMContentLoaded", () => { const container = document.getElementById("block-yui_3_17_2_1_1727218004037_6070"); if (container) { const links = container.querySelectorAll("p a"); links.forEach(link => { link.addEventListener("click", () => { links.forEach(l => l.classList.remove("active")); link.classList.add("active"); }); }); } }); </script> <style> #block-yui_3_17_2_1_1727218004037_6070 a.active { font-weight: bold; } </style>  

@KimDC Hi! You can try adjusting the site animation settings under Site Styles > Miscellaneous > Animations. If the issue persists, you can add this code under Website > Pages > Website Tools > Custom CSS.
h2.blog-title.preFlex { opacity: 1 !important; transition: transform 0.1s !important; }  

Hi @TylerJames4, If you want to hide TikTok and Pinterest across the entire site, including both the header and footer, you can add this code under Website > Pages > Website Tools > Custom CSS.
@media screen and (min-width: 1025px) { a[aria-label="Pinterest"], a[aria-label="TikTok"] { display: none; } } If you only want to hide TikTok and Pinterest from the header navigation bar, you can add this code instead.
@media screen and (min-width: 1025px) { #header a[aria-label="Pinterest"], #header a[aria-label="TikTok"] { display: none; } }

Hi @bluethebear, You can add this code under Website > Pages > Website Tools > Custom CSS to change the header color, logo, and section background color on the product page you mentioned. For other product pages, simply copy and paste this block of code and replace the page ID with the corresponding product page's ID.
#item-66aa9ac6ddc7683266f87a82 { #header .header-announcement-bar-wrapper .header-background-solid { background-color: #c5ffb6 !important; } .header-title-logo img { content: url('https://images.squarespace-cdn.com/content/65099cf8baecb06e881ee700/e3062e60-1d6d-499a-89bf-5c0b3da1f221/BluePrint+Football.png?content-type=image%2Fpng') !important; max-height: 71px !important; } #page .page-section .section-background { background-color: #e7ffe7 !important; } }  

@NishInwood Hi! You can add this code under Website > Pages > Website Tools > Custom CSS
.products.collection-content-wrapper .grid-meta-status { font-size: 0 !important; padding-top: 5px; } .products.collection-content-wrapper .grid-meta-status .product-mark.sale::after { font-size: 1.1rem !important; line-height: 1em; } @media screen and (max-width: 767px) { .products.collection-content-wrapper .grid-meta-status .product-mark.sale::after { font-size: 1rem !important; } }  

@CdVstudio Hi! You can add this code under Website > Pages > Website Tools > Custom CSS
@media screen and (min-width: 1025px) { #gridThumbs { display: flex !important; flex-wrap: wrap; gap: 40px; } .grid-item { flex: 0 0 100%; } .grid-item:nth-child(2), .grid-item:nth-child(3) { flex: 0 0 calc(50% - 40px); } .grid-item:nth-child(4), .grid-item:nth-child(5), .grid-item:nth-child(6) { flex: 0 0 calc(33.333% - 40px); } }  

@eightyfourandahalf Here’s the code to remove 'all works' from all pages while keeping the rest of the breadcrumb. You can add this code under Website > Pages > Website Tools > Code Injection > Header. I tested the code thoroughly while writing it, but if you encounter any issues or make any changes, let me know.
<script> function applyScriptForLargeScreens() { const breadcrumbContainer = document.querySelector('.products.collection-content-wrapper.products-list .nested-category-breadcrumb'); if (window.innerWidth > 575) { const firstLink = document.querySelector('.nested-category-breadcrumb .nested-category-breadcrumb-link[href="/all-works"]'); if (firstLink) { const spanToRemove = firstLink.nextElementSibling; firstLink.remove(); if (spanToRemove && spanToRemove.tagName === 'SPAN') { spanToRemove.remove(); } } var categoryTitle = document.querySelector('.nested-category-title').textContent.trim(); var categoryLink = document.createElement('a'); if (window.location.pathname.includes('/all-works/artists/')) { categoryLink.href = '/all-works/artists/' + categoryTitle.toLowerCase().replace(/\s+/g, '-'); } else { categoryLink.href = '/all-works/' + categoryTitle.toLowerCase().replace(/\s+/g, '-'); } categoryLink.className = 'nested-category-breadcrumb-link'; categoryLink.textContent = categoryTitle; if (breadcrumbContainer) { breadcrumbContainer.appendChild(categoryLink); } } } document.addEventListener('DOMContentLoaded', applyScriptForLargeScreens); window.addEventListener('resize', applyScriptForLargeScreens); </script> <style> @media screen and (min-width: 576px) { .tweak-products-header-text-alignment-left .products.collection-content-wrapper .nested-category-title { display: none !important; } .products.collection-content-wrapper .nested-category-breadcrumb{ border-bottom: 1px solid; padding-bottom: 10px; margin-bottom: 20px; } .products.collection-content-wrapper .nested-category-breadcrumb a { font-size: 24px; } } </style>  

@ohhhgary Hi! You can add this code under Website > Pages > Website Tools > Code Injection > Header. You've to replace the image URL in the code as well.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script> $(document).ready(function () { const $secondNavAnchor = $('.main-nav ul li:nth-child(2) a'); // Add image url here const imageUrl = "https://images.squarespace-cdn.com/content/v1/5db7ce0cbe792566a205ef14/1572460848759-GPQTEQ966PD9GQ5V2ZV0/Screen%2BShot%2B2019-10-30%2Bat%2B11.39.56%2BAM.jpg?format=750w"; $secondNavAnchor.empty().append(`<img src="${imageUrl}" alt="Navigation Image">`); }); </script> <style> .main-nav ul li:nth-child(2) a img { width: 100px; height: auto; } </style>

@Hanara Hi! To make the list items clickable, you can add this code under Website > Pages > Website Tools > Code Injection > Header.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script> $(document).ready(function () { $('.user-items-list-item-container .list-item').each(function () { const button = $(this).find('.list-item-content__button'); const link = button.attr('href'); if (link) { $(this).css('cursor', 'pointer').on('click', function () { window.location.href = link; }); } }); }); </script> Note: This code will only work if the buttons inside the list items already have URLs linked to them.

@brosyhale Hi! You can try adding the following code to update the font for: Blog categories, form fields, buttons and cookie banner.
/* Blog categories */ .blog-item-category-wrapper a { font-family: 'AzeretMono-Light' !important; } /* Buttons */ #siteWrapper.site-wrapper .sqs-button-element--primary, #siteWrapper.site-wrapper .sqs-button-element--secondary, #siteWrapper.site-wrapper .sqs-button-element--tertiary { font-family: 'AzeretMono-Light' !important; } /* Cookie banner */ .gdpr-cookie-banner * { font-family: 'AlteHaasGroteskRegular' !important; } /* Form */ .sqs-block-form .field-list .title { font-family: 'AlteHaasGroteskRegular' !important; } .sqs-block-form .field-list .caption-text { font-family: 'AlteHaasGroteskRegular' !important; } .sqs-block-form .field-list .description { font-family: 'AlteHaasGroteskRegular' !important; } .sqs-block-form .field-list input, .sqs-block-form .field-list input::placeholder, .sqs-block-form .field-list textarea, .sqs-block-form .field-list textarea::placeholder, .sqs-block-form .form-item select, .sqs-block-form .form-item select option, .sqs-block-form .field-list .option { font-family: 'AlteHaasGroteskRegular' !important; }  

Hi @veggielicious_wolfgang, To display portfolio items in two columns on mobile, add the following code under Website > Pages > Website Tools > Custom CSS.
@media screen and (max-width: 767px) { #gridThumbs { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }  

@compatiblewithlove Hi! To add a border or box around the 'Donate' tab, add this code in Website > Pages > Website Tools > Custom CSS.
#header a[href="/donate"] { border: 1px solid; border-radius: 0.4em; padding: 0.2em 0.6em; }  

@Robwan Hi! You can add this code under Website > Pages > Website Tools > Custom CSS to display 4 columns in the final row of your portfolio grid.
@media screen and (min-width: 768px) { #gridThumbs { display: flex !important; flex-wrap: wrap; gap: 10px; } #gridThumbs .grid-item { flex-basis: ~'calc(100% / 3 - 10px)'; padding-bottom: 0 !important; height: 100%; } #gridThumbs > :nth-last-child(4), #gridThumbs > :nth-last-child(3), #gridThumbs > :nth-last-child(2), #gridThumbs > :last-child { flex-basis: ~'calc(100% / 4 - 10px)'; } }  

@Nardi22 Hi! You can add this code under Website > Pages > Website Tools > Custom CSS to address the social sharing icon issues. 
.share-container svg { width: 24px; height: 24px; fill: #081439; } .share-container #copy-link-button .btn { padding: 0 !important; } .share-container { display: flex; gap: 16px; margin-bottom: 25px; }  

Hi @lancewilson You can add this code under Website > Pages > Website Tools > Custom CSS
.tweak-portfolio-grid-overlay-text-placement-bottom-left .portfolio-grid-overlay .portfolio-text { text-align: center !important; }  

Hi @SunroofDigital You can add this code under Website > Pages > Website Tools > Custom CSS to address the issues you mentioned:
.ProductItem .ProductItem-details h1.ProductItem-details-title { font-family: 'tannimbus' !important; } .product-details .ProductItem-details-excerpt-below-add-to-cart, .ProductItem-details .ProductItem-details-excerpt-below-price { letter-spacing: 0.5px !important; } .ProductItem .ProductItem-details .variant-option .variant-option-title { color: #007950; font-weight: bold; } .ProductItem .ProductItem-details .variant-option option { color: #007950 !important; } .ProductItem .ProductItem-details .variant-option .variant-select-wrapper::before { color: #007950; } .ProductItem .ProductItem-details .variant-option .variant-select-wrapper::after { border-color: #007950; }  

Hi @LaurenRoseDesign To center align the form button on mobile, you can add this code under Website > Pages > Website Tools > Custom CSS
@media screen and (max-width: 767px) { .form-wrapper .form-button-wrapper--align-left { text-align: center !important; } }  

@mikegriff3 Hi! It looks like there’s some custom code affecting the mobile menu. You can add this code under Website > Pages > Website Tools > Custom CSS to fix the issues:
@media screen and (max-width: 1024px) { #header .header-title-logo { text-align: left; } #header div { flex: 1 0 auto; text-align: left; } #header .header-menu-nav-wrapper { display: flex; flex-direction: column; justify-content: center; align-items: center; } #header .header-menu-nav-item a { margin-left: 2vw; margin-right: 2vw; } #header .header-menu-nav-folder { min-height: unset; height: 100%; } #header .header-menu-nav-item { flex: unset !important; } }  

@Nardi22 Hi! It looks like there's custom code related to font styling in your template that's overriding your CSS. Try adding this code under Website > Pages > Website Tools > Custom CSS.
#siteWrapper h3 * { font-family: 'industry' !important; }

Hi @Lelle56 You can add this code under Website > Pages > Website Tools > Custom CSS
.gallery-lightbox-item img { box-sizing: border-box; border: 1px solid #0234e9; border-radius: 20px; width: unset !important; left: 50%; top: 50%; transform: translate(-50%, -50%); }

@afnbroadcaster Hi! Based on the screenshot you shared, remove everything from lines 14 to 22. Then add this code under Custom CSS:
h1.blog-title { font-family: 'Salted+Monthoers' !important; }  

Hi @Shay0131 You can add this code in Website > Pages > Website Tools > Custom CSS.
#cart .system-page { background: #F7F0E4 !important; }  

@objectsinmirror Hi! You can add this code to address the product price font issue on the main shop page.
.products.collection-content-wrapper .grid-main-meta .grid-prices .product-price { font-weight: 400 !important; }  

@ELH-ER Hi! Add this code under Website > Pages > Website Tools > Custom CSS, in addition to the previous code.
@media screen and (min-width: 1340px) { .form-wrapper .react-form-contents .field-list { display: flex; flex-wrap: wrap; } .form-wrapper .react-form-contents .field-list { .fields.name, .field.email, .field.textarea { width: 100% } } .form-wrapper .react-form-contents .field-list .fields.name { column-gap: 0 !important; } .form-wrapper .react-form-contents .field-list .fields.name .first-name { width: 49% !important; margin-right: 2% !important; } .form-wrapper .react-form-contents .field-list .fields.name .last-name { width: 49% !important; } .form-wrapper .react-form-contents .field-list .field.date:nth-child(3) { width: 49%; margin-right: 2% !important; } .form-wrapper .react-form-contents .field-list .field.date:nth-child(4) { width: 49%; } }  

@Lelle56 Hi! You can add this code under Website > Pages > Website Tools > Custom CSS
#gridThumbs .grid-item .portfolio-text { order: 1 !important; } #gridThumbs .grid-item .grid-image { order: 2 !important; }