Box-shadow for all images

brlewis

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

Hikin' Mike

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

brlewis

Thank you very much, Perfect, Perfect, Perfect,
Thanks Again

brlewis

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

Hikin' Mike

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

brlewis

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

Hikin' Mike

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

brlewis

ok thanks Mike

brlewis

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' Mike

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

brlewis

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' Mike

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

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

brlewis

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' Mike

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

brlewis

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' Mike

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

brlewis

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