Jump to content

Customizing the lightbox "X" for IMAGE lightboxes

Recommended Posts

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!
 

lightbox-x-issue.jpg

Link to comment
  • 1 year later...
  • 9 months later...
  • 2 months later...
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.

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (contain affiliate links)


 

Link to comment
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!!

Link to comment
1 hour ago, AT76 said:

That worked great, thank you!!

You're welcome! 

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (contain affiliate links)


 

Link to comment

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;
}

image.thumb.png.5a9f72233c912c84ee460442a5580749.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

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.