Beyondspace

@evk_creates Did you ever have any luck with this eventually? I'm trying to accomplish the same without shifting over years of archive events into blogs!

I was afraid you'd say that. Squarespace has this feature enabled for blog posts (in the blog, you can add a source url and then click a checkmark that says "Post Title should link to Source URL" - see attached image). Is there a way to mimic the behavior that the checkmark enables in the blog but for events?

I have made the header on my homepage transparent but will need it to sit atop the section below on all pages. How can we do this with CSS?
 
site pw: ballet2024winebar

Thank you!

Try the following Custom Css code
.sqs-svg-icon--wrapper:after { content: ''; display: block; width: 100%; height: 100%; opacity: 0; background-position: center center; background-size: cover; background-repeat: none; } .sections .sqs-svg-icon--wrapper:hover { background: none; } .sqs-svg-icon--wrapper:hover:after { opacity: 1; } .sqs-svg-icon--wrapper:hover .sqs-svg-icon--social { display: none; } /*instagram hover image url*/ .sqs-svg-icon--wrapper.instagram-unauth:after { background-image: url(https://plus.unsplash.com/premium_photo-1712935547661-4fe0b2de98bf?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHx8); } /*linkedin hover image url*/ .sqs-svg-icon--wrapper.linkedin-unauth:after { background-image: url(https://plus.unsplash.com/premium_photo-1712935547661-4fe0b2de98bf?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHx8); } /*redbubble hover image url*/ .sqs-svg-icon--wrapper[href*="redbubble"]:after { background-image: url(https://plus.unsplash.com/premium_photo-1712935547661-4fe0b2de98bf?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHx8); } Change image URL on your own

Hello,
Wondering how can I had another custom image (with CSS) when hovering over a certain custom imported social icon in the footer, I'm trying to make it match the rest of my social media icons, thank you!
Here's my website
https://www.erinncapko.com/

Hello forum. I have a website. This website displays technical specifications of automobiles. I designed it as a store but it only displays information. My question is, on mobile, it shows the products in the store in 2 columns. I want to increase this to 3. Can we do this with Custom CSS? Thank you in advance.
Site is: shortlyauto.com

Apparently you just need to post the question to figure it out yourself.
In the orders, export csv with the specific product selected.
But, if anyone has a way to integrate it with google sheets, that would be even better.

Get the URL on the asset Library
1. File Details -> Right Click on image the copy image address


2. On your code block, use the img tag and add the URL with the one you copy from library asset
 

This is a great option - thanks for your efforts on this one - I will be giving it a try in the near future.

I created this freebie to unblock the gallery block for users, check Classic Gallery block. For those who are using Personal plan, the script is available as Tampermonkey script, too
@CoorlasArchitecture @nparkdesigns
 

Kapture 2024-03-09 at 10.42.43.mp4

Hey there, I replied to you on your YouTube video but also wanted to follow up here. You need to install the code in the portfolio page’s header code injection, not the site wide header code injection.
I also outline several reasons JavaScript is needed to truly solve this issue in my blog post.
Please consider taking down the video as it has the potential to confuse people and incorrectly claims that my code does not work. Again no hard feelings and it is great we are all trying to help out until Squarespace finally implements this for real.

I sell Dahlia Tubers and when a variety is sold out, it has the words 'Coming Soon' superimposed on the thumbnail of the product in my store....how do I revert to Sold Out, which is accurate?

i figured it out thx

This space is cause by the adding of the gallery. You can add the following code to reduce the gap
section[data-section-id="626127c40ce3b24fa47ef997"] .gallery-grid { padding-top: 0; } And modify the padding of the title by change the padding value
https://forum.squarespace.com/topic/206307-can-i-add-a-title-to-a-gallery-section/?do=findComment&comment=544730

Thank you! This code worked on my site.
Do you have code if users enable Form Block Lightbox button?

 

I followed @Ian_A approach with the new localized form block update in mind, the below script can work with multiple forms on the page and use the localized date format string as the unique value for the subject. The subject form field will be hidden after the form has been loaded
nit: remember to set the label and placeholder of field to Subject
cc: @stefansegers and @creedon for further discussion
Put this into website's Footer injection
<script> /* * @beyondspace: Unique submission subject * Squarespace Forum: 14-June-2023 */ window.addEventListener("load", (event) => { const formBlocks = document.querySelectorAll('.sqs-block-form'); const triggerInputChange = (inputElement, value) => { const nativeInputValueSetter = Object.getOwnPropertyDescriptor( window.HTMLInputElement.prototype, "value" ).set; nativeInputValueSetter.call(inputElement, value); const inputEvent = new Event("input", { bubbles: true }); inputElement.dispatchEvent(inputEvent); } formBlocks.forEach((block) => { const timestamp = new Date().toLocaleString(Static.SQUARESPACE_CONTEXT.website.language); const subjectInput = block.querySelector(`[placeholder="Subject"]`); if (subjectInput) { const subjectField = subjectInput.closest(`.form-item`); subjectField.hidden = true; triggerInputChange(subjectInput, timestamp) } }) }); </script>
The emails will be sent as

@Beyondspace
Hello Beyondspace,
I have done what you explain but gallery doesn't appear under image when I want to create a new block.
I had copy the code in the footer and a dropdown name exactly `Classic Gallery Pages`.
 
Thanks for your help!
Aldric

I apologize, but I'm extremely new to this field and my grasp of coding is quite limited 🫠. From what I understand, the issue lies with the pagination of the Universal Plugin. However, I prefer to keep the pagination as it helps maintain the organization of the shop. Is there any potential solution that doesn't involve disabling the pagination?

Hey everyone! I recently bought a plugin from SQSP Starter. When I first installed it, there were some issues. For instance, it started showing all the prices in thousands instead of dozens because my page is in euros, which triggered the plugin. They fixed that problem, but then another one popped up.
On my website, I also have the Universal Filter Plugin with pagination activated. When I'm on the first page of my shop, the currency converter works fine. But when I move to the second page, the prices disappear. This only seems to happen for visitors from areas where the currency is euro (€). However, when the geolocator detects a visitor from the US, the prices are visible on all pages. So, it seems to be an issue only for visitors who stick with the default currency of the website (EUR €).
I know it might sound confusing, so I've made a video to show exactly what's happening.
I'm really struggling to find a solution, and unfortunately, the plugin creator hasn't been much help. Can anyone lend a hand? Thanks a bunch.
5e775ae1-c1b5-4071-9120-b9c842bf60e9.mp4

You can try the following code
@media only screen and (max-width: 1024px) { #collection-60d9e67efc07d56954523f28.header--menu-open .header-menu-nav-item:nth-child(5), #collection-60d9e67efc07d56954523f28.header--menu-open .header-menu-nav-item:nth-child(6) { display: none; } } Let me know how it works on your site

For Gallery Section Slideshow: Full, the arrow selector is slightly different
<script> // Wait for the DOM content to be fully loaded window.onload = function() { if (window.self !== window.top) { return; } // Function to simulate clicking the next arrow function clickNext(arrow) { arrow.click(); } var fullscreenSlideshows = document.querySelectorAll('.gallery-fullscreen-slideshow'); // Set auto-scrolling for each carousel fullscreenSlideshows.forEach(function(slideshow) { var intervalId; // Variable to hold the interval ID // Query all elements with the class for carousel next arrows const arrows = slideshow.querySelectorAll('.gallery-fullscreen-slideshow-control-btn'); arrows.forEach(function(arrow) { // Define a function to handle auto-scrolling for a specific carousel function autoScroll() { clickNext(arrow); } // Start the auto-scrolling for the current carousel if (arrow.getAttribute("aria-label") === "Next Slide") { // console.log('auto click next arrow'); intervalId = setInterval(autoScroll, 5000); } // Stop autoplay when the arrow is clicked arrow.addEventListener("click", function(e) { // Stop autoplay when it is user-triggered event if (e.offsetX || e.offsetY) { // console.log('user click') clearInterval(intervalId); } }); }); }); }; </script> cc @Laticauda

[16-May-2023] Update
The script has been updated, find the new solution here 
 
Hi guys,
Understanding the requirement to set consistently format date on all pages of website , I would like to share my solution to you .
1. Add the following codes to Home > Settings > Advanced > Code Injection
<!-- Fix inconsistent blog date format on Squarespace 7.1 template --> <!-- Squarespace Forum Update 06-11-2021 --> <script src="https://stevenlevithan.com/assets/misc/date.format.js"></script> <script> (function(){ document.addEventListener('DOMContentLoaded', function() { const dateformat = "dd-mm-yyyy"; const pubdates = document.querySelectorAll("time[datetime]:not([class*=event-time]), time[pubdate], time.blog-meta-item--date"); pubdates.forEach(pubDate => { let d = new Date(pubDate.getAttribute("datetime") || pubDate.innerText); if (pubDate.classList.contains('blog-meta-item--date') ) { d = new Date(document.querySelector('[itemprop="datePublished"]').getAttribute('content').split("T")[0]); } pubDate.innerHTML = d.format(dateformat); }); }); })(); </script> 2. Change the 'dateformat' in my previous code with the date format you want to apply. Ex: dd-mm-yyy, mmm-dd-yyyy,...

Hope that it can help your sites properly
Let me know if you have any issue that needs to be solved.
Support me by pressing 👍 if this useful for you

CALL FOR TESTING 🤩
The Beyondspace date-format snippet has been upgraded, please replace your given snippet with the new one from this URL below
 🌍  Live editor

🌍 outputFormat supports different kinds of format based on the date string token
- MM/DD/YYYY
- DD/MM/YYYY
- MMM D, YYYY
 🌍 Multilingual website is supported out of the box, check for the support locales value here, for example
- www.ojala.mx/es/espanol
- www.ojala.mx/en/english
- www.ojala.mx/en/ojala-en
- www.ojala.mx/es/ojala-es
 🌍  Only those date format can support locales. For example instead putting `MM/DD/YYYY`, place `LLL` so it can be auto-converted into different languages
Format English Locale Sample Output L MM/DD/YYYY 08/16/2018 LL MMMM D, YYYY August 16, 2018 l M/D/YYYY 8/16/2018 ll MMM D, YYYY Aug 16, 2018  🌍  Weglot website is not supported as Weglot has its own mechanism for date time localization, for example
cc: @mazmac @ocam @yshahi @AdamR @JoelleM @ChiroUp @g-souza @Creatingspaces
 

Hello,
I have a tracking link from a 3rd party that I need to add on my websites. When I go into code injection to place the script, it doesn't save for either the header or the footer. Is this an issue with my squarespace or the script?
Please see below for the tracking script.
<script type="text/javascript" src="//realtyads.com/px/4210"></script>