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

something weird is happening with the lightbox, when it opens, the left arrow stays selected in blue:

Captura de ecrã 2020-02-12, às 13.21.57

how can i eliminate this?

That is the focus, the browser adds a outline to the current active element. With Tab you can go to the next control and Space to press the button. It is added for accessibility.

If you want to remove the outline, you can use css:

.dmxLightboxButton:focus {
    outline: none;
}

thank you Patrick.