Square_Ace

Glad I could help. Could you mark my answer as the solution please and thank you

Hi, I'd have to remind myself to be 100% sure but I don't think you can't change the color of an SVG if it's a background image, possibly because the SVG file is not actually in the same document (it references a file hosted on assets.squarespace.com).
Using a background image you'd need to replace the background image entirely depending on other CSS such as the theme of the header or the page you're on. You need to use an actual SVG element on the page if you want to dynamically control it's CSS. This is how:
Go to your site-wide Code Injection and add this to your header code injection:
<script> var logoSvg = '<svg class="logo" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" fill="currentColor"/><text x="50%" y="55%" text-anchor="middle" font-size="30" fill="white" dy=".3em">A</text></svg>'; </script> That's just an example SVG so replace with your own SVG code and make sure there are no gaps or line breaks between tags. Make sure your SVG logo and image logo (the image you upload as your logo in Squarespace) are the same size or at least same aspect ratio. SVG code can be tricky if you don't know what you're doing. Using a tool like https://svgomg.net/ can help.
In the footer code injection paste this:
<script> document.querySelector('.header-display-desktop .header-title-logo a').innerHTML += logoSvg; document.querySelector('.header-display-mobile .header-title-logo a').innerHTML += logoSvg; </script> In your custom CSS paste this:
.header-title-logo a { position: relative; img:not(:only-child) { opacity: 0; visibility: hidden; } svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } Then you should be able to use your custom colors like you had:
.header-title-logo a:hover { color: #A2A8FF !important; } Or, if you remove the fill="currentColor" from the SVG, you can just adapt the SVG fill with CSS directly, for example:
.header-title-logo a { svg { fill: black; } &:hover svg { fill: pink; } } I hope that helps :)

Hi try adding this custom CSS:
.grid-image-wrapper.has-hover-img img { &:first-child { opacity: 1 !important } &:not(:first-child) { display: none !important; } } I hope that helps.
Andrew

Hi, use this custom CSS:
.ProductItem-details .product-variants:not([data-variant-in-stock="true"]) { .c-swatches__button.is-active { background: pink !important; color: white !important } .variant-out-of-stock { font-size: 0.6em; margin: 0 0 25px; } } Play with the values as you like. I hope that helps :)

Hi, if this is the only pop-up you have then I think you can use this custom CSS:
@media screen and (min-width: 640px) { .yui-popup-container-node { display: none; } } Adjust the min-width value as you wish depending on what your preferred minimum width is.
I hope that helps :)

Hi, I'll try to help with point 1 and maybe someone else can help with the rest as there's quite a lot here you want help with.
I'm winging this (writing it direct to the forum) so I apologise if it doesn't work.
Add the following to your Code Injection footer:
<script> document.addEventListener('DOMContentLoaded', additionalProductContentMove) function additionalProductContentMove(){ const bodyClasses = document.body.classList, additionalContent = document.querySelector('.ProductItem-additional'); if(!bodyClasses.contains('collection-type-products') || !bodyClasses.contains('view-item') || !additionalContent) return; const excerptPosition = bodyClasses.contains('tweak-product-basic-item-description-position-below-price') ? 'ProductItem-details-excerpt-below-price' : bodyClasses.contains('tweak-product-basic-item-description-position-below-add-to-cart-button') ? 'ProductItem-details-excerpt-below-add-to-cart' : bodyClasses.contains('tweak-product-basic-item-description-position-below-add-ons') ? 'ProductItem-details-excerpt-below-add-ons' : 'ProductItem-details-excerpt'; document.querySelector(`.${excerptPosition}`).appendChild(additionalContent) } </script> And you'll probably want to reduce the gap, so add this to your custom CSS:
.ProductItem .ProductItem-additional { margin-top: 20px } Use whatever margin value you like.
I hope that helps :)

Sorry, it was the comma I added in my code, try this:
#block-yui_3_17_2_1_1730114850294_8800 .accordion-item__description { @media screen and (min-width: 768px) { display: grid; grid-template-columns: ~'40% 1fr'; grid-template-rows: ~'repeat(6, auto)'; column-gap: 20px; } &:before { content: ""; display: block; background-image: url(https://static1.squarespace.com/static/615c38d…/t/671f851…/1730118943289/leannes-co-process-detective-work.jpg); background-size: contain; background-repeat: no-repeat; height: 0; padding-bottom: 67%; margin-bottom: 20px; grid-row: ~'1 / -1'; } } Andrew

Hi, what you want to do is certainly possible but to make it just like the example site would take a fair bit of work to make it work well for all screen sizes, adding the gradient background, controlling possible text overflow and general refinement - more than I can provide in a forum post.
I can't decide whether it's better to make the image position absolute but I've gone with making the text content position absolute because you can set your image to a chosen aspect ratio in the Squarespace summary block settings. Here's the custom CSS:
.summary-v2-block .summary-block-setting-design-autogrid .summary-item .summary-content { position: absolute; bottom: 0; left: 0; padding: 20px; width: 100%; } I hope that gets you started. If you want to mimic the example exactly or have a design in mind, I can give you a price for the work.

Hi, I don't know of a fix for this. Safari sometimes acts differently - it's not as easy to code for as Chrome.
I think there's a simpler way to do this though. If you want all text links in your 'Lightest 1' palette sections (i.e with white background) to have black text and a blue underline, then remove the black text color you added to the links first. You can do this by selecting them and clicking on the color button where you added it in the first place and clicking the black colour again (this should toggle it off). This will make your links blue again as this is the default color.
Now go to your color palette editor and edit the Lightest 1 palette. Scroll down to the Links colors and change text links to black. Your links will now be black with blue underlines.
Now in your custom CSS remove the code I previously gave you:
span[class^="sqsrte-text-color--"] { text-decoration: none } Your existing custom CSS specifies that links should have a blue underline, so keep that, and it should function as you want it to.
 

Hi, I'm suggesting this from memory but I think as this is a blog page, if you edit the blog section (use the section menu that appears on the top right of the section where you can change background colour etc), you can turn off the metadata delimiters.
If I'm wrong and you can't, you can use this custom CSS:
.blog-categories--comma { display: none } Hope that helps.

Hi you need to use 100svh like this:
#siteWrapper { display: flex; flex-direction: column; min-height: ~'100svh'; }  

Hi yes, you need to add this code:
#siteWrapper #header .header-actions-action--cta .sqs-button-element--primary { font-size: 20px; padding: 20px; } Change the pixel values as you wish.  If you want the padding to have different vertical/horizontal padding then use padding: 10px 20px; which will make the padding 10px top and bottom and 20px on the sides.
This is a simplified way of doing this. A more complex solution would use different sizes for different screen sizes and a dynamic font size rather than a fixed pixel value.
Hope that helps.
Andrew
Square Ace

Hi, try adding this code in your code injection header:
<style> #header[data-section-theme="bright-inverse"]:not(.shrink) { --navigationLinkColor: #fff; } </style> This will work when the first section colour palette is what you have your homepage set to (I think it's Bright 1, might be Bright 2).
It can't go in the Custom CSS because it doesn't like CSS variables with capitals, but that's how Squarespace sets it.
If you want to animate the transition, this will work just for the nav links and can be added to the Custom CSS. You'll need to modify it if you want it to work for more than the nav links or if you add a site-wide Squarespace animation:
.header-nav-item a { transition: color 0.4s; } Your logo will still be black. This could be fixed if you used an SVG for the logo because you can control the colour of SVGs with CSS. You'd need some javascript to replace the logo <img> with an <svg> element.
Hope that helps.
Andrew
Square Ace