Creating Border about Lightbox Custom CSS

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?

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

Site URL is https://papaya-lemon-3zw7.squarespace.com/

3 hours ago, davidjcook10 said:

Site URL is https://papaya-lemon-3zw7.squarespace.com/

What 's your password?

 

Site is davidjcookphotography.com password is davidjcook

Is it the result you want to achieve?

 

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

 

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

 

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.

 

 

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 December 16, 2021 by bangank36

 

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.