Options
Shadow - single image box
brandofamily
Registered Users Posts: 2,013 Major grins
Can someone point me in the direction of the code to add a drop shadow to a single image box? Please.
Here's an example galleryhttp://www.onbroadwaydancers.com/Info-Pages/On-Broadway-Dancers-Info/History-of-The-On-Broadway
Here's an example galleryhttp://www.onbroadwaydancers.com/Info-Pages/On-Broadway-Dancers-Info/History-of-The-On-Broadway
0
Comments
This is what I have in my smugmug style galleries, it appears to do both the rounded corners and drop shadow. NOTE: It's working on both the thumbs and the main image. I got it from one of the threads here on dgrin...may need to add that 'extra' fix but this should get you headed in the right direction. Wish I could tell you more, but I'm just cutting and pasting my way thru this...
Further testing seems to indicate the upper code is for the 'large image' in the gallery; the lower code is for the thumbs only.
/*rounded corners and drop shadow for the large image in galleries*/
.sm-tile-single.sm-tiles-uncropped .sm-image {
border: 5px solid #000000!important;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-webkit-box-shadow: 3px 3px 6px rgba(0, 0, 0, .5);
box-shadow: 3px 3px 6px rgba(0, 0, 0, .5);
-moz-box-shadow: 3px 3px 6px rgba(0, 0, 0, .5);
filter: progidXImageTransform.Microsoft.Shadow (Color='000000', direction='3', strength='3');
_filter: none;
}
/*rounded corners and drop shadow for the thumbs in galleries*/
.sm-tile-limit-both {
border: 2px solid #000000!important;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-webkit-box-shadow: 3px 3px 6px rgba(0, 0, 0, .5);
box-shadow: 3px 3px 6px rgba(0, 0, 0, .5);
-moz-box-shadow: 3px 3px 6px rgba(0, 0, 0, .5);
filter: progidXImageTransform.Microsoft.Shadow (Color='000000', direction='3', strength='3');
_filter: none;
}
Member: ASMP; EP; NPPA; CPS
Hopefully that will work I'm trying to get it going for on one of the sites I maintain. My site is too dark to use the shadows...
I really am looking to get the single image box pics to have a shadow though.
Thanks.
Not working
Images in the Backcountry
My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
.sm-page-widget-body .sm-tile-content { overflow: visible; } .sm-tiles-fit.sm-tiles-uncropped .sm-image { width: 90%; }Then add your drop-shadow to your radius photos.
Images in the Backcountry
My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
Ya, I can do an html page... just don't want to have to redo one... just removed it since we are all NEW Smuggy.
SM really should give the option of rounding and drop shadows since everyone seems to want it... have for years.
SM should have more options IMO. Did you try the code I posted?
Images in the Backcountry
My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
I assume you were referring to the Smugmug style gallery. Did not work. Still cutting off right sides.
Just so I know what happened...
did you use only the top code or both?
did you get any drop shadow?
or was the only result the cut off portion(s)?
Member: ASMP; EP; NPPA; CPS
Yes, That's odd. It worked when I used the Firefox Firebug tools.
Images in the Backcountry
My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk