Add background overlay to slide-in

Hi @chugs

I hope you are doing good today.

In Appearance settings please set up the following:

1. Layout – Default

2. Customize Elements -> Background Image -> Background Size -> Cover

3. Colors -> Custom -> Featured Image (if used) as transparent

With that Background Image should cover whole slide in box

Kind Regards,
Kris

Sorry I don’t think I made myself clear.
In a typical pop-up I can see a overlay on the page – https://postimg.cc/CZGCMMw9
Which is absent in a Slide-in – https://postimg.cc/VJ34LHn0

How can I have the same overlay in a slide-in?

I am using
Twenty Twenty One V 1.6
Hustle – V 7.4.13.1
with no other plugins installed.

Hi @chugs

Slide-ins don’t have such overlay. A bit of CSS can “visually” simulate it though:

.hustle-slidein {
	background:rgba(55,55,55,0.5);
}

You’ll want to adjust the color (parameters in rgba are, accordingly: Red, Green, Blue color values and the last one is opacity – transparency) but note please that, unlike with popup, this overlay will not prevent clicking on elements on the page.

If you want to use image instead of semi-transparent color, you can use this version of above CSS

.hustle-slidein {
	background:rgba(55,55,55,0.5);
	background:url('FULL_URL_TO_IMAGE_HERE');
	background-size:cover;
}

Note: you would need to add this as custom CSS to the site, on “site”/theme level rather than directly in custom CSS of the slide-in.

Kind regards,
Adam

Hi @chugs,

Since we haven’t heard from you for a while. I’ll mark this thread as resolved for now. Please feel free to re-open the thread if you need further assistance.

Best Regards
Nithin