How do I customize the Photo Presentation page?
I wish to create a border around the images similar to my site here:
https://www.exposedvisions.com/galleries/black-and-white/#&gid=1&pid=1.
Unfortunately, the CSS code that worked in BL1 doesn’t seem to work in BL3. Seems the class name? is different.
Thanks.
try using this selector instead:
.fancybox-slide img
Hacking borders onto the images may prevent them from centering or scaling properly, so be sure to adequately test your changes.
That’s what I’ve found. I’ve had to use the css top and height properties to get the borders and shadows to show properly, especially on vertical images.
Thanks but I can’t get it to work. This is what worked for BL1
img.pswp__img {
background: white;
border: 30px solid #ffffff;
-webkit-box-shadow: 1px 0px 0px 8px rgba(201,199,201,0.2);
-moz-box-shadow: 1px 0px 0px 8px rgba(201,199,201,0.2);
box-shadow: 1px 0px 0px 8px rgba(201,199,201,0.2);
This is what I tried for BL3,
img.fancybox-slide img {
background: white;
border: 30px solid #ffffff;
-webkit-box-shadow: 1px 0px 0px 8px rgba(201,199,201,0.2);
-moz-box-shadow: 1px 0px 0px 8px rgba(201,199,201,0.2);
box-shadow: 1px 0px 0px 8px rgba(201,199,201,0.2);
Not working, even removing the shadow code still doesn’t work. Sorry guys my coding just isn’t up to snuff. Reason why I never did good in my coding classes 
can you post a link to an album?
Are you talking the album gallery?
You’re using this:
img.fancybox-slide img
(you added img before .fancybox-slide)
it should just be:
.fancybox-slide img
Right, and I tried it without the img in front and it still isn’t working; thus my post
In the browser inspector I can access your custom css. If I remove img from before .fancybox-slide img it works fine. Plus, I use the same thing on my site and it works fine there.
Can you edit your custom css to remove that preceding img? Then clear browser cache.
Yeah, I got it working now. Wound up reloading the CSS file.
Thanks guys 
I’ve got one more issue… I’m unable to add a background image. This code is not working, and I’ve tweaked it a few times…
.fancybox-slide bg {
background-image: url('../images/seamless-dark-noise-8.png');
background-position: inherit;
And as usual, worked in BL1. What am I missing?
there is no element bg to apply a background to. (BL1 used Photoswipe, BL2/3 uses Fancybox, completely different critters. So any css you used in BL1 most likely won’t work)
If you want to try adding a background image behind the display images, the browser inspector shows that this selector may do the trick:
.pangolin-album .fancybox-slide
the url to the background image seems to be wrong though
I’m sorry, but this post is a bit confusing as I’ve no idea what you mean. Sorry
On my site here…
the dark background is an image. I want to use the same background image on the new site. Just need the coding to do exactly that.
Also wish to italicize the text as seen in the example above.
sorry, about my confusion but as noted the code used on BL1 won’t work on BL3
Thanks
Try using this selector to apply your background image:
.pangolin-album .fancybox-slide
your css will look like this:
.pangolin-album .fancybox-slide {
background-image: url('path/to/image/img.png');
}
one problem is the url you are using does not appear to go to the image you want to use. You’ll have to correct that.
You can initially place the image in a folder on your site. I suggest a folder specifically for custom images placed inside the /backlight/custom/ folder. Or using the Backlight image uploader (Design>Templates>Uploaded Images).
Then use the url to the location of the image in the background image property:
background-image: url(’…’);
or use the image in its currente location and provide the full url to it.
The reason css from BL1 won’t work is that in BL1, a product called Photoswipe was used to display galleries and images. In BL2 and BL3, Matt chose a product called Fancybox. Completely different structures so css for one won’t work on the other.
to italicize, it looks to me that this selector should be used: .fancybox-caption-collapsible .fancybox-caption
.fancybox-caption-collapsible .fancybox-caption {
font-style: italic;
}
Thanks. I’ll give that code a try.
Not sure what the issue is with the image path. Both sites pretty much mirror each other where file structure is concerned, so it’s weird one site sees the file, but the other doesn’t.
Anyway, I’ll give your suggestions a try. And once again, I thank you guys for the patience and help. Very much appreciated.
Thanks
you have that image in /backlight/custom/images/ in the sygnus21.com site as well?
When in doubt, just provide the full url to an image rather than messing with relative urls.
When using the image for background, why not just do it in the background setting on the design template? That is the way I did it on my site for a background and it was really easy to do - no css involved. https://terrancealexander.com
That setting is for the page background so I don’t think it will work for Andrew’s application.
He’s placing a textured image behind the Fancybox slideshow presentation.
Got it - thanks Rod and happy new year!