Olsen – carousel/slideshow opacity

• 

  waikiharnais · Member · Jan 1, 2021 at 11:00 pm

  • Copy link
  • Add topic to favorites

  Hi,

  I’d like to change the opacity of the carousel/slideshow on the Olsen premium theme. Is there a CSS code to do this? I’d like the slideshow to be a bit more transparent, so that the photos in the background can be seen a bit better.

  Thanks in advance.

  The blog I need help with is: (visible only to logged in users)

• 

  waikiharnais · Member · Jan 1, 2021 at 11:05 pm

  • Copy link

  Sorry, let me edit my post: I’d like to change the opacity of the BOX inside the carousel. Not the carousel itself – apologies.

• 

  waikiharnais · Member · Jan 2, 2021 at 9:43 pm

  • Copy link

  Anyone?

• 

  staff-doublebassd · Staff · Jan 4, 2021 at 7:39 pm

  • Copy link

  Hi there,

  You can use this snippet to change the color of the box inside the slideshow:

  body, .featured-post-content, a.more-link {
      background: #fff;
  }

  Change #fff to the color of your choice. Let me know if that works for you.

  Thanks!

• 

  therefoiam · Member · Jan 6, 2021 at 10:45 am

  • Copy link

  Hi there,
  just to add instead of the hex color(#fff) use rgba
  like this https://snipboard.io/al5iv4.jpg
  that should do it

• 

  waikiharnais · Member · Jan 6, 2021 at 7:03 pm

  • Copy link

  Thank you both. However, it ends up being a solid colour. As opposed to transparent/faded. How can I make the box ‘see-through’?

• 

  staff-blorbo · Staff · Jan 6, 2021 at 7:10 pm

  • Copy link

  That is not directly possible via CSS for this particular theme.

• 

  waikiharnais · Member · Jan 6, 2021 at 7:50 pm

  • Copy link

  I have Googled it and found that you can add

  opacity: 0.6

  however this makes the entire carousel transparent, including the photos. As opposed to just the box.

  If I can find a way to make just the box ‘see through’ then I’ll be sorted. If not, I’ll just leave it. Oh well!

• 

  waikiharnais · Member · Jan 6, 2021 at 8:36 pm

  • Copy link

  Thank you so much ggmoyo, I have succeeded! It was definitely rgba but I hadn’t done it properly. Thank you. This is what I did:

  body, .featured-post-content, a.more-link {
      background: rgba(255, 255, 255, 0.7);
  }