Spark-Plugin

Hi @stinejensen123, then you can add this code and play around with the padding, etc, let me known how it goes:)
/* Adjusts spacing for the title in the user items list */ .user-items-list .list-section-title { padding-bottom: 10px !important; /* Adds 10px padding below the title to create space from the element below */ margin-top: -150px !important; /* Moves the title upwards by 150px to adjust its positioning within the section */ } /* Centers and adjusts spacing for the button container in the user items list */ .user-items-list .list-section-button-container[data-section-button-alignment="center"] { text-align: center; /* Centers the button horizontally within the container */ margin-top: -10px !important; /* Moves the button container slightly upwards to reduce top space */ margin-bottom: -100px !important; /* Moves the button container upwards by 100px to reduce bottom space */ }  

Hi @BabyBlue, try this code, it will change the color and font size:
Navigate to Pages > Website Tools > Custom CSS. Paste the code into the CSS editor. Hit Save and you’re done Note: Play around with the font-size, for example: 60px, 20px.
/* Sold out */ .product-mark.sold-out { color: black !important; font-size: 20px !important; } Hope it helps:)

Hi @wescolstock,I replied to your other post—check it out:) To apply the updated code to a specific page, follow these steps:
Hover over the page name in your Squarespace dashboard until you see the gear icon next to it. Click on the gear icon to open the Page Settings. In the Page Settings, scroll down to the "Advanced" section. Paste the updated code inside the <style> tag provided below in the custom code box. Click "Save" to apply the code to that specific page. Repeat this process for any other pages you want to add the code to.

Homepage:
<style>/* Change Homepage Text on Hover in Navigation */ .header-nav-item > a { transition: color 0.3s ease, text-shadow 0.3s ease; /* Smooth transition for color and text-shadow */ } /* Change HomePage Header Title Text on Hover*/ .header-title-text { transform: scale(1); transition: 1s } .header-title-text:hover { transform: scale(1.1); transition: 1s } .header-title-text:hover { color: #fff !important; /* Sets text color to White */ text-shadow: /* White Glow */ 0 0 7px #fff, 0 0 10px #fff,; transition: 1s } .header-nav-item > a:hover { color: #fff !important; /* Changes text color to white */ text-shadow: /* White Glow */ 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, /* Green Glow */ 0 0 42px #0fa, 0 0 82px #0fa, 0 0 92px #0fa, 0 0 102px #0fa, 0 0 151px #0fa; } </style> About Page: 
<style>/* Change About Page Text on Hover in Navigation */ .header-nav-item > a { transition: color 0.3s ease, text-shadow 0.3s ease; /* Smooth transition for color and text-shadow */ } /* Change About Page Header Title Text on Hover*/ .header-title-text { transform: scale(1); transition: 1s } .header-title-text:hover { transform: scale(1.1); transition: 1s } .header-title-text:hover { color: #fff !important; /* Sets text color to White */ text-shadow: /* White Glow */ 0 0 7px #fff, 0 0 10px #fff,; transition: 1s } .header-nav-item > a:hover { color: #fff !important; /* Changes text color to white */ text-shadow: /* Black Glow */ 0 0 7px #000, 0 0 10px #000, 0 0 21px #000, 0 0 42px #000, 0 0 82px #000, 0 0 92px #000, 0 0 102px #000, 0 0 151px #000; } </style>  

Hi @ETEvans, You’re correct; the price was hard to see. If it were free, that would be straightforward. Jokes aside, you should add this code to increase the font size. You can adjust it to meet your requirements.
Navigate to Pages > Website Tools > Custom CSS. Paste the code into the CSS editor. Hit Save and you’re done #productDetails .product-price { font-size: 30px !important; /* Sets the font size of the price text to 30px */ }  

Hi again, @wescolstock. It looks like if you add the code and refresh the page, it may temporarily stop working, but as soon as you open the Custom CSS tab, it reactivates and continues to work, even in preview mode without needing another refresh. To make it more seamless, I’ve updated the code so it now remains active even after a page refresh. This should save you from having to re-open the CSS tab each time. Let me know if you encounter any issues with this updated version:)
/* Change Homepage Text on Hover in Navigation */ #collection-67308916c4515e11a3025959 .header-nav-item > a:hover { color: #fff !important; /* Ensures text color changes to white */ text-shadow: /* White Glow */ 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, /* Green Glow */ 0 0 42px #0fa, 0 0 82px #0fa, 0 0 92px #0fa, 0 0 102px #0fa, 0 0 151px #0fa; } /* Change About Page Text on Hover in Navigation */ #collection-6730a30a41861437b8923450 .header-nav-item > a:hover { color: #fff !important; /* Sets text color to white */ text-shadow: /* Black Glow */ 0 0 7px #000, 0 0 10px #000, 0 0 21px #000, 0 0 42px #000, 0 0 82px #000, 0 0 92px #000, 0 0 102px #000, 0 0 151px #000; }  

Hello @tammyharrisdesigns, not sure about RedBubble, but regarding Amazon, you can check this article:https://support.squarespace.com/hc/en-us/articles/205814038-Amazon-blocks?platform=v6&websiteId=600d8fdcf983552f0a57b975

Hey @kk589, here's a simple way to handle it: instead of placing the code in the CSS box, add it in the Advanced section. Here’s how:
Hover over the homepage name until you see the gear icon. Click the gear icon to open the page settings. Go to the Advanced section, paste the updated code below, and hit Save. That’s it! This will make sure the code only applies to the homepage:)
<style> /* Initial logo styling on the homepage */ .homepage .header-title-logo { opacity: 0; /* Makes logo transparent initially */ position: relative; /* Allows the logo to be adjusted within its container */ top: -10vh; /* Moves the logo 10% of the viewport height upwards */ transition: all 0.75s; /* Smoothly animates all changes over 0.75 seconds */ } /* Adjusts the logo styling when the "shrink" class is added */ .homepage .shrink .header-title-logo { opacity: 1; /* Makes logo fully visible */ position: relative; /* Keeps logo positioning relative */ top: 0; /* Positions logo back to its original placement */ } </style>  

Hi @GritMark, changes may not appear in search results immediately after you make updates. Google needs time to process requests, then crawl and index the page. Since Google relies on a complex algorithm to update site information, there’s no guarantee when it will index all your changes. So, I’d suggest leaving the logo, favicon, and related info as is for now so Google can gather the necessary data:)

Hello @Shay0131, give this code a try, it allows you to customize the padding to your preference, ensuring the content fits neatly within the layout:
Navigate to Pages > Website Tools > Custom CSS. Paste the code into the CSS editor. Hit Save and you’re done /* Adjusts padding inside the "Add to Cart" button */ .sqs-add-to-cart-button { /* Left and right padding increases button width */ padding-left: 55px !important; padding-right: 55px !important; /* Top and bottom padding makes the button taller */ padding-top: 30px !important; padding-bottom: 30px !important; }  

Hi @marijoreo, Try this code; it works on both mobile and desktop. Just make sure to update your section ID and have the buttons toggle turned on for your carousel. Also, refer to the attached video for guidance.
/* Styles for elements inside the section with ID 6706505963c951747b5f8a7c */ [data-section-id="6706505963c951747b5f8a7c"] { /* Adjusts each list item's positioning */ li.list-item { position: relative !important; /* Sets each list item to a relative position, allowing for absolute positioning of child elements */ } /* Sets the button container to cover the entire list item */ .list-item-content__button-container { position: absolute !important; /* Makes the button container take an absolute position within the list item */ top: 0; /* Aligns the top edge of the container to the top of the list item */ bottom: 0; /* Aligns the bottom edge of the container to the bottom of the list item */ left: 0; /* Aligns the left edge of the container to the left of the list item */ right: 0; /* Aligns the right edge of the container to the right of the list item */ } /* Styles for the actual button inside the list item */ a.list-item-content__button.sqs-block-button-element { position: absolute; /* Sets the button position to absolute to fill the container */ top: 0; /* Aligns the top edge of the button to the top of the container */ left: 0; /* Aligns the left edge of the button to the left of the container */ right: 0; /* Aligns the right edge of the button to the right of the container */ bottom: 0; /* Aligns the bottom edge of the button to the bottom of the container */ z-index: 9999; /* Brings the button to the front, ensuring it’s clickable */ color: transparent !important; /* Makes the text color transparent so it’s not visible */ background-color: transparent !important; /* Makes the button background transparent */ border: none !important; /* Removes any borders around the button */ } /* Removes padding and margin from the button container to make it fit precisely */ .list-item-content__button-container { margin: 0 !important; /* Removes any extra margin around the container */ padding: 0 !important; /* Removes any extra padding within the container */ } }  
Screen Recording 2024-11-07 at 09.55.23.mov

Hi @Soohyun, give this code a try and let me know how it goes:
Navigate to Pages > Website Tools > Custom CSS. Paste the code into the CSS editor. Hit Save and you’re done /* Changes the text color of dropdown menu items on hover */ .header-nav .header-nav-item--folder .header-nav-folder-content .header-nav-folder-item:hover a { color: #fff !important; /* Change the color value (#fff) to any desired color code */ /* Instructions: - The color property specifies the text color of the dropdown menu items when hovered over. - You can change `#fff` to any valid color code (e.g., #000000 for black, #d4af37 for gold, etc.). */ } /* Makes the dropdown menu automatically adjust its width */ .header-nav-folder-content { width: auto !important; /* The dropdown will automatically adjust to the content width */ min-width: unset !important; /* Removes any minimum width restriction */ /* Instructions: - The width property is set to `auto` so the dropdown width matches the content size. - `min-width: unset` ensures there is no minimum width constraint, but you can change it to a specific value if needed. */ }  

Hi @LukeHoll, You can use the same code and add a parameter to ensure it functions only on desktop. Here’s the updated code:
/* Login text to icon - apply only on desktop */ @media screen and (min-width: 800px) { /* Adjust the min-width according to your breakpoint */ .user-accounts-text-link span { color: transparent; } .user-accounts-text-link { background-image: url(https://i.ibb.co/2yD0xXq/360-F-448443831-jx-Cl2q-W7m-In-Z2-Je-Tp9d3-BF3-Jw-N9-XRVFE.png) !important; background-size: contain; background-repeat: no-repeat; background-position: right; } }  

@ADADAD, are you on a Business plan or above? if so, we can try this code:
Go to: Pages > Website Tools  > Code Injection > FOOTER , paste it there and hit save.
<script> /* Desktop */ document.querySelector('.header-display-desktop .header-title-logo a').setAttribute('href', '/home'); /* Mobile */ document.querySelector('.header-display-mobile .header-title-logo a').setAttribute('href', '/home'); </script>  

Hello @Anele0610, give this code a try and let me know how it goes:
.sqs-block-button-element { width: 60% !important; box-sizing: border-box; min-height: 120px; text-align: center !important; display: flex; align-items: center; /* Center vertically */ justify-content: center; /* Center horizontally */ }  

Hi @Jolene2023, in this case I would recommend watching this video:
 

@AnnaJacobs, thank you. Can you make sure the section settings are exactly like the ones below? Fill Screen activated and Section height (L)?

@beccahobbs150, since the code worked as it is, no need to change the header template. To remove the title, you can simply add this code:
.header-title { display: none !important; }

Hey @aMarte, give this code a try and see how it goes:
Navigate to Pages > Website Tools > Custom CSS. Paste the code into the CSS editor. Hit Save and you’re done /* Hover effect for header navigation folder items */ .header-nav-folder-item:hover { /* Changes the link text color when hovering over the folder item */ a { color: #000000 !important; /* This changes the link text color to black on hover */ } } /* Hover effect for header navigation */ .header-nav a:hover{ color: #000000 !important; // * This changes the link text color to black on hover */ }  

Hi @Aurora, you can try the following CSS, this will work for all newsletters you’re using on your website:
.newsletter-block .newsletter-form-field-element:focus, .search-block input:focus { outline-color: #fe5aa9 !important; } Let me know how it goes:)

Hi @juliengoldstein! You can try this code:
Navigate to Pages > Website Tools > Custom CSS. Paste the code into the CSS editor. Hit Save and you’re done Note: Play around with the % value.
@media only screen and (min-width: 767px) { .gallery-reel-item img { width: 97% !important; height: auto !important; } } Hope it helps:)

Hi @GregOvens, give this code a try and let me know how it goes:
Navigate to Pages > Website Tools > Custom CSS. Paste the code into the CSS editor. Hit Save and you’re done Note: Play around with the colors you want.  (#)
/* Cart Checkout Button */ .cart-checkout-button{ background: #fff !important; color: #7777 !important; } /* Continue Shopping Button */ a.cart-continue-button { background: #fff !important; color: #7777 !important; }  

@joelbull, thanks. You can try this code:
Navigate to Pages > Website Tools > Custom CSS. Paste the code into the CSS editor. Hit Save and you’re done Note: Play around with the gap value.
#footer-nav-clone .header-nav-list { width: 100%; max-width: 400px; margin: 0 auto; justify-content: space-evenly; gap: 10px !important; } Let me know how it goes:)

Hi @designbyjrs, try this code and let me know how it goes:
div.header-announcement-bar-wrapper { border-top: 3px solid #0a1c30 !important; /* Top solid border */ position: relative; /* Ensure ::after pseudo-element is positioned correctly */ padding-bottom: 5px; /* Optional: Adds some space for the bottom lines */ } div.header-announcement-bar-wrapper::after { content: ''; position: absolute; bottom: 0; /* The lowest line is at the bottom */ left: 0; width: 100%; height: 2px; /* Thickness of the second line */ background-color: #0a1c30; } div.header-announcement-bar-wrapper::before { content: ''; position: absolute; bottom: 15px; /* Distance between the two bottom lines */ left: 0; width: 100%; height: 2px; /* Thickness of the first bottom line */ background-color: #0a1c30; }  

@jjohansson, you can try this code:
Navigate to Pages > Website Tools > Custom CSS. Paste the code into the CSS editor. Hit Save and you’re done See attached video for results.
@media screen and (min-width: 992px) { body:not(.sqs-edit-mode) .header-title { position: fixed; top: 80px; left: 4vw; z-index: 9999; } } @media screen and (min-width: 992px) { body:not(.sqs-edit-mode) .header-nav { position: fixed; top: 20%; left: 4vw; padding: 0 !important; transform: translatey(-50%); } } Give it a try and see how it goes:)
Screen Recording 2024-10-21 at 11.07.38.mov

Hello @IndianaGirl! That is definitely possible! Please check the attached screenshot—if that's what you're looking for, go ahead and use the following code. Also, with this code, you can add as many IDs as you need by simply separating them with a comma:
#block-11e7f5a733462b83320f h1 { text-shadow: 3px 5px 3px rgba(0,0,0,.6); } Hope it helps.