How to customize the lightbox?

To customize the lightbox, you need CSS knowledge, otherwise you won't be able to achieve what you are looking for. You should inspect the codes of the lightbox, write custom CSS codes which you could put to your theme's CSS file, or to the Slider settings → Developer → CSS.

How to modify?

If you want to modify any values from these CSS codes, just replace their values, write !important next to this new value, and paste that code into a CSS file, which is loading on your website. In WordPress your theme's style.css file and in Joomla one of the CSS files from your template.

Example of a modified code

To make a modified CSS code work, make sure it's stronger than the default codes below.

/* changes the lightbox cursor to hand */
div.n2-ss-slider [data-force-pointer="zoom-in"], div.n2-ss-slider [data-force-pointer="zoom-in"] * {
   cursor: pointer!important;
}

/* changes the lightbox's dark background to red*/
.litebox-overlay{
    background-color: red!important;
}

Lightbox CSS codes people commonly want to modify

Background color

.litebox-overlay{
    background-color: rgba(0, 0, 0, 0.8);
}

Closing X icon size, image, position

.litebox-overlay .litebox-close{
    width: 36px;
    height: 36px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAMAAADW3miqAAAABGdBT…vNcsmRuX4vc8d6dD9cGMVFL231VGoNUdfFRq2y/t8SS7NvNfRFXoyOLJ8AAAAASUVORK5CYII=) no-repeat center;
    top: 20px;
    right: 20px;
}

Left arrow image, horizontal position

.litebox-overlay .litebox-prev {
    background: url(../images/litebox-prev.png) no-repeat center;
    left: 20px;
}

Right arrow image, horizontal position

.litebox-overlay .litebox-next {
    background: url(../images/litebox-next.png) no-repeat center;
    right: 20px;
}

Both arrow size, vertical position, opacity

.litebox-overlay .litebox-nav {
    width: 60px;
    height: 60px;
    margin-top: -30px;
    opacity: .2;
    top: 50%;
}

Lightbox image container position

.litebox-overlay .litebox-container {
    top: 10%;
    right: 10%;
    bottom: 10%;
    left: 10%;
}

Lightbox image maximum width and height to keep it inside the container

.litebox-overlay iframe, .litebox-overlay img {
    max-width: 100%;
    max-height: 100%;
}

Cursor

.n2-ss-slider [data-force-pointer="zoom-in"], .n2-ss-slider [data-force-pointer="zoom-in"] * {
    cursor: zoom-in !important;
}

Loading animation

.litebox-overlay .litebox-loader {
    position: absolute;
    width: 40px;
    height: 40px;
    left: 20px;
    top: 20px;
    border: 3px solid #111;
    border-right-color: #fff;
    border-radius: 50%;
    -webkit-animation: liteboxLoader 1s linear infinite;
    -moz-animation: liteboxLoader 1s linear infinite;
    -ms-animation: liteboxLoader 1s linear infinite;
    -o-animation: liteboxLoader 1s linear infinite;
    animation: liteboxLoader 1s linear infinite;
}

Lightbox caption

.litebox-overlay .litebox-text, .litebox-overlay .litebox-text * {
    width: 100%;
    padding: 0 15px;
    background: rgba(0,0,0,.5);
    color: #fff;
    font-size: 12px;
    line-height: 50px;
    position: absolute;
    bottom: 0;
    z-index: 2;
    -webkit-opacity: 0;
    -khtml-opacity: 0;
    -moz-opacity: 0;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

If you want to modify something else use your browser's developer tools to see how you can inspect elements, find the element you want to modify, and create your custom css codes.

Frequently asked questions

How to make the close button appear on mobiles too?

The close button is hidden on mobile to improve the user experience. If you want to bring them back, you can use custom CSS.

.litebox-overlay .litebox-close {
    display: block!important;
}