Shadow - single image box

brandofamily

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

brandofamily

Everyone on holiday?

rich56k

brandofamily wrote: »

Everyone on holiday?

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;
}

brandofamily

rich56k wrote: »

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;
}

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.

brandofamily

brandofamily wrote: »

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 ... its cutting off the left side of each thumb as well as the main image.

Hikin' Mike

If that doesn't work, you can create that page by just using a HTML page. I'm have to step out for a few minutes, but I can show you when I get back.

Hikin' Mike

Try this. Add this to your CSS:

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

brandofamily

Hikin' Mike wrote: »

If that doesn't work, you can create that page by just using a HTML page. I'm have to step out for a few minutes, but I can show you when I get back.

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.

Hikin' Mike

brandofamily wrote: »

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?

brandofamily

Hikin' Mike wrote: »

Try this. Add this to your CSS:

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

I assume you were referring to the Smugmug style gallery. Did not work. Still cutting off right sides.

rich56k

brandofamily wrote: »

Not working ... its cutting off the left side of each thumb as well as the main image.

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)?

Hikin' Mike

brandofamily wrote: »

I assume you were referring to the Smugmug style gallery. Did not work. Still cutting off right sides.

Yes, That's odd. It worked when I used the Firefox Firebug tools.

brandofamily

rich56k wrote: »

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)?

I used both parts and attempted to add the shadow.