Shadow Box for Homepage

BillBassPhoto · December 2, 2019

I am trying to modify some CSS code that SmugMug support provided me on my SmugMug homepage. I want the images in the homepage carousel to be in a shadow box like the on this page https://www.bassinteriorswoodlands.com but with a black border instead of gold. I like more 'curved' style shadow as compared to the one I have now which just drops down and to the right.

Below is the current CSS code I am using. What do I need to modify to get this changed to be like the one I want?

.sm-tile-content {
overflow: visible;
}

.sm-tile-single.sm-tiles-uncropped .sm-image {
-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: progid:DXImageTransform.Microsoft.Shadow (Color='000000', direction='3', strength='3');
_filter: none;
}

.sm-tile-limit-both {
-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: progid:DXImageTransform.Microsoft.Shadow (Color='000000', direction='3', strength='3');
_filter: none;
}

Thanks.

Bill

Hikin' Mike · December 2, 2019

Not sure if I can help, but I (or one of the helpers) first need your website.

BillBassPhoto · December 2, 2019

Sure. My website is www.BillBassPhoto.com. As you will see the support person from SmugMug was able to create a drop shadow using the code above.

Hikin' Mike · December 2, 2019

They do some neat stuff. They are using a custom png shadow to display those "corners". You will need to upload that to your site and then copy the image url and replace the 'shadow-image-here`.

Then remove the code you used and use this:

/**
* Slideshow
***************************************************/
.sm-user-ui .sm-tile-content {
  overflow: visible;
  width: 95%;
  border: 2px solid black;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, .5);
}


.sm-user-ui .sm-tile-content:after {
  content: "";
  position: absolute;
  top: 100%;
  bottom: -30px;
  width: 165px;
  right: -20px;
  background: url(shadow-image-here) no-repeat 100% 0;
}

.sm-user-ui .sm-tile-content:before {
  content: "";
  position: absolute;
  top: 100%;
  bottom: -30px;
  width: 165px;
  left: -20px;
  background: url(shadow-image-here) no-repeat 0 0;
}

BillBassPhoto · December 4, 2019

So are you saying I take the shadow.png file you posted and put into one of my SmugMug galleries, then take that full url and use it in place of the 'shadow-image-here' reference in your code above?

BillBassPhoto · December 4, 2019

I uploaded the shadow.png file you attached to a SmugMug gallery on my site that I use to store other images e.g. watermarks, logos, etc. I opened the image and copies the url from the browser, and then placed it into the code you provided. I get a dark black border, but no shadow. Here is the CSS code I tried:
/**
* Slideshow
***************************************************/
.sm-user-ui .sm-tile-content {
overflow: visible;
width: 95%;
border: 2px solid black;
box-shadow: 0px 1px 3px rgba(0, 0, 0, .5);
}

.sm-user-ui .sm-tile-content:after {
content: "";
position: absolute;
top: 100%;
bottom: -30px;
width: 165px;
right: -20px;
background: url(https://www.smugmug.com/gallery/n-s72pfc/i-xFqXLbL) no-repeat 100% 0;
}

.sm-user-ui .sm-tile-content:before {
content: "";
position: absolute;
top: 100%;
bottom: -30px;
width: 165px;
left: -20px;
background: url(https://www.smugmug.com/gallery/n-s72pfc/i-xFqXLbL) no-repeat 0 0;
}

BillBassPhoto · December 4, 2019

I tried playing around with the settings. Here is the code I'm using. But I still don't see much in the way of the curved corners and no matter what I set the 'box-shadow: 0px 1px 3px rgba(0, 0, 0, .99);' to in the line below, I can't increate the shadow. At best a value of .99 is about as much as I can increase it.
/**
* Slideshow
***************************************************/
.sm-user-ui .sm-tile-content {
overflow: visible;
width: 95%;
border: 4px solid white;
box-shadow: 0px 1px 3px rgba(0, 0, 0, .99);
}

.sm-user-ui .sm-tile-content:after {
content: "";
position: absolute;
top: 100%;
bottom: -30px;
width: 165px;
right: -20px;
background: url(https://www.smugmug.com/gallery/n-s72pfc/i-xFqXLbL) no-repeat 100% 0;
}

.sm-user-ui .sm-tile-content:before {
content: "";
position: absolute;
top: 100%;
bottom: -30px;
width: 165px;
left: -20px;
background: url(https://www.smugmug.com/gallery/n-s72pfc/i-xFqXLbL) no-repeat 0 0;
}

BillBassPhoto · December 4, 2019

On a related topic. Do you know what I would need to change in the code above to apply the same style to the gallery cover image in my galleries. For example, for my gallery page https://www.billbassphoto.com/Galleries/Monochrome I would like to have the cover image at the top have the same affect. I do already have a CSS block on that page with the following code to remove some of the 'Buy' buttons I didn't want, so I would want to keep this:
/*Hide entire "Buy" button at top*/ .sm-gallery-cover-buy-button {display:none;}
/*Hide the "Buy Photos" text*/ .sm-gallery-cover-buy-button span:nth-of-type(1) { display: none; }
/*Hide the "From this gallery option"*/ .yui3-menu-children #BuyPhotos {display:none;}

Thank you Mike for your assistance.

Hikin' Mike · December 8, 2019

Sorry, I've been off line for awhile.

In order for this to work, you need the URL of the image. Use the Share Button to copy the photo's URL: https://help.smugmug.com/share-my-photos-SJ4mxxD1NHM

You just need "Photo Only".

Hikin' Mike · December 19, 2019

If you use the original size (220px x 26px) and add that to your HOME PAGE CSS ONLY, this will work.

Shadow Box for Homepage

Comments