how to style the arrows in the lightbox?

Hi Thomy,

The CSS path to this is:

.featherlight-next span img {}

It’s not a background image and it’s an external image. So, I think the best way to handle it, if you wanted to just use CSS, and not have to change it again when you update, would be to hide that image, like this:

.featherlight-next span img { display: none !important; }

And then set a background image to the span, like this:

.featherlight-next span { background: url(https://url.of.your.new.image/); }

-This doesn’t work if i use both CSS statements and link to my new image i don’t see any image at all.

-If i only use the second CSS statement i see both the blue arrow and my gold one behind, but the gold one has strange dimensions.

I only want to exchange the blue one with a gold one, keeping the same dimensions of the displayed image.

Because the arrow in the lightbox is an actual image (using <img> tag), the true best way to replace it would be to go into the code and change the “src” attribute of the <img> tag to the URL of your new image. However, this change would be overwritten if and when you updated the plugin. This is why I suggested the workaround above.

And, just to be clear, you have to do the change for both arrows, so:

.featherlight-next span img {
display: none !important;
}
.featherlight-next span {
background: url(https://url.of.your.new.image/);
}

and

.featherlight-previous span img {
display: none !important;
}
.featherlight-previous span {
background: url(https://url.of.your.new.image/);
}

Hi

This doesn’t work, i tried and now i don’t see any arrows anymore.

The code above was meant to be treated as a starting point, which you could modify to fit your needs. The workaround does work, but you have to expand on the code, with something like:

.featherlight-previous span img {
display: none !important;
}
.featherlight-previous:hover {
background: rgba(255,255,255,0.25);
background-image: url(https://s.w.org/images/core/emoji/72×72/25c0.png);
background-repeat: no-repeat;
background-position: 50%;
}

You’d need to change the image to what you want, and the background-position as well. And, of course, you’d have it to this for the next button too.

Hi

This did the trick, thanks a lot for your work!!