Jump to content

Creating Border about Lightbox Custom CSS

Recommended Posts

2 hours ago, davidjcook10 said:

I'm looking for a way to create a border around an image appearing in a Lightbox.  I'm assuming there is some custom CSS that will do this,  but I have been experimenting and searching for options and haven't had any luck yet.

 

Ideas?

What is your site url? We can help having a look

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
3 hours ago, davidjcook10 said:

What 's your password?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Is it the result you want to achieve?

image.thumb.png.694ee964506f6f0c11f2daca6edc01d1.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
4 hours ago, davidjcook10 said:

 

Yep, that's essentially it.  I probably want a wider border, but that's basically what I am looking at

 

Try adding to Home > Design > Custom Css

.gallery-lightbox-list:after {
  content:'';
  display: block;
  width: 90vw;
  height: 90vh;
  position: fixed;
  border: 1px solid #fff;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

 

Thanks.   It did work, mostly.  I like it better than what I had, but it's one step short of what I want.  Rather than the border being a fixed rectangle that is around any possible image in the lightbox (thus the large width and height in your suggested CSS),  I am really trying to get the border to be around just the image. where the width and height would vary based on the size of the image in the lightbox.  If a different size image appears in the lightbox,  the border will also change size so the border is around the image itself,  not a fixed size border that encloses all possible images in the lightbox.

I experimented with the Custom CSS you provided (thanks for that) and my guess is that it may not be possible.

 

Thanks again for this CSS code,  I like it better than what I had.

 

 

Link to comment
2 hours ago, davidjcook10 said:

 

Thanks.   It did work, mostly.  I like it better than what I had, but it's one step short of what I want.  Rather than the border being a fixed rectangle that is around any possible image in the lightbox (thus the large width and height in your suggested CSS),  I am really trying to get the border to be around just the image. where the width and height would vary based on the size of the image in the lightbox.  If a different size image appears in the lightbox,  the border will also change size so the border is around the image itself,  not a fixed size border that encloses all possible images in the lightbox.

I experimented with the Custom CSS you provided (thanks for that) and my guess is that it may not be possible.

 

Thanks again for this CSS code,  I like it better than what I had.

 

 

Does it makes sense to you? just ignore the square border you have already applied before

 If it is the result you want to achieve, you can replace my previous code to the following one
#item-615b690be8de6c2329c7c2bd .gallery-lightbox-item img {
  border-radius: 50%;
  border: 1px solid #fff;
  width: unset !important;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

Support me by pressing 👍 if this useful for you

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

 

Thanks so much.  This almost works perfectly.  The border is around just the image, which is what I wanted, so check there.  I don't want a rounded border so I set the border-radius to 0.  Check there.  The last small detail is that the border only appears on the left and right side of the image, not the top and bottom.  If I adjust the second translate property to -49% I can get the border on the left, right and top, but not the bottom.  Similarly,  if I set the second property to -51%, I get a left, right and bottom border, but no top.

Ideally I'm looking to get a border on all sides of the image with a border radius of 0.

Thanks for all your help with this.  It's already a big improvement and I am very grateful for your solutions.

 

 

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.