Page 1 of 1

Custom CSS and 'data-popup'

Posted: 02 Jan 2016, 12:36
by Martin
Hi Karl

You gave me the CSS-code below to make the popup top-bar disappear:
Code
.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:
Code
<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.

Re: Custom CSS and 'data-popup'

Posted: 03 Jan 2016, 01:59
by mjau-mjau
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);
}

Re: Custom CSS and 'data-popup'

Posted: 03 Jan 2016, 09:14
by Martin
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!