Add color overlay to Slider images for Activello theme

Activello
1

Hi, love the theme, thank you very much for making it free.

Is it at all possible to add a semi transparent color overlay to the slider images to help the text stand out.

I’ve searched the forum but couldn’t exactly find what I was looking for but apologies if there is already posted something similar.

jsfiddle.net/VsHyD/ has a great example of the faded image look I would love to achieve without having to re edit every single featured image.

Thanks
Damien

2

Hi Damien,

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Activello Options -> Other -> Custom CSS

.flexslider .slides img {
    opacity: 0.7;
    filter: Alpha(opacity=70); /* IE8 and earlier */
}

Best Regards,
Movin

3

Hello! I tried the above code and it still didn’t work for me? Was trying to add an overlay to just the slider image so that the built-in text that generates on the slider is more visible. Is there anything else I can do?

4

Hi @jmarieperry,

Could you please share me the page URL from your site where it’s not displaying correctly so that i can troubleshoot it?

Regards,
Movin

5

Hi Movin, sorry it took so long to get back to you but thankyou very much. Works great.

Your support for free themes is amazing, going forward I will definitely be looking at your paid themes :slight_smile:

Damien

6

You are always welcome here :slight_smile:

7

Here you go: lovinglymag.com. The text overlay on the slider is too light and is hard to read over the image. I’d like to add an opaque overlay over the image, but I haven’t been able to do that with the supplied code.

8

Hi @jmarieperry,

Thank you for sharing your site URL.

You can just add some opaque background to the slider text by using the following CSS code so that it will be more visible.

.flexslider .slides .flex-caption .post-categories a, .flexslider .slides .flex-caption a h2{
  background: #000;
  opacity: 0.5;
  filter: Alpha(opacity=70);/* IE8 and earlier */
  display: inline;
  padding: 0 10px;
}

Best Regards,
Movin

9

Hello,

I am still struggling to get this to work. Is this code compatible with master slider or does flexislider have to be installed? Can you also confirm if I am placing the code here? Admin Area -> Appearance -> Customize -> Activello Options -> Other -> Custom CSS (I’ve been trying it but still no success)

10
I am still struggling to get this to work. Is this code compatible with master slider or does flexislider have to be installed?

The main slider displayed on the home page of Activello theme is flex slider and the provided code is compatible with it.

Can you also confirm if I am placing the code here? Admin Area -> Appearance -> Customize -> Activello Options -> Other -> Custom CSS (I’ve been trying it but still no success)

Yes i can confirm it’s correct.

I can see on your site that you have added the provided code on your site correctly and it’s working fine. If it’s not the result that you want to achieve then could you please share the screenshot of what you want to achieve so that i can help you accordingly?

11

How would I change the length and width of the background? And is it possible to play with the alignment as well?

Thanks!

12

@Anna To help us keep support thread separates could you please create your own thread for your question here https://colorlibsupport.com/c/activello/ instead of replying on others thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread.