Docs

[giveitlegs]

Hi all!

URL: http://gofitfarm2.wpengine.com/bootcamp

I am using a lightbox with an embedded YouTube video on this page. Looks pretty good guys! 😉

My question is, how do I move the lightbox close and fullscreen buttons to the upper right corner of the lightbox?

(see screenshot)

I have tried using the custom CSS I found here in the support forum already, mainly this:

/*
// Moves the closing and fullscreen buttons for the lightbox closer to the lightbox frame
*/

.ilightbox-toolbar.light {
top: 90% !important;
left: 20% !important;
}

.ilightbox-toolbar.light a:before {
   vertical-align: top;
}

/*
// Makes lightbox container open smaller
*/

.ilightbox-holder.light {
    background: transparent;      
    box-shadow: none;
}

.ilightbox-container {
    padding: 5%!important;
}

But could not seem to get it to work. any help is appreciated! 😉

Cheers,

[Nabeel A]

Hi there,

Thanks for writing in! In your above provided code, find this:

.ilightbox-toolbar.light {
    top: 90% !important;
    left: 20% !important;
}

and replace it with:

.ilightbox-toolbar.light {
    top: 5% !important;
    left: 83% !important;
}

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[giveitlegs]

That totally moved it to the upper right hand corner! Which is great! thanks so much! 😉

Is there any way to actually get it a little closer to the frame of the video? (see screenshot)

[Paul R]

Hi,

You may change the top and left percentage to adjust the position.

Thanks

[Author]

Posts