⚠️ IMPORTANT CSS UPDATE ⚠️ When logging into Squarespace, if you see the word "Website" at the top of your menu, you are using their new internal navigation! To edit the CSS of your Squarespace website, click on the word "Website" and scroll to the bottom of the list of pages. Here you'll see "Website Tools" - click on that option and select "Custom CSS" to open the CSS panel and add your code here. For more information, watch this tutorial: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-euJqHXs_L1M.html
Do you by any chance know how to make the image block background colour semi-transparent, like it is for the gallery section is without the opacity line? I've tried adding a line to change the opacity but that doesn't work as intended, and I'm totally stumped.
@@InsideTheSquare I followed the RGBA directions in your link above but it's not working for image blocks. No matter what value I assign the last digit, the opacity won't reduce.
Do you by any chance know how to make the Image Block background colour slight transparent like the Gallery Section is without the opacity line you added? I've tried adding a line to change the opacity but that doesn't work as intended. Hope you can help as I'm totally stumped.
Intersting question! A different lightbox, like a form, or product quick view, does have different selectors. I wanted to comment with the selector to hep you with your project, but summary blocks don't have a lightbox feature, so I'm not sure how to help 🫤 feel free to email me a link and I'll take a look at what you're using to track down the code you need: support-at-insidethesquare.co
@@InsideTheSquare Should've mentioned, I'm also using the Universal Filter plugin so, I just reached out to them - it's probably controlled on their side.
All of this worked for my lightbox except the arrows. Any tips to change the color of the arrows as well as remove the hover feature so that they always show. Thanks!
I had the same issue with the gallery lightboxes embedded in my blogs, and I was able to get them to change with this code (I also gave the arrows and the close symbol a background color since that's what the other arrows on my site look like - semi-transparent square with white arrow) - also, fair warning, I am not an expert just doing my best with what I learned from Rebecca over the past year (trial and error plus tutorial plus W3 school). I have her cheat sheet on Notion - it's awesome. .yui3-lightbox2 a.sqs-lightbox-next { color: #ffffff; background-color: rgba(0,43,73,0.5); } .yui3-lightbox2 a.sqs-lightbox-previous { color: #ffffff; background-color: rgba(0,43,73,0.5); } .yui3-lightbox2 a.sqs-lightbox-close { color: #ffffff; padding: 5px; background-color: rgba(255,255,255,0.25); }
I'm having trouble with a Grid Gallery Lightbox - the caption inside the lightbox is dark and so is the text so it's unreadable! Is there a code to target the font color in lightbox or the caption background color? Thanks!
Great question - and yes! This code will isolate the meta on the background to make it pink, and the second code will change the text to red. .sqs-lightbox-meta { background:pink!important; } .sqs-lightbox-meta * { color:red!important }
It should be the last option under image effect & overlay - if you don't see it, reach out to Squarespace support ASAP because something is wrong with your program!
