Image Card and Stack blocks on 7.1: No option to add a background colour for the text area

Hello everyone,
Am I missing something?

I have been inside the themes, in the colour settings...
How come in 7.0 we can adjust and change the background colour of the text area on the Image card block and the image stack block. And there is no option to do this on 7.1 without code?

Would be good to hear from Squarespace team or experts... Maybe I am yet to find more layers inside of 7.1!

Thanks!

Have you found in Home > Design > Colors?

I'm also looking for this option everywhere but can't seem to find it. Even in Home > Design > Colors there is no option... anyone has a custom code? 

3 hours ago, KaleaMarine said:

I'm also looking for this option everywhere but can't seem to find it. Even in Home > Design > Colors there is no option... anyone has a custom code? 

If you share link to page where you use image blocks, we can check easier

Hello there. I also have the same problem. Only option I found is to add a background to the title. I do not understand why this option was removed since 7.0.

I find the Image block hard to use without this option.

On 1/11/2021 at 2:48 AM, one-wheeled-driver said:

Hello there. I also have the same problem. Only option I found is to add a background to the title. I do not understand why this option was removed since 7.0.

I find the Image block hard to use without this option.

 

If you share link to page where you use image. We can help easier

Hi all,

I came upon a solution by trial and error. 

The following allows you to apply a background to all Image Card blocks, including the stacked configuration. You'll have to look up the hex code for the color you want to use of course.

I then found that the text inside said cards was too close to the edges - something that isn't as noticeable when there is no background; it's especially apparent on mobile. I therefore added a bit of padding, which you can see in the code below (excuse my syntax).

Hope others are helped by this! 
 

.design-layout-card {
  background: #FFFFFF;
}

.design-layout-card .image-card>div {
    padding-left: 5%;
    padding-right: 5%;
	padding-top: 5%;
	padding-bottom:5%;
}
}

I think I found the answer in a blog. For this code you will need to set the image stack settings to:

// Stack image
.sqs-block-image .design-layout-stack .image-card-wrapper {
    background: #fff !important;
}
  .sqs-dynamic-text-container {
    padding-left: 8% !important;
    padding-right: 8% !important;
    padding-top: 6% !important;
    padding-bottom: 8% !important;
  }

Source

Worked for me!

Hey, y'all!

I'm having this same issue, BUT I'd like to specify different background colors by:

• Image Type (Poster vs. Stack, for instance)
• And, by Color theme (Lightest 2 vs. Darkest 1, for instance).

INSTEAD of applying one color background for all Cards across the whole site / every Color theme. 

Here's an example:

On my Home page, I've colored the background of the Image > Stack blocks white (where you see Free Newsletter, Paid Newsletter, Podcast – soon!) using this code:

.image-block-outer-wrapper.image-block-v2.design-layout-stack {background:#fff;}

And, on my Blogs, I've turned the Image > Card block backgrounds white, as well, using this code:

.image-block-outer-wrapper.image-block-v2.design-layout-card {background:#fff; padding:35px;}

This might help many of you here!

Problem is, that makes Stacks and Cards have white backgrounds across the whole site.

INSTEAD, I'd like to know how to specify it a step further, by specific Color theme. Like, on these blogs (Darkest 2 Color palette), the background of the page is black, so having a Card or other Image type with a white background is exactly what I want.

But on this set of blogs, the page color is White (Lightest 2 Color theme), so I'd like to be able to turn the Image backgrounds of any kind (Card, in this case, if you scroll to the bottom to see it) the black color I use in my Color palette. While I know how to do Inspect Element and find the coding for the individual block on that specific page, I'd rather just find the code to do it across an entire Color Theme, so that I don't have to add custom code to every new blog.

It seems silly (I agree with others) that there isn't a native way to change the background color of different Image block types across each color theme. Even more silly because the background of a block on one color theme probably isn't going to be the one you need on the contrasting color theme (dark bg vs light bg, as an example). 

Does anyone know how we might do it with custom code?