Jump to content

Squarespace 7.1 CSS to customize opacity in image block collage

Recommended Posts

You can use any color picker to select semi-transparent color to get it hex code and add this snippet to custom css

 

.sqs-block-image .design-layout-collage .image-card {
    background-color: #ffffff8f;
}

image.thumb.png.ddee44f36befdabe635c5ba8937b39ed.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
17 minutes ago, francescalo said:

Hi @bangank36, thank you for your reply.  I add your code on the design CSS, but it doesn't change the opacity of the white rectangle

Screen Shot 2020-11-05 at 10.00.29 PM.png

Try this

.sqs-block-image .design-layout-collage .image-card {
    background-color: rgb(255 255 255 / 56%);
}

 

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
Just now, francescalo said:

it gives me this error
 
 
error evaluating function `rgb`: color functions take numbers as parameters

That custom css is too bad, sorry. Let's use custom code injection instead

Instruction here

<style>
.sqs-block-image .design-layout-collage .image-card {
    background-color: rgb(255 255 255 / 56%);
}
</style>

 

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
7 minutes ago, francescalo said:

just to be cure @bangank36, where I have to copy the injection code?

Have you check the instruction?

Go to Settings->Advanced->Code Injection->Header

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
2 minutes ago, francescalo said:

Just did it... unfortunately it is not working ;-(

 

If you invite me as collaborator I can have a look, bangank36@gmail.com

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
  • 2 months later...
  • 1 month later...
7 minutes ago, lyoder said:

hey bangank36 i also had the same problem and worked through your steps and could not change the opacity.  I even inspected francescalo's page and still could not figure it out.  any chance you could help me out? thanks 

What is your site url

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

@lyoder

Have you tried doing is through the SS interface?

1752066875_ScreenShot2021-03-04at7_06_32PM.png.3eba226805c006adc33b7eb17e57bdda.png

If you click on Card Background and then click in the middle of opacity slider at the very bottom. It's the part with the diagonal lines that is transparent of the left and opaque on the right. That little white circle you see in the middle there is the current setting.

That will change the opacity site wide. If you need to change just one. Then go with the CSS option.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

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.