Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How to Change the background color of your collage on a collage image block WITH CSS


Nondys

Question

Site URL: https://lindyglow.squarespace.com/

 

Hello,

I'm hoping someone can help me figure out how to change the color of the collage block. I know you can change it in the style editor, but I would like to change it through CSS.

I have two collage blocks on my client's site and I'd like one of them to have a different colored background.

I'm trying to find the code to target it. Here's what I was able to find and come up with: I can't seem to figure out how to put them in order and target that collage block to change its text box color.

.image-card-wrapper
.image-card sqs-dynamic-text-container
.image-title-wrapper
.image-title .sqs-dynamic-text

 

See collage block towards the bottom, I'd like the color to be white so that it doesn't blend in with the pink background.
https://lindyglow.squarespace.com/services 
Password: glow

Link to comment

13 answers to this question

Recommended Posts

  • 0

Use this CSS

div#block-yui_3_17_2_1_1599698725699_50131 .image-card {
    background: red;
}

Find image block id. https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 6/2/2021 at 11:24 AM, IMO said:

What about using an image as background for all collage image blocks, meaning site-wide?

 

Try this

div#block-yui_3_17_2_1_1599698725699_50131 .image-card {
    background-image: url(https://cdn.pixabay.com/photo/2020/12/14/11/18/cat-5830643__340.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
14 hours ago, RolandFuseHub said:

Hi @tuanphan

Would it be possible to change the background of the Image Block Collage Text block on Hover to achieve the below idea?

Cheers,

Roland694690755_ScreenShot2021-09-15at3_33_05PM.thumb.jpeg.c141ac67fa3883f9521269181d0c83f0.jpeg

Possibile. If you share link to page in screenshot, we can give code easier

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 9/16/2021 at 11:16 PM, RolandFuseHub said:

Use this CSS

.design-layout-collage .image-card {
    background-color: red !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 9/20/2021 at 9:43 PM, RolandFuseHub said:

Red when hovering over the Text Card with the text in it. 🙏🏽

It looks like you changed layout. Do you still need help?

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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...