Lightbox CSS codes people commonly want to modify

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

Example of a modified code:

    background-color: red!important;
Background color
    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%;

If you want to modify something else, check out this video to see how you can inspect elements, find the element you want to modify, and create your custom css codes.