Background color

Hey Lars,

You should be able to override the default background color using something like this in your theme or child theme:

body .featherlight:last-of-type {
	background: #fff;
}

If that doesn’t get it, you may need to add !important to the background rule, but most of the time that should be enough without it.

We’ll add some common CSS changes to the plugin docs on the next update! ??

Thanks!

I forgot to ask you how to also change the text and the closing “X” from white to black, do you have the CSS for that to?

Hey Lars,

There really isn’t a good way to change the close icon color using CSS. It’s a background SVG so manipulating the color with CSS isn’t really possible. You’d either need to replace the SVG with a black one by changing the fill, or may be able to manipulate it some other way that I’m not familiar with.

To change the caption to black, this CSS should work

.featherlight-content .caption {
	color: #000
}

Let us know if we can help with anything else.

Did not function.
Should it not be:
.featherlight-content .caption {
color: #000000;
}
I tried what, but did also not function.
I am lost.

The CSS is correct. You may need to add !important to the end depending how you have things setup in your theme. Or the CSS could be cached in your browser as well, so you may need to clear your browser or server cache for the changes to show.

Ok, thanks!

Hey Lars,

Rob let me know that a body class should do the trick for you.

body .featherlight-content .caption {
	color: #000
}

Give that a try and it should take care of things for you. Let me know if you need anything else at all.

Hi every one!!!
I have the same problem I allready try to change to CSS and doesnt work…. I clean cache as well..
but honestly I dont know what you mean “may need to add !important to the background rule” or other suggestions the SVG….
in element in the inspector of morzilla I was doing the change to white and I can see perfectly…..

I’ve changed the fill color of the icons with the following CSS rules:

.featherlight .featherlight-close-icon {
    background: rgba(0, 0, 0, 0) url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%09%3Cpath%20fill%3D%22%23333%22%20d%3D%22M21%204.41L19.59%203%2012%2010.59%204.41%203%203%204.41%2010.59%2012%203%2019.59%204.41%2021%2012%2013.41%2019.59%2021%2021%2019.59%2013.41%2012%2021%204.41z%22/%3E%0A%3C/svg%3E") no-repeat scroll center center / 100% auto !important;
}

.featherlight-next {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%09%3Cpath%20fill%3D%22%23333%22%20d%3D%22M8.59%2016.59L13.17%2012%208.59%207.41%2010%206l6%206-6%206-1.41-1.41z%22/%3E%0A%3C/svg%3E") !important;
}

.featherlight-previous {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%09%3Cpath%20fill%3D%22%23333%22%20d%3D%22M15.41%207.41L10.83%2012l4.58%204.59L14%2018l-6-6%206-6%201.41%201.41z%22/%3E%0A%3C/svg%3E") !important;
}