Customizing the Lightbox

You can customize the Lightbox by using Additional CSS in the Theme Customizer. You can change the Lightbox size, background color and border radius to complement your website design.

Changing the Size of the Lightbox

To adjust the size of the lightbox, you can add this to the Additional CSS in the Theme Customizer:

• For the entire website

.glightbox-stk .ginner-container {
    max-height: 1000px !important;
    width: 100px !important;
}

• For a Post:

.postid-1334 .glightbox-stk .ginner-container {
    max-height: 1000px !important;
    width: 100px !important;
}

• For a Page:

.page-id-1334 .glightbox-stk .ginner-container {
    max-height: 1000px !important;
    width: 100px !important;
}

Just replace the Page/Post ID number in the example, and change the size values to your preference.

If you have a way to add CSS for the specific post/page, you can can use this:

.glightbox-stk .ginner-container {
    max-height: 1000px !important;
    width: 100px !important;
}

Change the Size of the Internal Page in Lightbox

To change the size of an internal page when it opens up in lightbox, you can add this:

.glightbox-stk .ginner-container {
    max-width: 90vw !important;
    height: 90vh !important;
}

Changing the Background Color of the Lightbox

To change the background color of the Lightbox, you can add this:

.glightbox-stk .gcontainer {
    background-color:red;
}

Changing the Border Radius of the Lightbox

To change the border radius of the Lightbox, you can add this:

.glightbox-stk .gslide-media.gslide-image {
    border-radius: 20px;
}


.glightbox-stk .gslide-media.gslide-image > img {
    border-radius: 20px;
}

Customizing the Lightbox of Specific Pages or Posts

You can add the class .page-id-1334 or .postid-1334 before each CSS to apply it to a specific Page/Post. Just replace the Page/Post ID number in the example.

When you style the lightbox for a specific Page/Post ID, it will affect all the lightboxes in the particular page or post.

Customize Lightbox on Desktop Only

Using the CSS below will only affect the Lightbox in Desktop.

Keep in mind, however, that the number after the min-width should be a pixel above the tablet breakpoint. For example, if the tablet breakpoint is 1018px, based on the example above.

@media screen and (min-width:1019px){
.page-id-1334 .glightbox-stk .ginner-container{
max-height: 1000px !important;
width: 100px !important;
}
}