# NO BUG: Specificity of theme stylesheet is lower than photoswipe library

**URL:** <https://forum.bricksbuilder.io/t/no-bug-specificity-of-theme-stylesheet-is-lower-than-photoswipe-library/38909>\
**Category:** Bugs\
**Tags:** v2-3-2\
**Created:** [April 17, 2026, 2:26pm UTC](https://forum.bricksbuilder.io/t/no-bug-specificity-of-theme-stylesheet-is-lower-than-photoswipe-library/38909 "2026-04-17T14:26:43Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![dkrakovik](https://forum.bricksbuilder.io/letter_avatar_proxy/v4/letter/d/a9a28c/32.png) [@dkrakovik](https://forum.bricksbuilder.io/u/dkrakovik)\
**Post date:** [April 17, 2026, 2:26pm UTC](https://forum.bricksbuilder.io/t/no-bug-specificity-of-theme-stylesheet-is-lower-than-photoswipe-library/38909/1 "2026-04-17T14:26:43Z")

</div>

As title explains, I can’t customize lightbox appearance as changes made in theme stylesheet are lower than styles coming from photoswipe.

Need to abusively use !important, which is not a best practise.

 ![Specificity of styles](https://forum.bricksbuilder.io/uploads/default/original/3X/1/4/14c8a44120741ce388e72e4fce8753a59a39a0e3.png)

 ![Theme stylesheet lightbox customization](https://forum.bricksbuilder.io/uploads/default/original/3X/1/1/11c2119e564df0d84907e0b1a1e9cbf615db8c14.png)

---

<div class="post-metadata">

**Author:** ![timmse](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/timmse/32/1192_2.png) [@timmse](https://forum.bricksbuilder.io/u/timmse)\
**Post date:** [April 20, 2026, 6:32am UTC](https://forum.bricksbuilder.io/t/no-bug-specificity-of-theme-stylesheet-is-lower-than-photoswipe-library/38909/2 "2026-04-20T06:32:46Z")

</div>

Hi Dominik,  
Thanks again for your report!

However, I can’t/don’t know how to replicate the issue. Please tell me what settings (Bricks » Settings » Performance) you’ve set for

- CSS loading method
- Disable class chaining
- Cascade layers

and where/how you added the custom styles (Theme Styles » Stylesheet?).

---

<div class="post-metadata">

**Author:** ![dkrakovik](https://forum.bricksbuilder.io/letter_avatar_proxy/v4/letter/d/a9a28c/32.png) [@dkrakovik](https://forum.bricksbuilder.io/u/dkrakovik)\
**Post date:** [April 20, 2026, 7:11am UTC](https://forum.bricksbuilder.io/t/no-bug-specificity-of-theme-stylesheet-is-lower-than-photoswipe-library/38909/3 "2026-04-20T07:11:28Z")

</div>

Hi Stefan, here are my settings:

Disable class chaining: ON  
CSS loading method: Stylesheet  
Cascade layer: turned OFF like its recommended in description

Custom styles added to Theme Styles - Stylesheet

Thanks

Here are my styles for lightbox without !important if you want to test:

```auto
/* Lightbox customizations */
.pswp.brx .pswp__button {
  display: flex;
  width: 40px;
  height: 40px;
  padding: 5px;
  fill: #3E362E;
  background: #E7DECF;
  border: 1px solid #3E362E;
}

.pswp__button--arrow {
  top: 50vh;
  margin: 0px 10px;
}

.pswp__icn {
  position: absolute;
  height: 100%;
  fill: #3E362E;
  margin: auto;
  top: 0;
  width: 30px;
}

.pswp.brx .pswp __button--arrow--next .pswp__ icn {
  left: 0;
}

.pswp __button--zoom .pswp__ icn {
  left: auto;
}

.pswp.brx .pswp__counter {
  height: auto;
  padding: 5px 10px;
  color: #3E362E;
  background: #E7DECF;
  border: 1px solid #3E362E;
}

.pswp__zoom-wrap img {
  border: 10px solid #E7DECF;
}

.pswp__thumbnail-nav {
  transition: all 0.5s ease;
}

.pswp__thumbnail-nav img {
  border: 5px solid #E7DECF;
  transition: inherit;
}

```

---

<div class="post-metadata">

**Author:** ![timmse](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/timmse/32/1192_2.png) [@timmse](https://forum.bricksbuilder.io/u/timmse)\
**Post date:** [April 20, 2026, 8:27am UTC](https://forum.bricksbuilder.io/t/no-bug-specificity-of-theme-stylesheet-is-lower-than-photoswipe-library/38909/4 "2026-04-20T08:27:14Z")

</div>

Thanks!  
I’m using the same settings, but it works just fine and looks as expected as far as I can tell:

 ![CleanShot 2026-04-20 at 10.22.05@2x](https://forum.bricksbuilder.io/uploads/default/original/3X/e/9/e9598e39eb1a6feac949fd48956b4a26c327dafd.jpeg)  
 ![CleanShot 2026-04-20 at 10.24.38@2x](https://forum.bricksbuilder.io/uploads/default/original/3X/e/1/e15c387232d422d635687a97ee0cb2de5855d6b8.png)

---

<div class="post-metadata">

**Author:** ![dkrakovik](https://forum.bricksbuilder.io/letter_avatar_proxy/v4/letter/d/a9a28c/32.png) [@dkrakovik](https://forum.bricksbuilder.io/u/dkrakovik)\
**Post date:** [April 20, 2026, 9:13am UTC](https://forum.bricksbuilder.io/t/no-bug-specificity-of-theme-stylesheet-is-lower-than-photoswipe-library/38909/5 "2026-04-20T09:13:33Z")

</div>

Thats really weird,  
but even in your screenshot its not 100% right, it should look like this:

 ![working with !important](https://forum.bricksbuilder.io/uploads/default/original/3X/c/c/cccd743b9d61593f48f9124495e9ee44ea2d2dde.jpeg)

And this is when I remove !important:

 ![without !important](https://forum.bricksbuilder.io/uploads/default/original/3X/c/6/c6e2fb102991720d30e1fa4a5c61e03315727239.jpeg)

Custom styles are overridden:

 ![css layers](https://forum.bricksbuilder.io/uploads/default/original/3X/f/7/f7a31413404b59322a8ff4f58725fce4555a9d3e.png)

---

<div class="post-metadata">

**Author:** ![timmse](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/timmse/32/1192_2.png) [@timmse](https://forum.bricksbuilder.io/u/timmse)\
**Post date:** [April 20, 2026, 10:01am UTC](https://forum.bricksbuilder.io/t/no-bug-specificity-of-theme-stylesheet-is-lower-than-photoswipe-library/38909/6 "2026-04-20T10:01:25Z")

</div>

What if you just do without the `!important` statements, but make the selectors slightly more specific by adding e.g. `body` in front of it?

Example:

`body .pswp.brx .pswp__button-arrow {...}`

---

<div class="post-metadata">

**Author:** ![dkrakovik](https://forum.bricksbuilder.io/letter_avatar_proxy/v4/letter/d/a9a28c/32.png) [@dkrakovik](https://forum.bricksbuilder.io/u/dkrakovik)\
**Post date:** [April 21, 2026, 8:23am UTC](https://forum.bricksbuilder.io/t/no-bug-specificity-of-theme-stylesheet-is-lower-than-photoswipe-library/38909/7 "2026-04-21T08:23:26Z")

</div>

Thanks  
I’ve managed to make it work, removed `!important` and added `body`.  
The `.pswp.brx` class needs to be placed after `body` for it to work correctly.  
And you need to be very specific with selectors to override the default styles.

```auto
:root {
  --color-primary: #E7DECF;
  --color-primary-hover: #D9CAB0;
  --color-tertiary: #3E362E;
  --transition-mid: all 0.5s ease;
  --frame-width: clamp(1rem, calc(0.009259259259259259 * (100vw - 36rem) + 0.5rem), 1rem);
}

/* Lightbox customizations */
body .pswp.brx .pswp__button {
  display: flex;
  width: 40px;
  height: 40px;
  padding: 5px;
  background: var(--color-primary);
  border: 1px solid var(--color-tertiary);
  transition: var(--transition-mid);
}

body .pswp.brx .pswp __button:active,body .pswp.brx .pswp__ button:focus,body .pswp.brx .pswp__button:hover {
  background: var(--color-primary-hover);
  border: 1px solid var(--color-tertiary);
  padding: 5px;
  transition: var(--transition-mid);
}

body .pswp.brx .pswp__button svg {
  fill: var(--color-tertiary);
  color: var(--color-primary);
}

body .pswp.brx .pswp __button--arrow .pswp__ icn {
  position: absolute;
  height: 100%;
  margin: auto;
  top: 0;
  width: 30px;
}

body .pswp.brx .pswp__button--arrow {
  top: calc(50vh - 20px);
  margin: 0px 10px;
}

body .pswp.brx .pswp __button--arrow--next .pswp__ icn {
  left: 0;
}

body .pswp.brx .pswp__counter {
  height: auto;
  padding: 5px 10px;
  color: var(--color-tertiary);
  background: var(--color-primary);
  border: 1px solid var(--color-tertiary);
}

body .pswp.brx .pswp__img {
  border: var(--frame-width) solid var(--color-primary);
}

body .pswp __thumbnail-nav-wrapper .pswp__ thumbnail-nav {
  transition: var(--transition-mid);
}

body .pswp__thumbnail-nav img {
  border: 5px solid var(--color-primary);
  transition: inherit;
}

```

---

<div class="post-metadata">

**Author:** ![timmse](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/timmse/32/1192_2.png) [@timmse](https://forum.bricksbuilder.io/u/timmse)\
**Post date:** [April 24, 2026, 5:59am UTC](https://forum.bricksbuilder.io/t/no-bug-specificity-of-theme-stylesheet-is-lower-than-photoswipe-library/38909/8 "2026-04-24T05:59:09Z")

</div>

Glad to hear you found a solution! 🙌  
Generally speaking, you’ll need to check the specificity and loading order of the styles to be able to override them.

We’ll have to see if there’s enough demand to customize the lightbox this extensively. Feel free to submit an idea on the [idea board](https://bricksbuilder.io/ideas/) so we can potentially offer settings for this in the future, if there’s a need.

---

<div class="post-metadata">

**Author:** ![dkrakovik](https://forum.bricksbuilder.io/letter_avatar_proxy/v4/letter/d/a9a28c/32.png) [@dkrakovik](https://forum.bricksbuilder.io/u/dkrakovik)\
**Post date:** [April 24, 2026, 8:00am UTC](https://forum.bricksbuilder.io/t/no-bug-specificity-of-theme-stylesheet-is-lower-than-photoswipe-library/38909/9 "2026-04-24T08:00:39Z")

</div>

Yes, thanks for your help.  
What I was getting at was that in previous versions, the initial code I posted worked without !important statement.  
But apparently something has changed and the photoswipe library is above the theme stylesheet.

I don’t think any additional settings are needed. It can be easily customized via CSS.  
The only thing I was missing was targeting the `body` selector.