Changing color of gallery controls

How can I change the colors of the close/X and arrows? to red #ff0000?

Hi @brandonedling, you can do that by using the following code:

1. Navigate to Pages > Website Tools > Custom CSS.
2. Paste the code into the CSS editor.
3. Hit Save and you’re done

/* Make the lightbox background fully opaque */
.gallery-lightbox-background {
    opacity: 1 !important; /* Ensures the background is fully visible and overrides any other settings */
}

/* Change the color of the lightbox close button to red */
button.gallery-lightbox-close-btn {
    color: #ff0000 !important; /* Sets the close button text or icon color to red */
}

/* Change the color of the navigation buttons in the lightbox to red */
.gallery-lightbox-control-btn {
    color: #ff0000 !important; /* Ensures the "next" and "previous" navigation buttons are red */
}

Add this code into

/* Change the color of the close button */
button.gallery-lightbox-close-btn {
    color: #ff0000; /* Red color */
}

/* Change the color of the arrows */
.gallery-lightbox-next, 
.gallery-lightbox-prev {
    color: #ff0000; /* Red color */
}

If the close button or arrows don’t change color, they might be styled using SVGs or pseudo-elements. Use the following CSS as a backup:

/* Target SVG icons inside the close button and arrows */
button.gallery-lightbox-close-btn svg,
.gallery-lightbox-next svg,
.gallery-lightbox-prev svg {
    fill: #ff0000; /* Red color */
}