(Squarespace) Gallery Lightbox Image arrows to custom icon

To change Gallery Lightbox Image arrows to Custom icon.

You can use this code to Custom CSS box.
If code doesn’t work, you can comment below, message or send me an email.

button.gallery-lightbox-control-btn svg {
    display: none !important;
}
button.gallery-lightbox-control-btn {
        background-size: contain;
        background-repeat:no-repeat;
        background-position: center center;
        background-color: transparent !important;
        opacity: 1 !important;
        padding: 30px !important;
}
button.gallery-lightbox-control-btn[aria-label="Next Slide"] {
    background-image: url(https://content.invisioncic.com/p289038/monthly_2022_09/1753379866_Group13@2x.png.54c2b0e59adbe1a1f31f46b8b628398d.png);
}
button.gallery-lightbox-control-btn[aria-label="Previous Slide"]  {
    background-image: url(https://content.invisioncic.com/p289038/monthly_2022_09/1773097810_Group12@2x.png.fd2d6dc749f79343ae687e29649cea4f.png);
}

Result

1 Like

@tuanphan,

:heart: :heart: :heart: