Docs

[fransboumans]

Hi there,

I want to have the closing icon of my lightbox on the right corner of the image, just like Envira Gallery.

I already used the following code to change the layout of the lightbox:

/* Remove Lightbox Wheel */

.ilightbox-loader {
    display: none !important;
}

/* Darken Lightbox Background */

.ilightbox-overlay.light {
    background: rgba(0,0,0,0.4);
}

/* Remove Lightbox FullScreen button and Enlarge Close button */

.ilightbox-toolbar.light {
    background: none;
    border: none;
    padding: 0;
    left: 15px;
    top: 20px;
}

.ilightbox-toolbar.light a.ilightbox-close:before {
    font-size: 40px;
    font-weight: lighter;
}

.ilightbox-toolbar .ilightbox-fullscreen {
    display: none;
}

[Joao]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[fransboumans]

This reply has been marked as private.

[Paul R]

Hi,

You can add this under Custom > CSS in the Customizer.

.ilightbox-toolbar.light a.ilightbox-close:before {
    height: 35px;
    width: 38px;
    content: url(http://martinanimations.com/wp-content/plugins/envira-gallery/assets/css/images/envirabox_sprite.png);  
    overflow: hidden;
}

.ilightbox-toolbar.light {
    box-shadow:none;
}

Hope that helps

[fransboumans]

That changes the closing icon, thanks!

But how do I get it in the right upper corner like the images have?

[Paul R]

Hi,

You can add this under Custom > Edit Global Javascript in the Customizer.

jQuery(function($) {
    var lwidth = $('.ilightbox-container').width();
    var twidth = lwidth/2;
    $('.ilightbox-close').parent().css('left','50%');
    $('.ilightbox-close').parent().css('margin-left',twidth+'px');
});

Hope that helps.

[fransboumans]

That didn’t change anything for me.

[Paul R]

Hi,

In that case, would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[fransboumans]

This reply has been marked as private.

[Paul R]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

body .ilightbox-toolbar.light {
    left: 50%;
    margin-left: 540px;
    top: 50%;
    margin-top: -345px;
}

Hope that helps.

[fransboumans]

That works, Thanks!

[Nico]

Happy to hear that.

Feel free to ask us again.

Thanks.

[Author]

Posts