Customizing Lightbox Libraries

07.09.2015 Filed in: Tips

It is possible to customise the lightbox libraries with CSS. Therefore, use following custom CSS code on the Stacks page.

Chocolat

Background Color:
Replace color code #FFFFFF (white) with your own color code.

#Choco\_overlay {  
    background-color: #FFFFFF !important;  
}

Caption Text Font Size:

#Choco\_container\_description {  
    font-size: 12px !important;  
}

Photobox

Background Color:
Replace color code #FFFFFF (white) with your own color code.

#pbOverlay {  
    background: #FFFFFF !important;  
}

Caption Text:
Replace color code #FFFFFF (white) with your own color code if you wish to change the caption color.

#pbCaption .title, #pbCaption .counter {  
    color: #FFFFFF !important;  
}

Replace .9em with your own caption text size, e.g. 1.0em or 18px.

.pbCaptionText {  
    font-size: 18px !important;  
    font-weight: bold !important;  
    font-size: .9em !important;  
}

Transition Speed:
Replace .8s and .5s with your own transition speed.

.pbWrapper > img {  
    transition:.8s .5s cubic-bezier(0.1, 0.87, 0.48, 1) !important;  
}

Active Thumb Border Color

.pbThumbs li.active a img {  
    border-color:#cccccc !important;  
}

Transition Effects:
The default transition is that the current image "grows" and fades out of view, and when it is completely gone, the new image will appear to grow, rotate until it is "flat" and fade-in. Every time there's an image change that is either next or previous, the pbOverlay element will have a class for that change 'next' or 'prev', so you can work with those to achieve an effect like the images are moving to the sides. You can use this CSS snippet to achieve that:

.pbHide .pbWrapper > \*,.pbHide .pbWrapper > .prepare {  
    opacity:0; transition:.2s ease-in;}.pbWrapper > div,.pbWrapper > img { transition:.2s ease-out; opacity: 1;}/\*\*\* when going to the next slide \*\*\*//\* prepare next slide which will be shown \*/.pbWrapper > \*,.pbHide.next .pbWrapper > .prepare { transform:translatex(40%);}/\* prepare current slide which will "go away" \*/.pbHide.next .pbWrapper > \* { transform:translatex(-40%);}/\* when going to the previous slide \*/.pbWrapper > \*,.pbHide.prev .pbWrapper > .prepare { transform:translatex(-40%);}.pbHide.prev .pbWrapper > \* { transform:translatex(40%);  
}

Move Control Buttons Down:
Some Themes (like Blueball Freestack Responsive) are placing a menu bar over the control buttons on certain devices. This can be fixed with following CSS:

@media all and (max-width:700px) {  
    .thumbs .pbThumbs {  
        margin-bottom: 100px!important;  
    }  
    #pbOverlay {  
        top: 44px;  
    }  
}

Swipebox

Background Color:
Replace color code #FFFFFF (white) with your own color code.

.visible {  
    background-color: #FFFFFF !important;  
}

Magnific Popup
Remove Caption Counter:

.mfp-counter {  
    display: none;  
}

Justified Thumbnails

Caption Color:

.justified-gallery>a>.caption, .justified-gallery>div>.caption {  
    background-color: #ffffff !important;  
    color: #000000 !important;  
}

RapidWeaver CSS Setting

Put all of this custom CSS code here:

CSS Settings

Back

Blog