Essential Grid IFrame BG colour

[kirk74]

Hi, I needed to play audio files (Posts) in an Essential Grid, but didn’t want to leave the grid when the audio post was clicked. I tried to do this using the Essential grid video settings but because these were audio files not video none of the video settings within Essential grid worked correctly.

So I got around it by using the IFrame option. Each audio file plays as an IFRame in a lightbox.

It works perfectly: https://thelastpostmagazine.com/tlp-interviews/

BUT - see how there is a solid black BG for the lightbox, and I want to change this colour, I want to give it an alpha, but I can’t get CSS to work, it is being ignored. I have tried several ways that work in the Firefox Developer console, but don’t work in live site…

Can you pls show me how to get rid of the solid black BG

Thx so much

[christian]

Hey @kirk74,

To change the color of the background, please try using this CSS:

.esgbox-bg {
    background: yellow !important;
}

To change the transparency, you can add this in either your grid’s CSS or Global CSS. Change .87 to .5 for 50% opacity.

.esgbox-is-open .esgbox-bg {
    opacity: .87 !important;
}

If that doesn’t help, please give us WordPress Admin access in a Secure Note

Hope that helps.

[kirk74]

Thx … tried adding the opacity CSS instruction to global CSS, aso to CSS for the page the grid is on … and finally to the Skin > CSS setting within Essential Grid… and they are all being ignored … so I will provide logins. thx so much.

[ruenel]

Hello @kirk74,

Thanks for providing the information. I have investigated it and I found out that the black background is coming from inside the contents of the iframe. Regretfully we cannot edit or control any code inside the iframe. This means that it will need customizations to the default lightbox of the plugin. Alternatively, you can make use of the JackBox WordPress plugin or Social Gallery plugin which is supported by the Essential Grid plugin. These lightbox plugins may have better control to the display of the lightbox and how it may look like. You can choose which lightbox to use by going to Ess. Grid > Global Settings > Select LightBox Type.

Hope this helps.

[kirk74]

OK thx for updating me

[ruenel]

You are most welcome!