Jump to content

Changing Color on Inline Image Block Overlay

Recommended Posts

Site URL: https://www.alexanderkarlmartinwilhelm.de/

Hello,

i would like to change the transparent, greyish colour of that overlay (inline image block), but i am not able to locate the right place for that in my design options. I’ve also tried a few custom css options, but i am not even able to identify the right name.

My guessing so far:

.image-caption-wrapper-overlay
.image-block: hover
 

Is it possible to change that colour at all?
Thanks for your support ...
 

Bildschirmfoto 2022-04-19 um 00.16.13.png

Bildschirmfoto 2022-04-19 um 00.22.25.png

Link to comment
44 minutes ago, alexanderkarlmartinwilhelm said:

Site URL: https://www.alexanderkarlmartinwilhelm.de/

Hello,

i would like to change the transparent, greyish colour of that overlay (inline image block), but i am not able to locate the right place for that in my design options. I’ve also tried a few custom css options, but i am not even able to identify the right name.

My guessing so far:

.image-caption-wrapper-overlay
.image-block: hover
 

Is it possible to change that colour at all?
Thanks for your support ...
 

Bildschirmfoto 2022-04-19 um 00.16.13.png

Bildschirmfoto 2022-04-19 um 00.22.25.png

Try

section[data-section-id="623f69725cbd136c43eada1a"] .image-caption-wrapper {
  background: blue !important;
}

Change the color as you wish

Let me know how it goes

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 1 month later...
On 4/18/2022 at 5:11 PM, bangank36 said:

Try

section[data-section-id="623f69725cbd136c43eada1a"] .image-caption-wrapper {
  background: blue !important;
}

Change the color as you wish

Let me know how it goes

I'm needing the same thing but when I placed this in Custom CSS nothing happened.

I'm also wanting to adjust the size or padding of the colored caption box so it's not taking up so much empty space – is that possible?

Link to comment
On 5/25/2022 at 3:39 AM, MattyT208 said:

I'm needing the same thing but when I placed this in Custom CSS nothing happened.

I'm also wanting to adjust the size or padding of the colored caption box so it's not taking up so much empty space – is that possible?

Can you share link to page where you have problem?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
21 hours ago, MattyT208 said:

https://cinnamon-arugula-lbx4.squarespace.com/new-homepage-test-1

yil1TONG4toft*ib

The url doesn't exist. Can you check it again?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
17 hours ago, MattyT208 said:

Sorry, I forgot that it was disabled. Please try accessing it again.

Add to Design > Custom CSS

figcaption.image-caption-wrapper {
    background-color: transparent !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
11 hours ago, tuanphan said:

Add to Design > Custom CSS

figcaption.image-caption-wrapper {
    background-color: transparent !important;
}

 

This worked as far as changing the box color but is there a way to adjust size of caption boxes and also adjust the opacity?

Link to comment
12 hours ago, MattyT208 said:

This worked as far as changing the box color but is there a way to adjust size of caption boxes and also adjust the opacity?

You mean width or height?

You can use rgba color

figcaption.image-caption-wrapper {
    background-color: rgba(0,0,0,0.25) !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
16 hours ago, MattyT208 said:

Both the height and width, if possible. 

Try this new code

figcaption.image-caption-wrapper {
    background-color: rgba(247,148,29,.6) !important;
    max-height: 100% !important;
    top: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
8 hours ago, tuanphan said:

Try this new code

figcaption.image-caption-wrapper {
    background-color: rgba(247,148,29,.6) !important;
    max-height: 100% !important;
    top: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

 

That worked perfectly, thank you.

Link to comment
On 6/3/2022 at 7:24 AM, tuanphan said:

Try this new code

figcaption.image-caption-wrapper {
    background-color: rgba(247,148,29,.6) !important;
    max-height: 100% !important;
    top: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

 

Hello,

I also need to change the overlay background colour to transparent but it doesn't work for me... could you help?

My site URL: https://www.leilaarenou.com/nikki

Thanks a lot

Link to comment
On 6/3/2022 at 12:24 AM, tuanphan said:

Try this new code

figcaption.image-caption-wrapper {
    background-color: rgba(247,148,29,.6) !important;
    max-height: 100% !important;
    top: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

 

So this did allow me to adjust height, placement, color, etc. but it also added scrolling controls to the right side of the caption boxes – is there a way to get rid of those? See attachment.

https://cinnamon-arugula-lbx4.squarespace.com/new-homepage-test-1

PW: yil1TONG4toft*ib

Screen Shot 2022-06-06 at 8.00.33 AM.png

Link to comment
On 6/6/2022 at 3:46 AM, leilaaliel said:

Hello,

I also need to change the overlay background colour to transparent but it doesn't work for me... could you help?

My site URL: https://www.leilaarenou.com/nikki

Thanks a lot

Change .6 to 0

On 6/6/2022 at 9:24 PM, MattyT208 said:

So this did allow me to adjust height, placement, color, etc. but it also added scrolling controls to the right side of the caption boxes – is there a way to get rid of those? See attachment.

https://cinnamon-arugula-lbx4.squarespace.com/new-homepage-test-1

PW: yil1TONG4toft*ib

Screen Shot 2022-06-06 at 8.00.33 AM.png

Use overflow hidden

figcaption.image-caption-wrapper {
    background-color: rgba(231,124,20,.6) !important;
    max-height: 18% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
On 6/10/2022 at 9:33 PM, tuanphan said:

Change .6 to 0

Use overflow hidden

figcaption.image-caption-wrapper {
    background-color: rgba(231,124,20,.6) !important;
    max-height: 18% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden !important;
}

 

This works. However, how do I limit this so it only applies to a certain page? When I pasted this into Custom CSS window it applied it site-wide. When I pasted it into the particular page Code Injection window, it didn't work. Any suggestions?

Link to comment
20 hours ago, MattyT208 said:

This works. However, how do I limit this so it only applies to a certain page? When I pasted this into Custom CSS window it applied it site-wide. When I pasted it into the particular page Code Injection window, it didn't work. Any suggestions?

With code in Page Code Injection, you need to wrap in style tag.

<style>
  figcaption.image-caption-wrapper {
    background-color: rgba(231,124,20,.6) !important;
    max-height: 18% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden !important;
}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
12 hours ago, tuanphan said:

With code in Page Code Injection, you need to wrap in style tag.

<style>
  figcaption.image-caption-wrapper {
    background-color: rgba(231,124,20,.6) !important;
    max-height: 18% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden !important;
}
</style>

 

Thank you, that worked great. I'm still learning 🙂

Link to comment
On 6/15/2022 at 10:46 AM, tuanphan said:

With code in Page Code Injection, you need to wrap in style tag.

<style>
  figcaption.image-caption-wrapper {
    background-color: rgba(231,124,20,.6) !important;
    max-height: 18% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden !important;
}
</style>

 

It worked thanks so much!

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.