Adding a drop shadow effect

elmani

Hi all,
I'd like to add a drop shadow effect to the thumbnails that are shown when someone views a gallery. Any idea how I do this??
Thanks in advance!

Hikin' Mike

Looks like you got it figured out.

elmani

Thanks for responding. Yes, I managed to find some code late last night. There is one slight issue which is the right hand edge of the thumbnails on the right hand side gets cut off. Any thoughts ? Thanks

Hikin' Mike

Try adding margin: 3px 9px 0 0; to the drop-shadow code you're using.

elmani

Really appreciate the help - unfortunately that didn't work. I don't know if it helps, but the code I'm using is:
.sm-gallery .sm-tile {
box-shadow: 3px 3px 6px #171207;
}

Hikin' Mike

@elmani said:
Really appreciate the help - unfortunately that didn't work. I don't know if it helps, but the code I'm using is:
.sm-gallery .sm-tile {
box-shadow: 3px 3px 6px #171207;
}

Are you sure you added it here:

.sm-gallery .sm-tile {
    box-shadow: 3px 3px 6px #171207;
    margin: 3px 9px 0 0;
    }

It worked for me.

elmani

Must have done something wrong before, just tried it again and it works perfectly! Thanks!!!

beardedlogic

I would like to do the same thing but to the gallery on my homepage. I don't know how to put the code onto my page with the new blocks system. Could someone please help me out? I found Mike's page and the tutorial on the SmugMug gallery style but I want it on the scroll gallery as on my homepage.

Kase
www.barefootedintherain.com

beardedlogic

I think I got it. It's cutting the shadow off on the right side of the gallery, so help would still be welcomed but tinkering on it for a couple hours finally yielded some fruit.

Update: So it turns out, using a fixed layout page will clip the outer left and right edges of a drop shadow. Changing margins and widths don't work, either. They were helpful. It's just an unfortunate casualty of the layout I'm using. If I stuck with a Stretchy layout, it would be fine.

Kase
barefootedintherain.com

Hikin' Mike

@beardedlogic said:
I think I got it. It's cutting the shadow off on the right side of the gallery, so help would still be welcomed but tinkering on it for a couple hours finally yielded some fruit.



Update: So it turns out, using a fixed layout page will clip the outer left and right edges of a drop shadow. Changing margins and widths don't work, either. They were helpful. It's just an unfortunate casualty of the layout I'm using. If I stuck with a Stretchy layout, it would be fine.



Kase

barefootedintherain.com

I'm not seeing a drop shadow on your home page. Did you decided to remove it?

beardedlogic

> @"Hikin' Mike" said:
> @beardedlogic said:
> I think I got it. It's cutting the shadow off on the right side of the gallery, so help would still be welcomed but tinkering on it for a couple hours finally yielded some fruit.
>
>
>
> Update: So it turns out, using a fixed layout page will clip the outer left and right edges of a drop shadow. Changing margins and widths don't work, either. They were helpful. It's just an unfortunate casualty of the layout I'm using. If I stuck with a Stretchy layout, it would be fine.
>
>
>
> Kase
>
> barefootedintherain.com
>
>
>
>
>
> I'm not seeing a drop shadow on your home page. Did you decided to remove it?

It's back on now! Sorry.

Hikin' Mike

@beardedlogic said:
It's back on now! Sorry.

Remove this:

.sm-tile {
    margin: 10px 10px 32px 32px;
    box-shadow: 8px 7px 10px #888;
    border: 5px solid #000;
}

Use this instead...

.sm-user-ui .sm-tiles-row-organic .sm-tile-content {
    border: 5px solid #000;
    -webkit-box-shadow: 8px 7px 10px #888;
       -moz-box-shadow: 8px 7px 10px #888;
        box-shadow: 8px 7px 10px #888;
    max-width: 90%;     
    }

beardedlogic

@Hikin' Mike said:

@beardedlogic said:
It's back on now! Sorry.

Remove this:

.sm-tile {
    margin: 10px 10px 32px 32px;
    box-shadow: 8px 7px 10px #888;
    border: 5px solid #000;
}

Use this instead...

.sm-user-ui .sm-tiles-row-organic .sm-tile-content {
  border: 5px solid #000;
  -webkit-box-shadow: 8px 7px 10px #888;
     -moz-box-shadow: 8px 7px 10px #888;
      box-shadow: 8px 7px 10px #888;
  max-width: 90%;     
  }

You, sir, are genius! Thank you! it lifted my spirits greatly when I saw you come back with a powerhouse solution! Only thing is, the photos aren't justified, but I can live with that. Thank you again!

Kase

Hikin' Mike

@beardedlogic said:
You, sir, are genius! Thank you! it lifted my spirits greatly when I saw you come back with a powerhouse solution! Only thing is, the photos aren't justified, but I can live with that. Thank you again!

Kase

Glad to help!

It really is justified if you look at the whole gallery. Also, you have a margin-right: 35px that isn't helping. But generally the way the galleries are designed, that's probably as close to being centered, with drop-shadows, as you're going to get.

beardedlogic

@Hikin' Mike said:

@beardedlogic said:
You, sir, are genius! Thank you! it lifted my spirits greatly when I saw you come back with a powerhouse solution! Only thing is, the photos aren't justified, but I can live with that. Thank you again!

Kase

Glad to help!

It really is justified if you look at the whole gallery. Also, you have a margin-right: 35px that isn't helping. But generally the way the galleries are designed, that's probably as close to being centered, with drop-shadows, as you're going to get.

I'll look into that margin-right. I'm getting happier with the site. What are you thoughts? I would appreciate a critique from a pro!