Jump to content

Image collage - card outline

Go to solution Solved by CherryTree,

Recommended Posts

  • Replies 6
  • Views 384
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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

Link to comment

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

Link to comment
  • Solution

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.

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.