Is it possible to change the colour of the ‘X’ on a lightbox, I want a light backbround and the ‘X’ is white so very hard to see?
As far as I can see, only by adding this to the page css:
Obviously use any colour you like in the css.
[x-data^="imageLightbox"] button {
color: red !important;
}
I’d say this needs a component level addition of a color control for the close SVG.
Many thanks
2 questions. I added this to the page css file but it did not change. Maybe I put it in the wrong place? I literally just added the line:
[x-data^=“imageLightbox”] button { color: red !important; }
into the file, is that wrong?
Also wont Elements overwrite this edit every time I change something on the page?
No, it’s the other way around, this takes precedence.
Thanks again, I feel a right numpty! Where do I find the ‘Page Code Areas’?
Thanks again, I am learning!
So this is still not working but I think I know why. It does work if I create a new project, but not in my current project. Probably this is because my page is php not html, I use the password protect component (which requires it to be php). For the same reason I believe the default page background colour option doesn’t work either.
I don’t have it to see why that causes an issue implementing this I am afraid.
The fact your page is PHP is not an issue. The fact you are using the password protect might well be.
Stick this in the page css window as well as a temporary test. All your headings should turn red. If they don’t then the password component is not fetching the page css.
h1,h2,h3,h4,h5,h6 {
color: red !important;
}
Ok thanks, something else must be blocking it then because what you sent me works perfectly on a new project just not on the one I am currently working on? So thanks again, I will keep exploring.
I did and the headings do not change. So for some reason I have something on my site that ‘disables’ the css setting.
My money’s on the new page protect component. If that simple css to turn your headings red is not getting to the page, then that’ll be the culprit.
I will take what you say, you are way may knowledgeable than me on this stuff, let’s see what @ben has to say
@ben Lets start this from the beginning to make it simpler.
I added some vimeo video to a page.
I put them in a page protect component.
the videos are in a lightbox but because the background to the lightbox was white the close button was invisible. So I wanted a way to change the colour of the ‘X’ in the lightbox.
@doobox suggested a css edit that did not work, however in a new project I experimented with it, it did.
I then made changes to my page but whilst they previewed fine they did not publish to the web, even after republishing all files (I added an image to the page and changed some text as an experiment).
So then I removed the videos from the page protect component, still the lightbox ‘X’ changes did not appear in the web version
I renamed the page back to html and then I deleted the index.php from my server and hey! the @doobox css changes worked
I hope this makes some sort of sense?
I look forward to some thoughts.. I am sure not easy.
added css to my page, uploaded to website, page is php, no issues, see below
Hi @jwDave
The issue here is that the CSS @Doobox shared was targeting an imageLightbox rather than a videoLightbox.
If you add the following CSS to the Extra Code area, your video lightbox close button will turn red:
[x-data^="videoLightbox"] button {
color: red !important;
}
Also, just to clear up any misunderstanding: this has absolutely nothing to do with the Password Protect component.
Hope that helps! 
That doesn’t really explain why this did not change his headings to red in the page in question:
h1,h2,h3,h4,h5,h6 {
color: red !important;
}
