Adding a drop shadow effect

elmanielmani Registered Users Posts: 97 Big grins

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!

Comments

  • elmanielmani Registered Users Posts: 97 Big grins

    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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
  • elmanielmani Registered Users Posts: 97 Big grins

    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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

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

  • elmanielmani Registered Users Posts: 97 Big grins

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

  • beardedlogicbeardedlogic Registered Users Posts: 23 Big grins
    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
    Kase
    Won't know where I'm going 'til I get there.
    http://kasejameson.smugmug.com
  • beardedlogicbeardedlogic Registered Users Posts: 23 Big grins
    edited April 5, 2018
    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
    Kase
    Won't know where I'm going 'til I get there.
    http://kasejameson.smugmug.com
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

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

  • beardedlogicbeardedlogic Registered Users Posts: 23 Big grins
    > @"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.
    Kase
    Won't know where I'm going 'til I get there.
    http://kasejameson.smugmug.com
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited April 10, 2018

    @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%;     
        }
    
  • beardedlogicbeardedlogic Registered Users Posts: 23 Big grins

    @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

    Kase
    Won't know where I'm going 'til I get there.
    http://kasejameson.smugmug.com
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

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

  • beardedlogicbeardedlogic Registered Users Posts: 23 Big grins

    @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!

    Kase
    Won't know where I'm going 'til I get there.
    http://kasejameson.smugmug.com
Sign In or Register to comment.