Lightbox customization

Hello,
How can i customize the lightbox arrows and close button?
(change opacity and background color)

These are the default styles in the lightbox css file. You can add them in your custom css file and change the properties as you like:

.dmxLightboxButton.dmxLightboxPrev {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NCIgaGVpZ2h0PSI2MCI+PHBvbHlsaW5lIHBvaW50cz0iMzAgMTAgMTAgMzAgMzAgNTAiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjUpIiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1saW5lY2FwPSJidXR0IiBmaWxsPSJub25lIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+');
    top: 50%;
    margin-top: -30px;
    width: 44px;
    height: 60px;
    left: 2%;
}

.dmxLightboxButton.dmxLightboxNext {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NCIgaGVpZ2h0PSI2MCI+PHBvbHlsaW5lIHBvaW50cz0iMTQgMTAgMzQgMzAgMTQgNTAiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjUpIiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1saW5lY2FwPSJidXR0IiBmaWxsPSJub25lIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+');
    top: 50%;
    margin-top: -30px;
    width: 44px;
    height: 60px;
    right: 2%;
}

.dmxLightboxButton.dmxLightboxClose {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCI+PGcgc3Ryb2tlPSJyZ2IoMTYwLDE2MCwxNjApIiBzdHJva2Utd2lkdGg9IjQiPjxsaW5lIHgxPSI1IiB5MT0iNSIgeDI9IjI1IiB5Mj0iMjUiLz48bGluZSB4MT0iNSIgeTE9IjI1IiB4Mj0iMjUiIHkyPSI1Ii8+PC9nPjwvc3ZnPg==');
    top: 20px;
    margin-left: -6px;
    right: 2%;
    width: 30px;
    height: 30px;
}

thanks Teodor.

@Teodor,
I made some tests and is not working:
https://www.silvercoastbeachresidence.com/new/room1.html

That’s because your <link rel="stylesheet" type="text/css" href="style.css"> must be included after all the other CSS includes in the page head.

1 Like