Jump to content

Image collage - card outline

Go to solution Solved by CherryTree,

Recommended Posts

Posted

I would like to make the cards (not the images) have an outline when I use image:collage. I don't want to do this block by block; I want code that will make all of them have that outline. Any ideas?

  • Replies 6
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Posted

Can you please share site url?

Hi ! I am Paramjeet kaur Top rated SquareSpace Web Designer and Web Developer with SEO For Web Sites. Working Now As freelancer With lowest Rate. Rate $20 per hour.  Till date, I have created over 300 + websites in Squarespace.  Contact Me    Email

Posted
3 hours ago, CherryTree said:

https//www.cherrytreeinteriordesign.com

.fe-block-0f1b481d6096757f0edf {
  border-style: solid;
  border-color: red;  /*change color here*/
}

Use class .fe-block check attachment 

Screenshot 2024-08-18 105252.png

Hi ! I am Paramjeet kaur Top rated SquareSpace Web Designer and Web Developer with SEO For Web Sites. Working Now As freelancer With lowest Rate. Rate $20 per hour.  Till date, I have created over 300 + websites in Squarespace.  Contact Me    Email

Posted

But won't that just be for a specific block? I want to have it for all blocks like that, because there are too many and I don't have the time to specifically target each one.

Posted

I'm trying to make the collage text look like the attached photo for all of them. It's for my blog, so it's classic editor. Each blog post has 8-10 photos and is ongoing, so it will not work to do it block by block. I found a tutorial that almost works, but it's assuming that the caption be larger than the photo (which I don't want), and something in it is broken and makes the image disappear anyway. The almost-code is here: https://insidethesquare.co/squarespace-tutorials/collage-image-borders

I need something like that in that it applies to all the blocks universally, but it needs to look like the attached photo instead.

collage border.jpg

  • Solution
Posted

I finally figured it out!

 

//image collage outline//
.sqs-block-image .design-layout-collage .image-card {
border:1px solid #000

.sqs-block-image .design-layout-collage .image-card {
background:#f2f1ec!important;

 

That gave me a card background that matched the webpage background, so that I would have some solid overlap. But if you want the entire caption background to be transparent, just replace the background hex code with transparent.

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.