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.
something weird is happening with the lightbox, when it opens, the left arrow stays selected in blue:
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.