Beyondspace

Yes! I thought the previous link editor was stepping us in that direction, was surprised when it went away.
Awh well - thank you for making me feel less alone!

I would like to emulate this sites lightbox hover captions but don't know how to; https://www.samanthamash.com/. I don't want the text to show up under the gallery image; ONLY on when you click on it and it shows up on lightbox. This way it has a cleaner look. I haven't been able to find a way to do this in 7.1 when there is no design tab. Would anyone please be able to help me either create a CSS code or follow the right steps?

I also don't see Gallery Blocks in the new UI for selecting blocks to add to a section. Seems they're only usable on blog posts now and not regular pages?
Edit: actually I see now they're pages/section types instead of blocks

I'm trying to add text and other blocks to a gallery section (simple slideshow). Version 7.1 of Square Space, does not support Gallery Blocks, it only allows full gallery sections. Is there a way around this so that I can add other blocks into a gallery section?

Hi
 
I've been seeing that alot people like me noticing that there is no gallery block option in the latest version of squarespace.
I was hoping that there would be a slideshow setting in the image block design tab - but nothing!!
 
Is there a code that can work around this problem- to have slideshow or gallery??? 
 
Customer feedback : It doesn't seem like a wise move on squarespace to delete such a vital feature.. as this alone is now becoming a  determining factor choosing my site builder platform
 
 
 
 

If a circle member adds a gallery block to a page, regular users can continue editing and using the gallery block, probably even after the cicle member no longer has editor rights.
wouldn't it be possible for a circle member to add a gallery block to any section, then leave and the page owner can add that section to favorites?
Maybe then the regular user could paste the hearted section containing the gallery block into any page they want and then work with it?
I'd be willing to try this out, the gallery block seems to be such a useful feature 😞

caper-sunflower-95tm.squarespace.com
PW: 124
I put the code block in the 4th portfolio project, "Haus am Kattegat"

were you able to find what I've done wrong?

beyondspace how do you do this

My idea is creating one page with 2 gallery sections or 2 image blocks that are linked to the Portfolio (A) and Portfolio (B). Hope it makes sense

 

You can try adding to Home > Setting > Advanced > Code Injection > Footer
<script > const navBtns = document.querySelectorAll('.header-display-desktop .header-nav-item'); navBtns.forEach((button, i) => { button.addEventListener('click', () => { const navActiveBtns = document.querySelectorAll('.header-display-desktop .header-nav-item--active'); navActiveBtns.forEach(activeBtn => { activeBtn.classList.remove('header-nav-item--active'); }) // Check if link has # or not, default has process the underlink if (!button.querySelector('a').matches("[href*='#']")) return; button.classList.add('header-nav-item--active'); }); }); </script> Support me by pressing 👍 if this useful for you

Kindly try in Home > Design > Custom Css
#button-block-yui_3_17_2_1_1641237084533_45554-0 { padding-bottom: 0 !important; padding-top: 0 !important; } Let me know how it works on your site
Support me by pressing 👍 if this useful for you

You can place the code on your home page code injection

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

Try in Home > Design > Custom Css
.header-nav-item:hover a { background-repeat: repeat-x; background-image: linear-gradient(to right,currentColor 100%,currentColor 0); background-size: 1px 1px; background-position: 0 calc(100% - 0.1em); } Let me know how it works on your site
Press 👍 or mark this answer as solution to help another one too

Hi guys,
Once you created the Elfsight widgets and visit the pages where they are placed, you can sometimes notice this panel shows above the widget when you hover on the it, this toolbar contains some useful info and links
- Edit widget: let you open the widget editor right from the CMS editor, instead of find them from Elfsight widget dashboard
- Views: where you can see how many views per month you have left on the current widget's plan

By default this toolbar is not showing up, you have to hover in order to see it, if you want the panel to show up all the time when you are in Squarespace Edit, let's follow these steps
- Access the Code injection 
Add to Website Tools (under Not Linked) > Code Injection > Footer
- Paste the below CSS snippet
 
<!-- sqs:beyondspace-elfsight-helper --> <style>.sqs-edit-mode .eapps-widget .eapps-widget-toolbar,.sqs-edit-mode .eapps-widget .eapps-widget-toolbar-panel{opacity:1;pointer-events:auto}</style> <!-- /sqs:beyondspace-elfsight-helper --> and that's it! After saving the code you now can see the Elfsight Widget toolbar persists when entering Squarespace editor, helping you quickly know the current widget's views count and open the widget editor faster
Some notes:
- The trick will be only working with inline widgets for now, since the popup type widget (like the back-to-top) button, the toolbar won't be shown properly
- The toolbar is only available if you are owner of the widget, so rest assure that your visitors won't be able to see these, more info Why I see a panel above my widget

Hi friends,
In some questions on forum, I find out that many members need to automatically change the background on the portfolio collection page (currently, client needs to hover the item to make background change). Today, I share my code to work around with this feature. So here we go:
- Final result we approach:

beyondPortfolio.mp4  
- Version: Squarespace 7.1
- Requirement: Javascript code (you will need at least the business plan to run javascript).
- Installation:
1. Access: Home > Settings > Advanced > Code injection
2. Add the following code on footer
<!--beyondspace autoplay Hover Portfolio start--> <script> (function(){ window.addEventListener('load', () => { beyAutoPlayPortfolio(3000); // change the speed of transition }); })() function beyAutoPlayPortfolio(e){let t=document.querySelectorAll(".portfolio-hover-items-list > li");if(t.length>1){let o=new Event("mouseenter"),l=null,r=function(){let i=document.querySelector('.portfolio-hover-item[data-active="true"]').closest("li").nextElementSibling;i||(i=t[0]),i.querySelector("a").dispatchEvent(o),l=setTimeout(r,e)};r(),t.forEach(e=>{e.querySelector("a").addEventListener("mouseenter",function(e){e.isTrusted&&clearTimeout(l)}),e.querySelector("a").addEventListener("mouseleave",function(e){e.isTrusted&&r()})})}} </script> <!--beyondspace autoplay Hover Portfolio end--> 3. Check your result
Hope it can help
Support me by some comments or pressing 👍 if this useful for you
 

It can be done with custom css
@media screen and (max-width: 767px) { .header-title-logo img { max-height: 250px; } }

Try
.header-nav-item > a:after, .header-nav-folder-item > a:after { content:''; width: 0px; height: 1px; background: #fff; display: block; transition: width .2s ease; } .header-nav-item > a, .header-nav-folder-item:hover { background: none !important; } .header-nav-item--active > a:after, .header-nav-item:hover > a:after, .header-nav-folder-item:hover > a:after { width: 100%; } .header-nav-folder-item:hover > a { color: #fff !important; } Let me know how it works on your site
Support me by pressing 👍 if this useful for you

Use
body:not(.header--menu-open) .black .header-nav-folder-content { background-color: transparent; }  

CSS for PHOTOGRAPHER AND ARTISTS when it comes to gallery options and displaying meta data

There are several bugs in each of every element not listening the need of artists.
Photos are cropped or just certain aspect ratios. So you can just have a gallery with horizontal or a gallery with vertical images.
Some display Title, some description, Some both, Stacked doesn t have a Lightbox.
Some import meta data. Some ways importing DON T.
What made Squarespace great for artists back in the days is MISSING in so many ways.
So i really appreciate if there ll be at least a view CSS options to make some ISSUES better. 🙂
Would be really amazing if you can help Becca.
If you re so kind to get code out for

1-GALLERY SECTION masonry
Lightbox display the description BELOW IMAGE on hover and permanent and how to change style or font

2-GALLERY BLOCK in blogpost
Lightbox display the description BELOW IMAGE on hover and permanent and how to change style or font

3-A code to make vertical images NEVER be bigger then the screen height on desktop.

Would help SO MUCH. I don t know if nobody is thinkiing about desktop view anymore.
Seems that its a common issue on all the platforms out there. Its not nice not being able to see an artwok fully on desktop.

There is really a lot missing in the 7.1 update and i m wondering how SS got Magnum photographers on board not having a prefect presentation for their images. BUt i assume that was a lot of Jqueries and code for them to run their sites properly.

PLEASE make SS great again for ARTISTS



 
 

I've continued to struggle with this and am now looking at moving to Shopify or another tool. Using Variants has proven to be unmanagable. 

Feel free to try my solution if it fit, Copy to Settings->Design->Custom css,
.products.collection-content-wrapper .products-flex-container .list-grid .grid-item.sold-out { order: 2 } .products.collection-content-wrapper .products-flex-container .list-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; } @media only screen and (max-width: 768px) { .products.collection-content-wrapper .products-flex-container .list-grid { grid-template-columns: 1fr; } .products.collection-content-wrapper .products-flex-container .list-grid .grid-item { width: 100%; } } .products.collection-content-wrapper .products-flex-container .list-grid .grid-item { width: 80%; }

The additional field value is sent over in the confirmation email, I think we have to extract it from there (manually or via coding automation) while waiting for squarespace sort it out in their system

May be you can try
.fe-block-fdf87f3b28856d0d23e5 { position: sticky; top: 30px; height: 1px; } Hope it can help