X3Photo Gallery Forums

Martin · 02 Jan 2016, 12:36

Hi Karl

You gave me the CSS-code below to make the popup top-bar disappear:

.pswp__top-bar,
.pswp__caption {
	background-color: rgba(0,0,0,0);
}

But I noticed that this code has no effect on data-popup, as in:

<a href="{{path}}emptiness_tarmac.jpg" data-popup data-width=2048 data-height=1365><img class=x3-style-frame src="{{path}}emptiness_tarmac.jpg" /></a>

Clicking on the above defined image will show a grey top-bar.
It is even so that after clicking on the above image all other regular popups (i.e. when clicking on an image in a gallery) are not invisible anymore, but grey. Only after clearing my cache, these last images have their invisible topbars again.

03 Jan 2016, 01:59

I can't quite tell you why regular popups inherit style from the custom popup after clicked. However, the below extended CSS class specificity should fix it:

.pswp__ui--fit .pswp__top-bar,
.pswp__ui--fit .pswp__caption,
.pswp__top-bar,
.pswp__caption {
   background-color: rgba(0,0,0,0);
}

Martin · 03 Jan 2016, 09:14

mjau-mjau wrote:I can't quite tell you why regular popups inherit style from the custom popup after clicked. However, the below extended CSS class specificity should fix it:
Code
.pswp__ui--fit .pswp__top-bar,
.pswp__ui--fit .pswp__caption,
.pswp__top-bar,
.pswp__caption {
   background-color: rgba(0,0,0,0);
}

Yes... it indeed fixed it.... thnx!

X3Photo Gallery Forums

Custom CSS and 'data-popup'3 posts

Custom CSS and 'data-popup'

Re: Custom CSS and 'data-popup'

Re: Custom CSS and 'data-popup'