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 and overwrite what you want, with custom CSS codes.

How to modify?

If you want to modify any values from these CSS codes, just replace their values, write !important next to the new value. Paste that code into a CSS file or field, which is loading into your website:

• You can write custom CSS codes into the slider's Developer tab -> CSS field. But this code only loads on that one page, where the given slider loads.
• In WordPress, you can use a plugin like this one.
• In Joomla you can create a custom plugin.

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 mobiles. If you want to bring it back, you can use this code:

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