Light box background

looks like some kind of conflict, but we can suggest you some temporary solution which gonna help you right away.

Try to add this style to overwrite style of the lightbox background overlay:

.mfp-bg {
background-color: rgba(255, 0, 0, 0.2) !important;
}

use the same way as styles for the button, I mean in Custom CSS field.

Please try and let me know.

Hi,

I disable cache, clean cache for browser, put the code in Robo CSS, nothing works

So thalksfor your help,
After a lot of research I found a functional code:

.mfp-close {
background: url(icons/icon-close-x.png) right no-repeat !important;
background-image: url(icons/icon-close-x.png) !important;
background-position-x: right !important;
background-position-y: center !important;
background-size: initial !important;
background-repeat-x: no-repeat !important;
background-repeat-y: no-repeat !important;
background-attachment: initial !important;
background-origin: initial !important;
background-clip: initial !important;
background-color: initial !important;
z-index: 999;
width: 40px;
}

.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
width: 40px;
cursor: -moz-pointer;
cursor: -webkit-pointer;
cursor: pointer;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}

.mfp-bg {
background-color: rgb(255, 255, 255) !important;
}
.mfp-bg {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1042;
overflow: hidden;
position: fixed;
background: #0b0b0b;
opacity: 1;
}

I Also change the close button by a black one:
background: url(icons/icon-close-x.png)

and set width to 40px because it was cropped on one side, even before the change

• This reply was modified 5 years, 10 months ago by nico39.
• This reply was modified 5 years, 10 months ago by nico39.