Beyondspace

April 16

Too bad that the Source URL on events does not have option to replace link like Blog post 😕

April 16

On 3/21/2024 at 5:55 PM, Angus_MacKinnon said:

Hi @tuanphan

Thanks for the reply. I managed to sort it with this plugin: https://www.beyondspace.studio

Thanks for supporting us! The custom grid work beautifully with Connect lightbox feature

April 16

On 4/12/2024 at 6:32 PM, MumbJumbo said:

Hi all

I know how to add zoom on hover to one product page at a time.

Does anyone know how to do this to all product pages at once?

Any help much appreciated.

Thanks

What is your site version?

April 16

On 4/10/2024 at 3:42 AM, alexislitsch said:

Hi,

I am a painter currently switching over my website platform from Show.it to Squarespace. I really appreciated Show.it for it's drag and drop website features making anything I had in mind customizable, but chose to switch to Squarespace for the friendlier e-commerce.

I am having trouble achieving what I'd like to do with my gallery portfolio. I like the gallery grid view and want to feature captions, but only have the captions appear when you click on the image in the Lightbox view. I found a solution to my own problem from a forum where a user provided helpful code to inject in the CSS. The other night, I did this and thought I solved the problem. When I returned to my website a couple days later, It was gone. It wouldn't fix even when I went through the same steps of adding this code back in.

I hope this makes sense, and if anyone can help in this situation, I would be extremely grateful.

here is my website will be transferring from Show.it and here is my Squarespace website I am currently working on.

I will attach the code I was working from in case that is helpful:

<script>

document.addEventListener("DOMContentLoaded", function () {

// configure the classes we're looking for

const listClass = "div.gallery figure";

const linkClass = "div.gallery-strips-item-wrapper a, div.gallery-grid-item-wrapper a, div.gallery-masonry-item-wrapper a";

const lightBoxCaption = "lightbox-caption";

const lightboxSlideSelector = "div.gallery-lightbox-list figure[data-slide-url='{0}']"

// select all gallery elements, find their captions

// if they exist then extract the slide id and add a new caption element

// to the lightbox slide

const n = document.querySelectorAll(listClass);

for (var i = 0; i < n.length; i++) {

const a = n[i].querySelector(linkClass);

const c = n[i].querySelector("figcaption");

if (a && a.href && c) {

const id = a.href.split("=")[1];

const lbSelector = lightboxSlideSelector.replace("{0}",id);

const lb = document.querySelector(lbSelector);

const cp = document.createElement("figcaption");

cp.className = lightBoxCaption;

cp.innerHTML = c.innerHTML;

lb.appendChild(cp);

}

}

});

</script>

<style>

figcaption.gallery-caption {

display:none;

}

figcaption.lightbox-caption {

position:absolute;

bottom:-80px;

color:#5F5F5F;

text-align:center;

width:100%;

padding-bottom: 10px;

}

</style>

Looks like you solved it

Btw: here is the dedicated playground url for your site with lightbox studio on

PREVIEW

April 16

On 3/14/2022 at 10:23 PM, CooperBlack said:

Since this thread was already started, I'll add to it instead of a new one.

My client asked if images in the gallery slideshow can be zoomed/enlarged in the mobile version of the site:

https://raccoon-oarfish-szer.squarespace.com/projects

Pwd: Largeosity

So far I attempted to making Gallery Section Slideshow lightboxify, but the results it not ideal yet (the image order is messed up), but it can work perfectly on Slideshow Gallery block, you take a look at this

https://beyondspace-showcase.squarespace.com/lightbox-demo

Step-by-step tutorial can be found here

April 16

In case someone is looking for step-by-step tutorials

https://www.iorad.com/player/2365523/Squarespace---How-to-Changing-your-store-s-currency

April 16

4 hours ago, Brutalist151 said:

site: www.springsteel.nyc

pw: 1986

I'm completely new to website coding and just trying to make some basic visual customizations to my site. Been trying to just wing it by copy / pasting and trying to reverse-engineer CSS code from various places but not finding what I need. I also bought a plugin thing called "Super Grid Gallery 2.0" from ghostplugins.com and while it does the things I want, it comes with some features that I don't want and I can't figure out how to remove them without the whole plugin breaking. I've talked to support but they basically just say that's how it's built and they don't offer further customizations right now.

So I'm just wondering if anyone with more experience can take a look and let me know if there's a way to edit the code to do what I need... or if this is a bigger job that really justifies paying someone or something please let me know.

The main reason I got this plugin was to be able to get the hover-over actions on the video where the video titles show up and the thumbnail turns orange. It uses Custom CSS, and header and footer code injection with I think some javascript and I have no idea how to deal with that. There were some other customizations I wanted to make to the hovering actions that weren't initially provided so I copied the whole code referenced in a linked stylesheet (I think that's what it is?) directly into the Custom CSS box and found some further modifications I could make to things like how long stuff fades in, changing colors of some extra elements, etc. Nothing that crazy...

So basically I have everything stylistically the way I want it on the site now, except that I want to keep the default Squarespace lightbox video player pop-up function instead of this custom video player animation from the Ghost plugin that makes the video player open within the window at the top of the page while leaving the menu and all the video thumbnails etc visible. I want it all to go black and pop out a full-page embedded Vimeo video player like it used to. I just need a way to remove that whole custom action without affecting anything else. I can provide more info if anything is unclear...

I do want to also keep the custom stylizations I put in the navigation links as well, that was a separate bit of Custom CSS from Ghost.

A few other small things:
- I can't figure out what code to use to get the titles over the video thumbnails to fade in like the orange color does, instead of just appearing instantly on mouse-over.
- I also notice there's like a weird greenish color that comes on at maybe like 20% opacity over the video thumbnail that's been clicked on and opened in the video player. But maybe I don't need to fix that if I'm able to remove the whole unwanted video player animation.
- I notice some random bit of the CSS code ("/* hide play icon */...") appears for a microsecond at the top left of the window when I load the webpage... is there a way to make that not happen? I have a feeling it's because I copied a lot of code into Custom CSS, but I don't even think that's in there anymore, it's from an earlier bit of code I had copy pasted in there and then deleted. Weird...

If anyone can help or point me to help it's much appreciated. And please also let me know if I did anything uncouth there by messing with this custom plugin code... I mean I just want to stylize my website the way I see it in my head, which is barely that different from a basic template, but nothing I'm able to find on these forums or anywhere else seems to work the way I need. I feel like this should be simply, but I have zero coding experience and Squarespace's customization tools seem to have some really agonizing limitations. Maybe this is more complicated than I realize and I should be paying someone? Open to advice.

Thanks

For the paid custom plugin, I think you should ask the author to get more support and advice

April 16

1 hour ago, KatherineTurner6 said:

Hiya!

Looking for assistance in re adding a button to my header navigation on desktop.

I added custom css to make the 'mobile' hamburger appear on desktop.
But it removes the button that I previously had. I would like the button on the right side and the hamburger menu on the left.

Thanks,

Can you share your URL so we can check it easier?

April 16

Can you share direct links to the pages which have CTA buttons?

April 16

On 3/20/2024 at 2:40 AM, cheetah-octopus said:

Hi there,

I'm wanting to show image captions in Lightbox but have them hidden otherwise. There are many galleries and I'd like this rule to be applied to all.

I can see that many have wondered about this and I've gone through old threads trying out suggested code but I can't get it to work. This may be because I'm only using a Personal account, but I'm hoping it's still possible. It also may be because I don't know that much about coding.

Site: www.lonetratt.com

Thanks so much for any advice!

I made a dedicated playground url for your site to test with Lightbox Studio ,we had option to Hide 7.1 section caption

April 16

11 hours ago, Dev101 said:

I have a javascript code that currently pulls data from a Google sheet file and creates cards related to events, for some reason, the image src doesn't show the images, it shows the alt text only. When I logged the URL to my console, I got a URL related to the page but not the URL of the images, is there a way I can fix this?

You should share your site URL and the code (if the author of it allow to) so we can know exactly the issue

April 16

On 12/20/2023 at 4:50 AM, MaryICCM said:

.... It's magically fixed now, but I have no idea why. Is there anyone who has had this happen to them? Any reason why it might have happened??

Looks like a glitch of Squarespace, lol

Quote

The height of Slideshow gallery blocks is set by the height of the widest image. The block considers the widest image to be the one with the widest aspect ratio.

April 15

20 minutes ago, nitzin said:

Hi,

My site currently has Primary/Tertiary Buttons set to be text with a simple underline below it (including form buttons).

Is there a way to customize this so that instead of the line, the buttons have a custom icon centered below the CTA button?

Attached images below:

Can you share your site URL so we can check it easier?

Posted April 15 · April 15

14 hours ago, Jen-X said:

@Beyondspace I would prefer to keep it compact like it is currently, just centered. Is that possible? Thanks!

We will deactivate the style for parent element and set style detail for child elements to get the same result

.blog-item-author-profile-wrapper {
  width: 100%;
  max-width: unset;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: none;
}

.blog-item-author-profile-wrapper > a:first-child {
  padding: 15px 15px 0 15px;
  box-sizing: border-box;
  border-top-left-radius: 15px 15px;
  border-top-right-radius: 15px 15px;
  background: #eeebeb;
  width: 530px;
}

.blog-item-wrapper .author-bio {
  margin: 0;
  padding: 1rem 15px 15px;
  width: 530px;
  background: #eeebeb;
  box-sizing: border-box;
}
.blog-item-author-profile-wrapper .author-website {
  margin-top: 0;
  padding: calc(1rem + 15px) 15px 15px;
  box-sizing: border-box;
  border-bottom-left-radius: 15px 15px;
  border-bottom-right-radius: 15px 15px;
  background: #eeebeb;
  width: 530px;
}

Testing result

Let me know how it works on your site

April 15

On 4/20/2022 at 4:53 PM, jamiewdwright said:

@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!

Is this what you want? If the event has sourceUrl attached, it links the title to the source

April 15

On 4/14/2024 at 6:19 AM, apom said:

I would love it if someone could help me solve this puzzle!

I am trying to add a hover effect to the MENU ITEM TITLES (i.e. Nommad Chat) with a hyperlink on the following MENU BLOCK.

I had solved it, accidentally didn't save it and now I have no idea how I did it and can't make it work again. NERVE-WRACKING.

I'm attaching a screenshot of some code that I had been playing around with and that had somehow worked, but I'm not sure what I'm missing now.

Thank you!

The code within /*---code---*/ on your screenshot would be inactive. you can remove it and try again

April 15

On 4/14/2024 at 6:25 AM, erikapruett said:

Hi!

I am designing a website. I am trying to get the button animation to look like this website:
https://www.mcgeeandco.com/

It works when the button is on fill, but I am trying to figure out how to get the animation to fit inside the box when the button is set to fit.

My site: https://purple-gar-wesk.squarespace.com/?password=demo

Here is my code:

.sqs-block-button-element--medium {
border: 1px solid #515151 !important;
transform: perspective(0p);
color:var(--primaryButtonBackgroundColor) !important;
}

.sqs-block-button-element--medium:before {
content: "";
position: absolute;
display: flex;
top: 0;
right:0;
bottom:0;
left: 0;
z-index:-1;
background: #a97d6E;
transform: scaleY(0);
transform-origin: 50% 100%;
transition: 0.4s;
}

.sqs-block-button-element--medium:hover {
color:white !important;
border: 1px solid #a97d6e !important;
opacity: 1 !important;
}
.sqs-block-button-element--medium:hover:before {
transform: scaleY(1);
}

Would love help! Thank you!

- Erika

You can try this code

.sqs-block-button-element--medium {
  border: 1px solid #515151 !important;
  transform: perspective(0p);
  color: #515151 !important;
  position: relative;
}

.sqs-block-button-element--medium:before {
  content: "";
  position: absolute;
  display: flex;
  top: 0;
  right:0;
  bottom:0;
  left: 0;
  z-index:-1;
  background: #a97d6E;
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: 0.4s;
}

.sqs-block-button-element--medium:hover {
  color:white !important;
  border: 1px solid #a97d6e !important;
  opacity: 1 !important;
}
.sqs-block-button-element--medium:hover:before {
  transform: scaleY(1);
}

Let me know how it works

April 14

9 hours ago, cannondalesupersix said:

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

What is your URL site?

April 14

5 hours ago, PHASE44 said:

Hello, I'm a first-time user of Squarespace and am building my first site.

All is going well so far, except for the masonry photo gallery.

On desktop, I have it set to 3 columns and on mobile, I want to show 1 column, but it doesn't change to 1 column without also changing it to 1 column on desktop.

How can I leave the desktop as 3 columns but have the mobile as 1 column?

I have seen some custom code on this form as someone seemed to have the same issue, but I didn't want to copy it in case it was site specific or something.

Also, the vertical spacing between the images doesn't seem to work and I would like to increase the spacing slightly so it looks more pleasing.

If anyone can help with the required custom code, I would be very grateful.

Thank you.

Can you share your URL site so we can check it easier

Posted April 14 · April 14

4 hours ago, Jen-X said:

How can I center my author profile in my blog posts horizontally? Right now they are left justified. Thank you!

https://www.jenxwebdesign.com/blog/squarespace-blogs-build-trust-audience-google

Is it ok for this style?

April 14

14 hours ago, fehmiu said:

Thank you for the response, there are gaps in between at mine, and how can I fix longer texts as Mercedes-Benz did with different font sizes?"

I'll check on it

ec25 · April 13

10 hours ago, ec25 said:

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/

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

April 13

My testing

April 13

4 hours ago, fehmiu said:

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

try the following custom Css code

@media only screen and (max-width: 767px) {
  #collection-65bfcd1f85c33b021e79fb7f .gallery-masonry-item {
    position: relative !important;
    transform: none !important;
    width: 30% !important;

  }

  #collection-65bfcd1f85c33b021e79fb7f .gallery-masonry-wrapper.gallery-masonry-list--ready {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
  }

  #collection-65bfcd1f85c33b021e79fb7f .gallery-masonry .gallery-masonry-item[data-loaded] img {
    width: 100% !important;
  }

  #collection-65bfcd1f85c33b021e79fb7f .gallery-masonry-item-wrapper {
    height: auto !important; 
  }
}

Let me know how it goes

April 13

1 hour ago, JulieZ said:

Hi guys!

It's my first time posting here and I hope somebody can help me! 🤗

I have to add a 3rd-party button on my product pages (clothing) which will enable my customers to "get measured". I got the code from the software company, but I don't know how to add it to my separate product pages only (they only provide a guide for shopify websites) . If I add it to the header in the code injection it (obviously) appears in the header in all pages. What to do?

Thank you in advance and great day!

Julie

Sqs allows you to add code on separate page

Hope it can help

Forums

Gallery

Blogs

Events

Store

Downloads

Profiles

Posts posted by Beyondspace

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources