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
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
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:
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:
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.
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?