Drop shadows around an album

Backlight Customization
#1

Hi, I inserted an album on my home page here: www.sygnus21.com/ and would like to have a drop shadow around it similiar to this one here: www.exposedvisions.com. What is the proper code for this? It is vegas-slide img

I’m using the theatre add-in.

Thanks.

#2

Can I get some help on this please?

Thanks

#3

Try the CSS box-shadow property on the slideshow container.

#4

It’s a little bit tricky because of how the Vegas slide show is constructed. Using the browser inspector you can see that the images are inserted as background-images in the div rather than being an img element. So there is no img to target.
And the vegas container is taking up the space of the #gallery div so the shadows, which extend beyond the size of the Vegas container, won’t show without some extra css.

here are two ways I found for this to work on your site.

Target the #gallery div
Since the slide show images seem to all be the same aspect ratio as the container (or you’re using the “Cover” Image Scaling option), you can use

   #gallery {
      	border:1px solid black;
      	box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);	
      }

However, that will affect all #gallery divs on your site so you’d also want to target using the body class for either the slug or the template name, depending on where else you may want to use this styling. See this post:

Target the .vegas-slide div
Another way is to increase the margin on the .vegas-slide div:

.vegas-slide {
	border:1px solid black;
	box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);	
	margin: 8px; //experiment with margin size
	}

If you do this, also change the Vegas background color in the template to match your page background color. Or add this to your css:

.vegas-container {
	background-color: #E4E4E3;
}

Again, if you only want this styling on this page, then add a body class to each selector.

In both cases above, the only reason that this css will appear to put drop shadows on the images is that you’re either using the “Cover” Image scaling option or your images are the same aspect ratio as the container.

The shadows are actually being added to the container (whether the #gallery div or the .vegas-slide div), like Matt mentioned above.
If you’re using the “Fit” Image scaling option and you use a different aspect ratio for the show or if any images differ from the aspect ratio of the container, then things would look weird since the container would be larger than the images and the border/shadow is being to applied to the container.

2 Likes
#5

I can’t get any of those to work :frowning:

Sorry, I am trying to code, but I always sucked at it.

Thanks.

#7

clear your browser cache. You should see it working then

#8

Yeah, that was the issue. Working now. Just have to tweak. Thanks :ok_hand:

#9

Another question…

Yes, I wish to target only the home page; however the above is clear as mud to me. I think I found the identifier, but am completely unclear on how to isolate and code so that only the home page is affected.

Looking at the code you used to do what you did is confusing to me and I’ve no idea what to code to use only use my home page. I see “slideshow” but what else and how do I code for it?

Sorry.

#10

if you want to just target that page, I’d use the “slug” body class. If you look at your page source code and look for the “body” tag, you’ll find:

<body class="pangolin type-page template-id-1 pages-template-id-6 pages-template-identifier-home album-template-id-10 album-template-identifier-slideshow slug-slideshow cart-unready crg-unready" data-layout="1col left">

the slug body class is “slug-slideshow”

In your css, precede your selector(s) with that class.

.slug-slideshow #gallery {
      	border:1px solid black;
      	box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);	
      }
1 Like
#11

Perfect. That works. And I get it now (I think). As noted to target the specific page just proceed the code with the target name, here “slug-slideshow”.

Thanks for your help and patience :+1:

#12

yep. Just be sure to add that dot in the front: .slug-slideshow

1 Like
#13

I see you guys don’t have a rep system so thanks for the help. And appreciate you guys not only support your product, but your customers as well.

Anyway, I’m about ready for the site to go live. Just need to set up the galleries and upload the images.

Thanks a lot rod_barbee. Really appreciate the help… and patience :+1:t3:

2 Likes