# Lightbox close window

**URL:** <https://forums.realmacsoftware.com/t/lightbox-close-window/53046>\
**Category:** Elements\
**Created:** [December 6, 2025, 7:18pm UTC](https://forums.realmacsoftware.com/t/lightbox-close-window/53046 "2025-12-06T19:18:09Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![jwDave](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jwdave/32/31841_2.png) [@jwDave](https://forums.realmacsoftware.com/u/jwDave)\
**Post date:** [December 6, 2025, 7:18pm UTC](https://forums.realmacsoftware.com/t/lightbox-close-window/53046/1 "2025-12-06T19:18:09Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\
**Post date:** [December 6, 2025, 10:40pm UTC](https://forums.realmacsoftware.com/t/lightbox-close-window/53046/2 "2025-12-06T22:40:51Z")

</div>

As far as I can see, only by adding this to the page css:  
Obviously use any colour you like in the css.

```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.

---

<div class="post-metadata">

**Author:** ![jwDave](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jwdave/32/31841_2.png) [@jwDave](https://forums.realmacsoftware.com/u/jwDave)\
**Post date:** [December 7, 2025, 7:27am UTC](https://forums.realmacsoftware.com/t/lightbox-close-window/53046/3 "2025-12-07T07:27:03Z")

</div>

Many thanks

---

<div class="post-metadata">

**Author:** ![jwDave](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jwdave/32/31841_2.png) [@jwDave](https://forums.realmacsoftware.com/u/jwDave)\
**Post date:** [December 7, 2025, 2:42pm UTC](https://forums.realmacsoftware.com/t/lightbox-close-window/53046/4 "2025-12-07T14:42:22Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\
**Post date:** [December 7, 2025, 2:57pm UTC](https://forums.realmacsoftware.com/t/lightbox-close-window/53046/5 "2025-12-07T14:57:04Z")

</div>

![CleanShot 2025-12-07 at 2 .54.01@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/c/2/c28f06219cb95afce248551ffdb4931ec8361f5a.jpeg)

```css
[x-data^="imageLightbox"] button {
  color: rgb(68, 141, 74) !important;
}

```

 ![CleanShot 2025-12-07 at 2 .56.28@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/a/7/a79e7dc6b6fc72d7006089e338b3377151b19003.jpeg)

---

<div class="post-metadata">

**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\
**Post date:** [December 7, 2025, 2:58pm UTC](https://forums.realmacsoftware.com/t/lightbox-close-window/53046/6 "2025-12-07T14:58:00Z")

</div>

> [@jwDave](#):
>
> Also wont Elements overwrite this edit every time I change something on the page?

No, it’s the other way around, this takes precedence.

---

<div class="post-metadata">

**Author:** ![jwDave](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jwdave/32/31841_2.png) [@jwDave](https://forums.realmacsoftware.com/u/jwDave)\
**Post date:** [December 7, 2025, 3:21pm UTC](https://forums.realmacsoftware.com/t/lightbox-close-window/53046/7 "2025-12-07T15:21:28Z")

</div>

Thanks again, I feel a right numpty! Where do I find the ‘Page Code Areas’?

---

<div class="post-metadata">

**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\
**Post date:** [December 7, 2025, 3:24pm UTC](https://forums.realmacsoftware.com/t/lightbox-close-window/53046/8 "2025-12-07T15:24:16Z")

</div>

![CleanShot 2025-12-07 at 3 .23.51@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/e/b/ebc6690d272ecc6b3da493b5012cd03a13c35fc1.png)

---

<div class="post-metadata">

**Author:** ![jwDave](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jwdave/32/31841_2.png) [@jwDave](https://forums.realmacsoftware.com/u/jwDave)\
**Post date:** [December 7, 2025, 4:12pm UTC](https://forums.realmacsoftware.com/t/lightbox-close-window/53046/9 "2025-12-07T16:12:54Z")

</div>

Thanks again, I am learning!

---

<div class="post-metadata">

**Author:** ![jwDave](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jwdave/32/31841_2.png) [@jwDave](https://forums.realmacsoftware.com/u/jwDave)\
**Post date:** [December 7, 2025, 4:58pm UTC](https://forums.realmacsoftware.com/t/lightbox-close-window/53046/10 "2025-12-07T16:58:01Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\
**Post date:** [December 7, 2025, 5:04pm UTC](https://forums.realmacsoftware.com/t/lightbox-close-window/53046/11 "2025-12-07T17:04:37Z")

</div>

> [@jwDave](#):
>
> I use the password protect component

I don’t have it to see why that causes an issue implementing this I am afraid.

---

<div class="post-metadata">

**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\
**Post date:** [December 7, 2025, 5:12pm UTC](https://forums.realmacsoftware.com/t/lightbox-close-window/53046/12 "2025-12-07T17:12:00Z")

</div>

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.

```css
h1,h2,h3,h4,h5,h6 {
    color: red !important;
}

```

---

<div class="post-metadata">

**Author:** ![jwDave](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jwdave/32/31841_2.png) [@jwDave](https://forums.realmacsoftware.com/u/jwDave)\
**Post date:** [December 7, 2025, 5:18pm UTC](https://forums.realmacsoftware.com/t/lightbox-close-window/53046/13 "2025-12-07T17:18:32Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jwDave](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jwdave/32/31841_2.png) [@jwDave](https://forums.realmacsoftware.com/u/jwDave)\
**Post date:** [December 7, 2025, 5:24pm UTC](https://forums.realmacsoftware.com/t/lightbox-close-window/53046/14 "2025-12-07T17:24:36Z")

</div>

I did and the headings do not change. So for some reason I have something on my site that ‘disables’ the css setting.

---

<div class="post-metadata">

**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\
**Post date:** [December 7, 2025, 5:26pm UTC](https://forums.realmacsoftware.com/t/lightbox-close-window/53046/15 "2025-12-07T17:26:23Z")

</div>

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.

@ben

---

<div class="post-metadata">

**Author:** ![jwDave](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jwdave/32/31841_2.png) [@jwDave](https://forums.realmacsoftware.com/u/jwDave)\
**Post date:** [December 7, 2025, 5:30pm UTC](https://forums.realmacsoftware.com/t/lightbox-close-window/53046/16 "2025-12-07T17:30:02Z")

</div>

I will take what you say, you are way may knowledgeable than me on this stuff, let’s see what @ben has to say

---

<div class="post-metadata">

**Author:** ![jwDave](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jwdave/32/31841_2.png) [@jwDave](https://forums.realmacsoftware.com/u/jwDave)\
**Post date:** [December 7, 2025, 7:23pm UTC](https://forums.realmacsoftware.com/t/lightbox-close-window/53046/17 "2025-12-07T19:23:08Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [December 7, 2025, 7:44pm UTC](https://forums.realmacsoftware.com/t/lightbox-close-window/53046/18 "2025-12-07T19:44:04Z")

</div>

added css to my page, uploaded to website, page is php, no issues, see below

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [December 8, 2025, 11:44am UTC](https://forums.realmacsoftware.com/t/lightbox-close-window/53046/19 "2025-12-08T11:44:53Z")

</div>

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:

```css
[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! 🙂

---

<div class="post-metadata">

**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\
**Post date:** [December 8, 2025, 11:57am UTC](https://forums.realmacsoftware.com/t/lightbox-close-window/53046/20 "2025-12-08T11:57:38Z")

</div>

That doesn’t really explain why this did not change his headings to red in the page in question:

```css
h1,h2,h3,h4,h5,h6 {
    color: red !important;
}

```

🤷‍♂️

[Next page](https://forums.realmacsoftware.com/t/lightbox-close-window/53046.md?page=2)