Jump to content

Spark-Plugin

Circle Member
  • Posts

    579
  • Joined

  • Last visited

  • Days Won

    1

Community Answers

  1. Spark-Plugin's post in Remove padding around gallery slideshow was marked as the answer   
    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 */ }  

  2. Spark-Plugin's post in Changing the font size & colour on a Shop Page for the Sold Out label. was marked as the answer   
    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:)
  3. Spark-Plugin's post in Hover & Glow CSS Code for one page only was marked as the answer   
    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>  
  4. Spark-Plugin's post in Price Font in Product Pages and Shopping Cart is miniscule was marked as the answer   
    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 */ }  

  5. Spark-Plugin's post in Hover Effect diseappears when I leave Custom CSS tab was marked as the answer   
    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; }  
  6. Spark-Plugin's post in Can I integrate RedBubble onto my Squarespace business site? was marked as the answer   
    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
  7. Spark-Plugin's post in Hiden Header Logo That Appears When Scrolling - HomePage Only was marked as the answer   
    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>  
  8. Spark-Plugin's post in Website logo and info not showing on online search engines was marked as the answer   
    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:)
  9. Spark-Plugin's post in How to make the add to cart buttons bigger? was marked as the answer   
    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; }  
  10. Spark-Plugin's post in Making Images Clickable in Testimonial Carousel Slider on Desktop (Works on Mobile) was marked as the answer   
    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
  11. Spark-Plugin's post in Dropdown menu edit was marked as the answer   
    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. */ }  
  12. Spark-Plugin's post in Adjusting Header Icon Display for Mobile Version was marked as the answer   
    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; } }  
  13. Spark-Plugin's post in Header logo doens't link to homepage but to error page was marked as the answer   
    @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>  
  14. Spark-Plugin's post in Fully Square Button Styling was marked as the answer   
    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 */ }  

  15. Spark-Plugin's post in Dropdown menu full height and alignment issues was marked as the answer   
    Hi @Jolene2023, in this case I would recommend watching this video:
     
  16. Spark-Plugin's post in Remove white space below hidden footer. was marked as the answer   
    @AnnaJacobs, thank you. Can you make sure the section settings are exactly like the ones below? Fill Screen activated and Section height (L)?

  17. Spark-Plugin's post in Change spacing of nav links in header was marked as the answer   
    @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; }
  18. Spark-Plugin's post in Adding a highlight to header text was marked as the answer   
    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 */ }  
  19. Spark-Plugin's post in Customize color for frame for name and email fields for newsletter sign-up was marked as the answer   
    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:)

  20. Spark-Plugin's post in Add space between 2 images in Reel was marked as the answer   
    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:)
  21. Spark-Plugin's post in How to set custom color to the Checkout & Continue Shopping buttons? was marked as the answer   
    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; }  


  22. Spark-Plugin's post in Adding more space between words in a code was marked as the answer   
    @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:)

  23. Spark-Plugin's post in Create double line under header was marked as the answer   
    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; }  

  24. Spark-Plugin's post in Custom padding top was marked as the answer   
    @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
  25. Spark-Plugin's post in How to Add a Drop shadow to some of my H1? was marked as the answer   
    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.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.