Box-shadow for all images

brlewisbrlewis Registered Users Posts: 36 Big grins
I am trying to add box-shadows for all my images throughout my site, i realize there are many threads on this topic which i have taken the css from and have it mostly working but have a few questions. All my images have box-shadows working but I believe there are probably to many elements listed, any advise on what i should keep or delete, here is my CSS.

.sm-tile-content, .sm-user-ui .sm-video, .sm-user-ui .sm-tile-page .sm-tile-content, .sm-user-ui .sm-tile-album .sm-tile-content, .sm-user-ui .sm-tile-folder .sm-tile-content, .sm-user-ui .sm-tiles-center-image .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%;
}

My second issue is that when I using the build a page feature and insert a single photo, then size the photo based on Small, Medium, Large... the box-shadow appears around the enter cell instead of just the photo, what is the best way to manage this or what element should I add to my CSS above. In the sample page below you will see the top image which is full size is fine but the ones down lower are using the Medium Large sizing and are not correct.

Sample Page: https://gallery.inmylens.com/MyBlog/2019/Humpback-Whale-Breaching

Thank you very much in advance
Brad

Comments

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    Remove your current CSS and add this instead:

    /** 
    * Adds Border and Drop Shadow
    ***********************************************************/
    .sm-user-ui .sm-tile-page .sm-tile-content,
    .sm-user-ui .sm-tile-album .sm-tile-content,
    .sm-user-ui .sm-tile-folder .sm-tile-content,
    .sm-user-ui .sm-tiles-row-organic .sm-tile-content,
    .sm-user-ui .sm-tile-single .sm-tile-content .sm-image {
      border: 5px solid #000;
      box-shadow: 8px 7px 10px #888;
      margin: auto;
      max-width: 90%;
    }
    
    .sm-user-ui .sm-tile-single .sm-tile-content {overflow: visible;}
    
      /* Removes border and shadow on Avatar */
    .sm-user-ui .sm-tile-single .sm-tile-content .sm-tile-portrait {
      border: none;
      box-shadow: none;
    }
    
  • brlewisbrlewis Registered Users Posts: 36 Big grins
    Thank you very much, Perfect, Perfect, Perfect,
    Thanks Again
  • brlewisbrlewis Registered Users Posts: 36 Big grins
    Mike, I also should have said and thanks for the extra tidbit on removing the border/shadow from the Avatar.
    Brad
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    @brlewis said:
    Mike, I also should have said and thanks for the extra tidbit on removing the border/shadow from the Avatar.
    Brad

    No problem! I noticed it after doing the other stuff. Figured you wouldn't want that, so I added it. B)

  • brlewisbrlewis Registered Users Posts: 36 Big grins
    Sorry one more question, is it possible to also add this to the lightbox V2?
    Thanks
    Brad
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    @brlewis said:
    Sorry one more question, is it possible to also add this to the lightbox V2?
    Thanks
    Brad

    Yes, but it won't look correct if you use larger images like this one: https://gallery.inmylens.com/MyBlog/2019/Humpback-Whale-Breaching

    Just add this .sm-user-ui .sm-lightbox-v2-content .sm-position-relative to the top section (already done here):

    /** 
    * Adds Border and Drop Shadow
    ***********************************************************/
    .sm-user-ui .sm-tile-page .sm-tile-content,
    .sm-user-ui .sm-tile-album .sm-tile-content,
    .sm-user-ui .sm-tile-folder .sm-tile-content,
    .sm-user-ui .sm-tiles-row-organic .sm-tile-content,
    .sm-user-ui .sm-tile-single .sm-tile-content .sm-image,
    .sm-user-ui .sm-lightbox-v2-content .sm-position-relative {
      border: 5px solid #000;
      box-shadow: 8px 7px 10px #888;
      margin: auto;
      max-width: 90%;
    }
    
    .sm-user-ui .sm-tile-single .sm-tile-content {overflow: visible;}
    
      /* Removes border and shadow on Avatar */
    .sm-user-ui .sm-tile-single .sm-tile-content .sm-tile-portrait {
      border: none;
      box-shadow: none;
    }
    
  • brlewisbrlewis Registered Users Posts: 36 Big grins
    ok thanks Mike
  • brlewisbrlewis Registered Users Posts: 36 Big grins
    Mike, can you take a look, I made a change to the lightbox to use
    .sm-lightbox-v2-photo instead of .sm-user-ui .sm-lightbox-v2-content .sm-position-relative

    https://gallery.inmylens.com/MyBlog/2019/Humpback-Whale-Breaching
    each photo opens light box except the top one.

    I am not sure the impact of leaving the other definitions/elements off, but playing around and looking at google inspect it is what worked.
    The issue is that is now also adding the box-shadow to the caption/buy button area. I am not sure if there is a way to exclude that block?

    Thanks
    Brad
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    @brlewis said:
    Mike, can you take a look, I made a change to the lightbox to use
    .sm-lightbox-v2-photo instead of .sm-user-ui .sm-lightbox-v2-content .sm-position-relative

    https://gallery.inmylens.com/MyBlog/2019/Humpback-Whale-Breaching
    each photo opens light box except the top one.

    I am not sure the impact of leaving the other definitions/elements off, but playing around and looking at google inspect it is what worked.
    The issue is that is now also adding the box-shadow to the caption/buy button area. I am not sure if there is a way to exclude that block?

    Thanks
    Brad

    What you are seeing now is the gradient that SmugMug uses behind the captions. If you use the code I provided, you won't see it.

  • brlewisbrlewis Registered Users Posts: 36 Big grins

    Mike, you made comment about the box-shadow not working with larger image sizes:
    "Yes, but it won't look correct if you use larger images like this one: https://gallery.inmylens.com/MyBlog/2019/Humpback-Whale-Breaching"

    Do you have a recommended size? Do you recommend controlling this through the smugmug gallery settings > photo protection > maximum display size or by limiting the size you export from lightroom? I had mine set to all but original and as you can see they are very large.

    Thank you
    Brad

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited May 8, 2020

    I don't own Lightroom. I'm still using CS2.

    I limit the displayed size in the Gallery Settings. I use X2.

  • brlewisbrlewis Registered Users Posts: 36 Big grins

    Thank you Mike I will try that, thank you

    I did find one more set of images the box-shadow does not show up on, fyi right now i have the shadow as an orange color.
    It is the middle set of images, they are using SM multiple photos, where i choose the photos.
    https://gallery.inmylens.com/MyBlog/2018/Hummingbird-day-2018-UCSC

    i tried using google chrome inspect and looking at the element styles but clearly am missing something, below are the elements i was trying different combinations with
    .sm-user-ui .sm-image-center-vertical .sm-tiles-center-image .sm-tile-limit-width,

    Thank you
    Brad

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    If you had added the code earlier to your theme's CSS section, it would have worked.

    /** 
    * Adds Border and Drop Shadow
    ***********************************************************/
    .sm-user-ui .sm-tile-page .sm-tile-content,
    .sm-user-ui .sm-tile-album .sm-tile-content,
    .sm-user-ui .sm-tile-folder .sm-tile-content,
    .sm-user-ui .sm-tiles-row-organic .sm-tile-content,
    .sm-user-ui .sm-tile-single .sm-tile-content .sm-image,
    .sm-user-ui .sm-lightbox-v2-content .sm-position-relative {
      border: 5px solid #000;
      box-shadow: 8px 7px 10px #888;
      margin: auto;
      max-width: 90%;
    }
    
    .sm-user-ui .sm-tile-single .sm-tile-content {overflow: visible;}
    
      /* Removes border and shadow on Avatar */
    .sm-user-ui .sm-tile-single .sm-tile-content .sm-tile-portrait {
      border: none;
      box-shadow: none;
    }
    
  • brlewisbrlewis Registered Users Posts: 36 Big grins

    ok I now only have 2 CSS changes in my Theme CSS, under advanced > Custom CSS

    The Hamburger code which I believe you helped me with years ago and now have pasted in your code from above and i still do not see the box-shadow on those center justified gallery, Sorry for being dense or miss understanding.

    https://gallery.inmylens.com/MyBlog/2018/Hummingbird-day-2018-UCSC

    brad

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    I missed the "middle images" part. I beginning to think you aren't going to have "your cake and eating it too". I added .sm-user-ui .sm-tiles .sm-tile-content in two places. Problem with that is you use different ratios. There is going to be a white space unless you add background-color: #000 (like I did).

    /** 
    * Adds Border and Drop Shadow
    ***********************************************************/
    .sm-user-ui .sm-tiles .sm-tile-content,
    .sm-user-ui .sm-tile-page .sm-tile-content,
    .sm-user-ui .sm-tile-album .sm-tile-content,
    .sm-user-ui .sm-tile-folder .sm-tile-content,
    .sm-user-ui .sm-tiles-row-organic .sm-tile-content,
    .sm-user-ui .sm-tile-single .sm-tile-content .sm-image,
    .sm-user-ui .sm-lightbox-v2-content .sm-position-relative {
      border: 5px solid #000;
      box-shadow: 8px 7px 10px #888;
      margin: auto;
      max-width: 90%;
    }
    
    .sm-user-ui .sm-tiles .sm-tile-content {
      max-width: 100%;
      background-color: #000;
    }
    
    .sm-user-ui .sm-tile-single .sm-tile-content {overflow: visible;}
    
      /* Removes border and shadow on Avatar */
    .sm-user-ui .sm-tile-single .sm-tile-content .sm-tile-portrait {
      border: none;
      box-shadow: none;
    }
    
  • brlewisbrlewis Registered Users Posts: 36 Big grins

    Yeah, thank you very much!!!!
    And i am changing my max image size
    thank you
    Brad

Sign In or Register to comment.