Docs

[3b1a2f46-a516-40cf-beba-b611930e4819]

Hi, I have added the following css to my revolution slider global css.

.rev_slider .slotholder:after {
width: 100%;
height: 100%;
content: “”;
position: absolute;
left: 0;
top: 0;
pointer-events: none;

/* black overlay with 40% transparency */
background: rgba(0, 0, 0, 0.4);
}

I’m happy with how it looks but I need to take it off for one slider. I will post the link to the slider in question on the next reply.

[3b1a2f46-a516-40cf-beba-b611930e4819]

This reply has been marked as private.

[John Ezra]

Hi there,

Thanks for writing in! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

div#x-section-5 .rev_slider .slotholder:after {
display:none;
}

Hope this helps – thanks!

[3b1a2f46-a516-40cf-beba-b611930e4819]

Hi John,

This works initially but I need to copy that slider across the different pages that don’t appear on x-section5.

Could the below code be added to the Custom > CSS in the Customizer to the sliders I want the overlay on instead? I’ve added all my header sliders using the below masthead setting.. How can I target that area on all pages?

.rev_slider .slotholder:after {
width: 100%;
height: 100%;
content: “”;
position: absolute;
left: 0;
top: 0;
pointer-events: none;

/* black overlay with 40% transparency */
background: rgba(0, 0, 0, 0.4);
}

Thanks

[Rupok]

Hi there,

You can just use an additional custom class (say slider-overlay) to the section that will contain the overlay and update your code to following :

.slider-overlay .rev_slider .slotholder:after {
width: 100%;
height: 100%;
content: “”;
position: absolute;
left: 0;
top: 0;
pointer-events: none;

/* black overlay with 40% transparency */
background: rgba(0, 0, 0, 0.4);
}

.rev_slider .slotholder:after {
  display:none;
}

It would be a better approach.

Cheers!

[3b1a2f46-a516-40cf-beba-b611930e4819]

Thanks Rupok, but can I add a custom class when using the below masthead setting outside of cornerstone?

[Christopher]

Hi there,

I’m sorry, it’s not possible. You can target page ID, please update your code to :

.page-id-32 .slider-overlay .rev_slider .slotholder:after {
width: 100%;
height: 100%;
content: “”;
position: absolute;
left: 0;
top: 0;
pointer-events: none;

/* black overlay with 40% transparency */
background: rgba(0, 0, 0, 0.4);
}

.page-id-32 .rev_slider .slotholder:after {
  display:none;
}

Replace 32 with your page ID.

Hope it helps.

[3b1a2f46-a516-40cf-beba-b611930e4819]

Hi Christopher,

I needed to enable the black overlay on the below masthead container only on all pages, so using the page id wouldn’t have worked as I would have to add a new page id to the custom css every time I added a new page.

I have now rectified the issue using the code below.

.x-slider-container .rev_slider .slotholder:after {
width: 100%;
height: 100%;
content: “”;
position: absolute;
left: 0;
top: 0;
pointer-events: none;

/* black overlay with 40% transparency */
background: rgba(0, 0, 0, 0.4);
}

Hopefully the above will help others in the same predicament.

[Paul R]

Hi,

You can change your code to this.

.x-slider-container.below .rev_slider .slotholder:after {
width: 100%;
height: 100%;
content:"";
position: absolute;
left: 0;
top: 0;
pointer-events: none;

/* black overlay with 40% transparency */
background: rgba(0, 0, 0, 0.4);
}

Hope that helps

[Author]

Posts