Support Forums

Support Online : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Add coloured overlay to slideshow images

Featured Lock Resolved Task
Hi Guys,

I've managed to add a linear gradient to the internal pages of this site
See an example here - http://69.46.29.42/~tfspaintingcom/cms/index.php/about-us

by adding to my custom.css

.sp-page-title:after {
background-image: -webkit-linear-gradient(137deg,#9870c6 0%,#3d2a63 100%);
background-image: -moz-linear-gradient(137deg,#9870c6 0%,#3d2a63 100%);
background-image: -o-linear-gradient(137deg,#9870c6 0%,#3d2a63 100%);
background-image: linear-gradient(137deg,#9870c6 0%,#3d2a63 100%);
opacity: .7;
}



But I can't for the life of me figure out how to also allocate this to the homepage. I've tried all different variations of sp-main-body:after, sp-main-body:before and many other divs inside this, but nothing is working??? I've even tried adding custom div overrides in the site.php but just can't seem to make it work

How am I able to add a coloured overlay to images in the slideshow?
Any help or a pointer in the right direction would be greatly appreciated.

5 Answers

Sifat - Staff

More than a month ago #Permalink
Hi,
Thanks for your query. Please use this css instead to get the background color you are trying to achieve in your home page slider.

.sppb-slide-item-bg {
background-image: -webkit-linear-gradient(137deg,#9870c6 0%,#3d2a63 100%) !important;
background-image: -moz-linear-gradient(137deg,#9870c6 0%,#3d2a63 100%) !important;
background-image: -o-linear-gradient(137deg,#9870c6 0%,#3d2a63 100%) !important;
background-image: linear-gradient(137deg,#9870c6 0%,#3d2a63 100%) !important;
opacity: .7;
}



-Best Regards

Peter Dowse

More than a month ago #Permalink
Hi,
Thanks for your query. Please use this css instead to get the background color you are trying to achieve in your home page slider.

.sppb-slide-item-bg {
background-image: -webkit-linear-gradient(137deg,#9870c6 0%,#3d2a63 100%) !important;
background-image: -moz-linear-gradient(137deg,#9870c6 0%,#3d2a63 100%) !important;
background-image: -o-linear-gradient(137deg,#9870c6 0%,#3d2a63 100%) !important;
background-image: linear-gradient(137deg,#9870c6 0%,#3d2a63 100%) !important;
opacity: .7;
}



-Best Regards


Hi Sifat,

Many thanks for your answer, this does indeed add a background colour to the slide, but this is only useful if you don't have an image in the slideshow so unfortunately doesn't help me.

I've noticed that other sites use .sppb-row-overlay to create this overlay function, but that only works because the background image is allocated to the section ID and there's just one image, not a slideshow. (like on the Giver or WayneCorp templates)

Adding a background colour to a Div that also has a background image isn't going to work.

Any other ideas on how to add the overlay to a slideshow?

Sifat - Staff

More than a month ago #Permalink
Sorry there is no default feature like that. You can try this css.

.sppb-slide-item-bg {
opacity: .7 !important;
}


Note: Custom support is beyond our support range.


-Thanks

Peter Dowse

More than a month ago #Permalink
That's ok - I appreciate you looking into it. As a workaround we've simply darkened the images in the slideshow - would have been nice to do it with CSS but this is a manageable work around.

Sifat - Staff

More than a month ago #Permalink
Great to know you've managed to solve this.

-Thanks


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Sifat

Sifat

Total Accepted Answers: 119
Paul Frankowski

Paul Frankowski

Total Accepted Answers: 110
Toufiq

Toufiq

Total Accepted Answers: 89
Kamruzzaman Alam

Kamruzzaman Alam

Total Accepted Answers: 4
FUTURECLIENT

FUTURECLIENT

Total Accepted Answers: 2

115

Templates

296111

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us