Customizing the lightbox "X" for IMAGE lightboxes

Greetings Community, 

This is my first forum post.

Nearly ready to launch a client website (Squarespace v 7.1), with one small but critical caveat. We really need the “X” that closes IMAGE lightboxes to be black, bold, a little larger, and ideally accompanied by the word “CLOSE” next to the X. (note this is for IMAGE lightboxes, not galleries etc)

The default X is so greyed out and tiny that several betatester friends have gotten “stuck” in a single image lightbox without realizing the X was even there! Only adjustment on front end is to make the lightbox white or black. Given my client’s site a photography site, this is really high-priority for us to adjust, and the last bit before launch.

Anyone know a global tweak that can make this adjustment to all IMAGE lightboxes? Would greatly appreciate any help! Of note is I’m a front end-designer who does NOT do any custom CSS, so being very explicit where to insert any code etc would be so helpful too. Thanks so much! Appreciate it!
 

Can you share site url? We can give the code to solve.

Is there a solution to this? I'm also looking to make the X darker or bigger.

Thanks!

L

On 10/6/2022 at 8:34 PM, LCerdaDesignHelp said:

Is there a solution to this? I'm also looking to make the X darker or bigger.

Thanks!

L

If you share link to page where you have problem, we can help easier

On 11/21/2020 at 9:57 AM, tuanphan said:

Can you share site url? We can give the code to solve.

Also looking for a fix for this -- X is far too small. Thanks!

On 8/8/2023 at 1:25 PM, artgirl81 said:

Also looking for a fix for this -- X is far too small. Thanks!

Hi,

Need site url to check easier

On 10/8/2022 at 5:09 AM, tuanphan said:

If you share link to page where you have problem, we can help easier

Hi! Also looking to make the X darker and slightly larger on all portfolio pages images, please see example:

https://altatseng.com/play/inside-out-project-portrait-photography

5 hours ago, AT76 said:

Hi! Also looking to make the X darker and slightly larger on all portfolio pages images, please see example:

https://altatseng.com/play/inside-out-project-portrait-photography

Hi, try adding the below to Custom CSS?

// style lightbox close button
.yui3-lightbox2 .sqs-lightbox-close {
	color: red !important; // the colour you want
	scale: 2 !important; // make it bigger
	translate: 10px 10px !important; // move it away from the edges after scaling
}

Let me know how it goes.

22 minutes ago, melody495 said:

Hi, try adding the below to Custom CSS?

// style lightbox close button
.yui3-lightbox2 .sqs-lightbox-close {
	color: red !important; // the colour you want
	scale: 2 !important; // make it bigger
	translate: 10px 10px !important; // move it away from the edges after scaling
}

 

Let me know how it goes.

That worked great, thank you!!

1 hour ago, AT76 said:

That worked great, thank you!!

You're welcome! 

In case someone needs to accompany it with Close text

.yui3-lightbox2 .sqs-lightbox-close:after {
    content: "Close";
}
.yui3-lightbox2 .sqs-lightbox-close {
    color: #000 !important;
    right: 50px;
    translate: 0px 4px !important;
}