We’ve already shared a way to add rounded corners to your gallery thumbnails. In this article you will see how to add shadows.
Below is a snippet of CSS that you can customize. The purpose of this small CSS snippet is to add shadows to your NextGEN Gallery Thumbnails. (as you see in the gallery above)
In the demo, the shadow is set to 3px and a medium grey, but you can change the color and thickness as per your liking.
If you want to combine both the shadow and the rounded corners, here is a snippet of CSS for that:
Thanks and enjoy,
Scott
As a reminder, to see the gallery, you must be viewing this in the browser and not through email or in RSS software. The post must be viewed from its own URL and not from the main blog page. Also If you are not familiar with CSS and/or do not feel comfortable making changes like this to your website, please do not attempt it.
I put this in a custom.css file that contains code for a child theme, and it appears not to be working. Does it need to be in the parent theme’s css file (in which case it will get overwritten on the next update) or somewhere else altogether?
thx
It can be in the child theme and in any CSS file, but the file needs to be called in the backend. Is the custom.css file part of the child theme or did you just create the file?
I’m not sure what “needs to be called in the backend” means. The custom.css came with the parent / child theme pair; when I make other changes in that file, I see them on my site right away.
The gallery for which the box shadow is not appearing is called with this shortcode:
[nggallery id=5 template=caption ngg_gal_Columns=1]
Is it possible it’s the shortcode that’s blocking the shadow?
Hi Karen,
I just tried it on your site and it worked without a problem. So it’s definitely that the custom.css file is not being used. Here is a screenshot so you can see the script in action on your site: http://monosnap.com/image/KnuqrBYtDvkyXvQ9SsfJKMvJe
Moved the code higher in the file–apparently there’s a branch in there somewhere and it wasn’t getting read at the end where I pasted it. Works now.
thx
Thanks for the tutorial! It worked flawlessly, first time on my WordPress/NextGEN Gallery powered website (check out http://cladlab.com/electronics/projects/electric-skateboard/electric-skateboard-photo-album to see the results).
Thanks it worked like a charm :)