Styled borders around individual summary block items?

Site URL: http://www.kassidysherburne.squarespace.com

I created a page with border boxes around each image item, and it's just a bit cumbersome to hand off to a client. I am hoping to find a way to recreate that but with a summary block, so that it will basically auto-populate. I have attached an image of what I have now and what I am basically hoping to achieve with a summary block. Does anyone know any code for this? I keep striking out. It would repeat on several pages also.

If you need to access the website, you can see it at http://www.kassidysherburne.squarespace.com using password: hello. It's a brine template.

3 hours ago, sendmaddie said:

I created a page with border boxes around each image item, and it's just a bit cumbersome to hand off to a client. I am hoping to find a way to recreate that but with a summary block, so that it will basically auto-populate.

Can you point out the page where you've added the grid summary block?

12 hours ago, paul2009 said:

Can you point out the page where you've added the grid summary block?

 

Hi Paul! I just actually sorted it out. But if you want to see, it's at the bottom of of this page: https://kassidysherburne.squarespace.com/journal-see-all

Give this a shot, if it works you can change the color and the thickness of the border. Goes into custom css. 

.sqs-block-summary-v2 .summary-item {
border-style: solid;
  border-color: white;
  border-width: 2px;
}

On 2/13/2021 at 10:07 AM, derricksrandomviews said:

Give this a shot, if it works you can change the color and the thickness of the border. Goes into custom css. 

.sqs-block-summary-v2 .summary-item {
border-style: solid;
  border-color: white;
  border-width: 2px;
}

Hi Derrick, this creates a boarder around whole item, including the caption. How can I exclude the caption?

Thanks

I found the answer! 🙂

Would you share it with us?

I'd love to know, too! I'm looking for the same fix for images on a client's site. 

On 12/15/2021 at 11:25 PM, Poppyseeds said:

I'd love to know, too! I'm looking for the same fix for images on a client's site. 

If you share link to page where you added summary, we can take a look

3 hours ago, tuanphan said:

If you share link to page where you added summary, we can take a look

Tuan to the rescue!

Site: https://grouse-copper-tl4m.squarespace.com/config/

PW: jellybeans

There are individual images at the top, and a gallery at the bottom. 

On 12/18/2021 at 1:04 AM, Poppyseeds said:

Tuan to the rescue!

Site: https://grouse-copper-tl4m.squarespace.com/config/

PW: jellybeans

There are individual images at the top, and a gallery at the bottom. 

jellybeans

https://grouse-copper-tl4m.squarespace.com/?noredirect

incorrect password

18 hours ago, tuanphan said:

jellybeans

https://grouse-copper-tl4m.squarespace.com/?noredirect

incorrect password

Tuan, would you try it again please? 

I took the password protection off, then added it back in.

On 12/20/2021 at 9:11 AM, Poppyseeds said:

Tuan, would you try it again please? 

I took the password protection off, then added it back in.

You mean 3 image blocks on the top or Gallery images on the bottom?

On 12/22/2021 at 1:12 AM, tuanphan said:

You mean 3 image blocks on the top or Gallery images on the bottom?

Either or both!

On 12/20/2021 at 9:11 AM, Poppyseeds said:

Tuan, would you try it again please? 

I took the password protection off, then added it back in.

Add to Design > Custom CSS

/* homepage borders */
div#page-section-61bcc172b48a4d10704a2ff0 .image-block>div {
    border: 2px solid black;
}
[data-section-id="61bcc172b48a4d10704a2ff5"] figure {
    border: 5px solid black;
}

JUST WHAT I NEEDED! 

You are amazing. I couldn't find this anywhere.

Thank you!

On 12/25/2021 at 1:30 AM, tuanphan said:

Add to Design > Custom CSS

/* homepage borders */
div#page-section-61bcc172b48a4d10704a2ff0 .image-block>div {
    border: 2px solid black;
}
[data-section-id="61bcc172b48a4d10704a2ff5"] figure {
    border: 5px solid black;
}

 

Figured it out.

Also, here is the code for blog sections too

.sqs-gallery-container .img-wrapper {
  border: 1px solid black;
}

.blog-item .image-wrapper {
  border: 1px solid black;
}