Custom background with free “Lightbox with PhotoSwipe”

There is no special version of the plugin. If you want to change the background, just add custom CSS rules to your site. For example to have a grey background (#404040):

.pswp__bg {
    background: #404040 !important;
}

.pswp__ui–fit .pswp__top-bar,
.pswp__ui–fit .pswp__caption {
    background-color: rgba(64, 64, 64, 0.7) !important;
}

.pswp__button–arrow–left::before,
.pswp__button–arrow–right::before {
    background-color: rgba(64, 64, 64, 0.7) !important;
}

Thank you Arno.
Where do I add this code, in the global CSS field of the wole site, in the right upper CSS field in each page, or somewhere else ?

You can either add this to the global theme customization of WordPress or you create a child theme and put that to the style.css files of the child theme.

Thank you so much.

It works fine ! Thanks again !

I would like to color the arrows and other controls.
I tried the CSS, and can change the background of the slideshow, and the background on hover of the controls, but not the controls themselves.

Tried changing the PNG too…

Everything is in the CSS, also see here:

https://github.com/arnowelzel/lightbox-photoswipe/blob/3.1.5/src/lib/photoswipe.css

https://github.com/arnowelzel/lightbox-photoswipe/blob/3.1.5/src/lib/skins/default/skin.css

Just keep in mind, that the plugin uses a minified CSS which contains everything in one file and with the images encoded as data urls. If possible, the buttons don’t use PNG but SVG for better visual quality.

To change the color of the controls, you might use a CSS color filter as well:

.pswp__button {
    filter: invert(10%) sepia(100%) hue-rotate(-60deg) saturate(120);
}

Just try different value combinations.

Since the beginning of this post, I have removed this plugin for simple lightbox, easier for me.
Thanks for the help.