Spark-Plugin

Hello @audlink13, please give this code a try, it should work smoothly, also check the attached screenshot:)
Navigate to Pages > Website Tools > Custom CSS. Paste the code below into the CSS editor. Hit Save and you’re done /* Adjust Gallery Padding */ section[data-section-id="673b78b9e11fee35db15d4d7"] .gallery-masonry[data-width="full"] { padding-top: 0px !important; /* Removes top padding for full-width masonry galleries. The !important ensures the rule overrides any conflicting styles. */ }

Hello @Odie76, try this code, it should work smoothly. Check out the screenshot for reference.
Navigate to Pages > Website Tools > Custom CSS. Paste the code below into the CSS editor. Hit Save and you’re done /* Blog Item Content Wrapper */ .blog-item-content-wrapper { display: flex; /* Enables flexbox for layout */ flex-direction: column; /* Stacks content vertically */ } /* Tags Styling and Position Adjustment */ .blog-item-wrapper .blog-meta-item--tags { margin-bottom: 60px; /* Adds space below tags */ margin-top: 0; /* Removes space above tags */ order: -1; /* Moves tags to the top of the blog item */ text-align: left; /* Aligns tags to the left */ } /* Tag Links Styling */ .blog-meta-item--tags a { color: #fff !important; /* Forces text color to white (change this to any color you desire) */ background: #000; /* Sets background color to black (change this to any color you desire) */ border-radius: 5px; /* Adds rounded corners */ padding: 10px; /* Adds space inside the tags for better appearance */ }

@deerdeerdeer, yes, you can do that by following the steps below. See attached screenshots for reference:
Navigate to Pages > Website Tools > Custom CSS. Paste the code below into the CSS editor. Hit Save and you’re done /* Header Title Text Link Styling */ #collection-66012d4484a32034fce8847f .header-title-text a { color: black !important; /* Forces the link text color to be black, overriding any other styles. */ }
 

Hello @RosalynStuart, You would need to target only the specific section instead of the entire page. To do this, you’ll need to install this extension. Once installed, click on its icon while you're on the page you're working on. It will display all the IDs on the page, simply click on the section ID you want to copy. Then, add that ID to your code, and you're all set! This will ensure the customization applies only to the specific section.

Hello @jrobertlennon. You can achieve this by adding the following code. I’ve also included extra parameters so you can further customize the font size and color to match your preferences:
Navigate to Pages > Website Tools > Custom CSS. Paste the code into the CSS editor. Hit Save and you’re done /* Form Submission Text Styling */ div.form-submission-text { color: #f1f; /* Sets the text color */ font-family: 'PS55'; /* Applies the PS55 font to the submission message */ font-size: 30px; /* Sets the font size for better readability */ }
 

Hello @Neonic, give this code a try and see how it goes:)
Navigate to Pages > Website Tools > Custom CSS. Paste the code below into the CSS editor. Hit Save and you’re done /* Carousel and Simple List Item Styling */ /* Carousel List Items */ .user-items-list-carousel .list-item { border-radius: 12px !important; /* Adds rounded corners to each carousel item */ } .user-items-list-carousel .list-item img { border-radius: 12px !important; /* Ensures carousel images match the rounded corners of their container */ } /* Simple List Items */ .user-items-list-simple .list-item { border-radius: 12px !important; /* Adds rounded corners to each simple list item */ } .user-items-list-simple .list-item img { border-radius: 12px !important; /* Ensures simple list images match the rounded corners of their container */ }

Hi @Rjafadi,I’ve reviewed your code, and everything seems to be working correctly. Try adjusting the menu background color on mobile, change it directly through the Header Settings. Check out the attached screenshots:) 

 
 

Hello @Neonic, you can add an overlay color to the image by adding the code below. The overlay can be adjusted as seen on the attached screenshot:
Navigate to Pages > Website Tools > Custom CSS. Paste the code into the CSS editor. Hit Save and you’re done /* Slideshow Overlay */ .slide-media-container:after { content: ""; /* Creates an empty pseudo-element to serve as the overlay */ background-color: rgba(0,0,0,0.45); /* Applies a semi-transparent black background */ position: absolute; /* Positions the overlay relative to the container */ top: 0; /* Aligns the overlay with the top of the container */ left: 0; /* Aligns the overlay with the left of the container */ width: 100%; /* Ensures the overlay spans the full width */ height: 100%; /* Ensures the overlay spans the full height */ z-index: 9099; /* Positions the overlay above most elements but below the content */ } .slide-content.list-item-card-background { z-index: 99999999999999; /* Ensures content is above all other elements, including the overlay */ }

Hello @Neonic, To change the navigation color, follow these steps:
In Edit Mode, hover over the header and click Edit Site Header. On the top right corner, click Edit Design. Go to Colors and adjust the navigation color. Once that’s done, you can use the following code to make the active navigation color yellow:
Navigate to Pages > Website Tools > Custom CSS. Paste the code into the CSS editor. Hit Save and you’re done /* Active Navigation Link Styling */ body:not(.header--menu-open) .header-nav-item--active > a, body:not(.header--menu-open) .header-nav-folder-item--active .header-nav-folder-item-content { color: yellow !important; /* Sets active links color */ }

Hello @ComfortablyAdumb, please update you code with this one and check the attached screenshots for reference:

<!-- Donorbox Popup Button Installation Script --> <script type="text/javascript" defer src="https://donorbox.org/install-popup-button.js" id="donorbox-popup-button-installer"></script> <!-- Donation Button Centered Horizontally --> <div style="display: flex; justify-content: center;"> <a class="dbox-donation-button" id="preview_inline_popup_button" href="https://donorbox.org/victim-services-of-kenora-and-area?default_interval=o" style=" background: rgb(24,34,65); /* Dark background color for button */ color: rgb(255,245,217); /* Light text color for contrast */ text-decoration: none; /* Removes underline from link text */ font-family: Poppins, sans-serif; /* Custom font for a modern look */ display: flex; /* Flexbox to align content inside button */ justify-content: center; /* Centers button text horizontally */ align-items: center; /* Centers button text vertically */ font-size: 16px; /* Sets font size */ font-weight: 500; /* Sets font weight to medium */ padding: 8px 40px; /* Padding inside button for spacing */ border-radius: 0px; /* Removes border rounding */ gap: 8px; /* Spacing between button elements */ width: fit-content; /* Button width adapts to content */ line-height: 56px; /* Sets line height for vertical alignment */ "> <span class="cta-label" style="font-family: inherit; font-size: inherit;"> Donate now </span> </a> </div>  

Hi @LucieGbt1993, for that padding, please add this code, obviously you can adjust it:

/* Menu Section Styling */ .menu-block .menu-section + .menu-section { /* This targets the second .menu-section element when it directly follows another .menu-section */ margin-top: 0em; /* Removes any extra spacing (sets margin-top to 0) between consecutive menu sections */ }  

Hello @LULU3, You might want to check if there are any spacer blocks on either side of the text block that could be preventing it from stretching to full width. I've attached a screenshot for reference to help you identify this in your layout.

And if there are no Spacers, you can add this code:
Navigate to Pages > Website Tools > Custom CSS. Paste the code into the CSS editor. Hit Save and you’re done @media only screen and (max-width: 640px) { .sqs-layout .sqs-row .sqs-block:first-child { margin-left: 0% !important; margin-right: 0% !important; } }  

Hello @evemarden, give this code a try, this should work, also see attached screenshot for reference:
Navigate to Pages > Website Tools > Custom CSS. Paste the code into the CSS editor. Hit Save and you’re done /* Adjust Slide Content Margin for Small Screens */ @media screen and (max-width: 767px) { .user-items-list-banner-slideshow .slide-content { /* Sets the margin for small screens */ margin-bottom: -40px !important; /* Adjust this value as needed */ } }  

Hello @visual_ess, You can create a dedicated section with a vertical video background specifically for mobile devices while keeping your current background video section for desktop view. With custom CSS, we’ll ensure the vertical video section appears only on mobile devices, providing a tailored experience for both views. Here’s how you can proceed:
Add a New Section:
Go to your Squarespace editor. Create a new section just below your desktop background video section. Add your vertical video to this new section. Get the Section ID:
In the Squarespace editor, inspect the section using this extension to locate the ID for the vertical video section (e.g., #block-id). Apply Custom CSS:
Once you have the section ID, use the following CSS:
/* Hide video on desktop screens (768px and wider) */ @media screen and (min-width: 768px) { #block-yui_4_12_2_1_2718520257422_12345 { display: none; /* Completely hides this video block on desktop and larger screens */ } } /* Hide video on mobile screens (767px and narrower) */ @media screen and (max-width: 767px) { #block-yui_1_17_2_1_2717496829514_12345 { display: none; /* Completely hides this video block on mobile and smaller screens */ } } Replace #block-id with the ID of the vertical video section and #desktop-video-section-id with the ID of your desktop video section.
 
Let me know if it works:)

Hello @Joaofdecarvalho, give this code a try and see attched screenshot for reference.
Navigate to Pages > Website Tools > Custom CSS. Paste the code into the CSS editor. Hit Save and you’re done /* This style targets the background of the lightbox */ div.lightbox-background { /* Sets a semi-transparent background color, so the blur effect can be visible */ background-color: rgba(243, 242, 236, 0.8) !important; /* Applies a blur effect to the content behind the lightbox */ backdrop-filter: blur(10px) !important; /* Ensures the lightbox background itself is fully opaque */ opacity: 1 !important; }
 

Hi @AGQ! You can do that by adding the following code:
Navigate to Pages > Website Tools > Custom CSS. Paste the code into the CSS editor. Hit Save and you’re done /* Customizes the block styling */ #block-77b027ae732df2ee8d7d { background: #099 !important; /* Sets the background color */ }  

Hello @LucieGbt1993. You can achieve this by using the following code. Adjust the pixel value (px) to match your header background as needed:
Navigate to Pages > Website Tools > Custom CSS. Paste the code into the CSS editor. Hit Save and you’re done .header-nav-folder-content { background: transparent !important; /* Sets the background to transparent */ -webkit-backdrop-filter: blur(4px); /* Applies a blur effect for Safari browsers */ backdrop-filter: blur(4px); /* Applies the blur effect for other modern browsers */ } Give it a try:)

Hello @cindykate, yes, there is! You can easily remove a page from the navigation by dragging the page name to the "Not Llinked" area. This way, the page will no longer appear in the navigation. If the page is removed from the footer, you can simply add a Text Block and link the text to the page you want to keep accessible. Attached is a video on how to do so:)

Screen Recording 2024-11-13 at 09.40.11.mov    

Hello @Kolja, try this one: 
/* Changes the background color of burger menu */ .burger-inner > div { background-color: #ff6c2f !important; /* Sets to a custom orange */ }  

Hello, @JasonWilson You can definitely center the button within the code block! Just replace your current code with this updated one below. See attached screeshot for reference:
<div class="button-container"> <button class="flybook-book-now-button fb-widget-type-frontend fb-default-category-id-0 fb-account-id-1477 fb-entity-config-id- fb-domain-go.theflybook.com fb-protocol-https" style="background-color: #36b5aa;">BOOK NOW!</button> </div> <link rel="stylesheet" href="https://go.theflybook.com/content/bootstrapper/flybookbootstrap.css" /> <script src="https://go.theflybook.com/custom/bootstrapper/flybookbootstrap.js"></script> <style> /* Center the button horizontally */ .button-container { display: flex !important; /* Enables flexbox layout for alignment */ justify-content: center !important; /* Horizontally centers child elements */ align-items: center !important; /* Vertically centers child elements */ width: 100% !important; /* Ensures the container spans the full width of its parent */ } /* Style the button to maintain consistent appearance */ .flybook-book-now-button { padding: 10px 20px !important; /* Adds padding for better button aesthetics */ font-size: 1rem !important; /* Sets a readable font size */ border: none !important; /* Removes any default borders */ cursor: pointer !important; /* Changes cursor to a pointer on hover */ text-align: center !important; /* Ensures text is centered inside the button */ } /* Optional: Adjust button size for smaller screens */ @media (max-width: 768px) { .flybook-book-now-button { font-size: 0.9rem !important; /* Slightly smaller font for mobile */ padding: 8px 16px !important; /* Adjust padding for smaller screens */ } } </style>  

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