Black Border & Box Shadow Around Large Images Inside Pangolin Gallery

MikeR · 2017-07-09 23:55:15

Trying to update my ccs code for thin black border & box shadow for the large image slideshow in the new fancybox pangolin gallery,
similar to Rod Barbee's pangolin test site http://pangolin.barbeephoto.com/galleri … #gallery-1
(Thank you Rod your ideas & photography are always a inspiration!)

I had something similar in my old backlight 111 site @ www.michaelregan.co.uk
My ccs code doesn't work in my new pangolin 121 site @ www.michaelregan.uk probably because the photoswipe gallery
has been replaced with the new fancybox gallery.

Below is my ccs file:

.the__copy{text-align:center;}

.copyright p{text-align:center;}

.widget img, .the__copy img{border:1px solid #e6e2e2;box-shadow:3px 3px 3px rgba(0,0,0,0.4);}

.pswp_go{border:1px solid black;box-shadow:3px 3px 3px rgba(0,0,0,0.4);}

.album-thumbnail img{border:1px solid black;box-sizing:border-box;box-shadow:3px 3px 3px rgba(0,0,0,0.4);}

.pswp__caption__center{text-align:center;font-size:1.2em;}

.pswp__img{border:1px solid black;box-shadow:6px 6px 8px rgba(0,0,0,0.5);}

.gallery.vegas-container{box-shadow:4px 4px 8px rgba(0, 0, 0, 0.5);}

.gallery figure, .albums figure a {
box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
}
.content { z-index: auto }

I think the 3 items with beginning with .pswp need to be deleted

Spent the last day & half trying to figure it out, with no luck, any help much appreciated!

MikeR

rod barbee · 2017-07-10 00:11:25

Just probe my test site with the browser's inspector and look at my custom CSS file (pangolin.css)
http://ttg-tips-and-tricks.barbeephoto. … ustom-css/
Or look at the page's source code and click on the link to the custom CSS file.

rod barbee · 2017-07-10 00:32:21

here's the styling for the padding, border, and box shadow on the large images:

/*Fancybox image styling
=======================================================*/

.fancybox-slide img {
	border: 1px solid black;
	box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
	padding: 8px;	
}

MikeR · 2017-07-10 00:45:03

Thanks Rod

That's worked, I had tried almost the same code, but didn't use "slide" in .fancybox img

That is a excellent tip to look at the page's source code for the custom css code!

Many thanks for your help much appreciated!!

Mike R

rod barbee · 2017-07-10 00:58:13

you're welcome!

Community @ The Turning Gate

#1 2017-07-09 23:55:15

Black Border & Box Shadow Around Large Images Inside Pangolin Gallery

#2 2017-07-10 00:11:25

Re: Black Border & Box Shadow Around Large Images Inside Pangolin Gallery

#3 2017-07-10 00:32:21

Re: Black Border & Box Shadow Around Large Images Inside Pangolin Gallery

#4 2017-07-10 00:45:03

Re: Black Border & Box Shadow Around Large Images Inside Pangolin Gallery

#5 2017-07-10 00:58:13

Re: Black Border & Box Shadow Around Large Images Inside Pangolin Gallery

Board footer