Removing border on background image

BillBassPhoto

I have some custom CSS code on the site https://www.billbassphoto.com/Projects which gives me a white border and shadow effect around the tiled image on the page. But it also seems to be applying a grey border around the background image that I have chosen to display. Is there a way to modify the code so that the border and shadow applies to the image tiles but not the background image/
.sm-user-ui .sm-tile-content {
overflow: visible;
width: 95%;
border: 4px solid white;
box-shadow: 0px 3px 3px rgba(255, 255, 255, .75);
}

.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/A) 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/A) no-repeat 0 0;
}

Hikin' Mike

Looks like you never fixed this: https://dgrin.com/discussion/265834/shadow-box-for-homepage#latest

BillBassPhoto

I did go back and get the url. The one in the sample code above ends with a '/A' which was different than before. So I don't follow.

Allen

No idea what you're doing but see this.
You have a link to a page in this not a photo.
background: url(https://www.smugmug.com/gallery/n-s72pfc/i-xFqXLbL/A) no-repeat 0 0;

Hikin' Mike

@BillBassPhoto said:
I did go back and get the url. The one in the sample code above ends with a '/A' which was different than before. So I don't follow.

Which still doesn't work. You need the url of the PICTURE not the Gallery. The image ends with .jpg or .png.

https://help.smugmug.com/share-my-photos-SJ4mxxD1NHM

BillBassPhoto

Tried that process. All I get is a '/A' ending in the url. No .jpg.

BillBassPhoto

Tried doing that for other images in other galleries, nothing ends in .jpg or .png.

Hikin' Mike

Did you read this? https://help.smugmug.com/share-my-photos-SJ4mxxD1NHM

You can grab a link for your Photo Only, HTML code for placing on your blog or elsewhere, or BBCode for sharing on a forum.

BillBassPhoto

I see what you are saying now, I thought I just needed to copy the Photo Link, not the Embedded Photo section. I got the url now. Let me update the url and see what happens. Thanks.

BillBassPhoto

I updated the url as you suggested. But in the end, the background statement didn't come out right, so I have just commented it out for now. The basic drop shadow I get from this code is good enough. But on the page that has the background image, I am still seeing the grey neat line around the edge. If I remove the CSS code, the grey neat line goes aways. Here is the code I have now. Screenshot of the page in question (https://www.billbassphoto.com/Projects) is attached.

.sm-user-ui .sm-tile-content {
overflow: visible;
width: 95%;
border: 4px solid white;
box-shadow: 0px 3px 3px rgba(255, 255, 255, .65);
}

.sm-user-ui .sm-tile-content:after {
content: "";
position: absolute;
top: 100%;
bottom: -30px;
width: 165px;
right: -20px;
/background: url(https://photos.smugmug.com/photos/i-xFqXLbL/0/d66c30b3/Ti/i-xFqXLbL-Ti.png) 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://photos.smugmug.com/photos/i-xFqXLbL/0/d66c30b3/Ti/i-xFqXLbL-Ti.png) no-repeat 0 0;/
}

Hikin' Mike

Then you need to remove the code you've been using and let me know specifically what you are trying to do.

BillBassPhoto

At this point, for this particular page at https://www.billbassphoto.com/Projects I want to keep the outline of the image and drop shadow as it is now. But I don't want that grey border which seems to box in the background image. This code seems to be applying to all images on the page. But it's unclear why the background image is grey when the tiled image is white. It's just he grey outline in the background image I want get rid of.

Hikin' Mike

Remove this:

.sm-user-ui .sm-tile-content {
    overflow: visible;
    width: Fill;
    border: 4px solid #fff;
    box-shadow: 0 3px 3px rgba(255, 255, 255, .65)
}

.sm-user-ui .sm-tile-content:after {
    content: "";
    position: absolute;
    top: 100%;
    bottom: -30px;
    width: 165px;
    right: -20px
}

.sm-user-ui .sm-tile-content:before {
    content: "";
    position: absolute;
    top: 100%;
    bottom: -30px;
    width: 165px;
    left: -20px
}

Use this:

.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 {
  border: 4px solid #fff;
  box-shadow: 0 3px 3px rgba(255, 255, 255, .65)
}

Hikin' Mike

@BillBassPhoto said:
I updated the url as you suggested. But in the end, the background statement didn't come out right, so I have just commented it out for now.

It is because the image you are using is too small (100px x 8px). You need to use the original size which is 220px x 26px.

I'm going to comment on that other thread so this doesn't get confusing.

BillBassPhoto

Yes. That works. Thank you. One follow-on question. This page https://www.billbassphoto.com/customize/Projects/SCNT is using the same concept. I know from the prior code SmugMug was using the .sm-video reference to draw the border around the video object I have on the left side. I also need a box around the single photo item in the top left. I added in the .sm-video so the code looks like this now for the actual project page. But can't get the single photo to get a border. I also added in the overflow hidden as that kept some images from spilling over the border.
.sm-user-ui .sm-tile-page .sm-tile-content, .sm-video,
.sm-user-ui .sm-tile-album .sm-tile-content,
.sm-user-ui .sm-tile-folder .sm-tile-content {
overflow: hidden;
border: 4px solid #fff;
box-shadow: 0 3px 3px rgba(255, 255, 255, .65)
}

Hikin' Mike

Use this:

.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-tile-single .sm-tile-content {
  overflow: hidden;
  border: 4px solid #fff;
  box-shadow: 0 3px 3px rgba(255, 255, 255, .65)
}

BillBassPhoto

Still seem to be getting the grey border around the background image.

BillBassPhoto

Seems like this statement applies to both the background image and the single photo in the upper left corner. So if they treat both as the same, I may need to decide if I can live with the neat line around the page or omit the border for that one image.
.sm-tile-single

Hikin' Mike

.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: 4px solid #fff;
    box-shadow: 0 3px 3px rgba(255, 255, 255, .65)
}

BillBassPhoto

Great. One last piece. This page (https://www.billbassphoto.com/Photo-Essays/Protecting-Waterways) is a photo essay page and uses the multi-photo model at the bottom. Do you know what I would use in the above code to reference it to draw a border. Put this in for now.
.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: 4px solid #fff;
box-shadow: 0 3px 3px rgba(255, 255, 255, .65)
}

Hikin' Mike

I need to step away from the computer for a while (wife's birthday). I'll continue later.

Hikin' Mike

.sm-page-node-4DhMBV .sm-tiles-row-organic .sm-tiles-list {overflow: visible;}

.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,
.sm-user-ui .sm-tiles-row-organic .sm-tile-photo {
  border: 4px solid #fff;
  box-shadow: 0 3px 3px rgba(255, 255, 255, .65)
}

.sm-page-node-4DhMBV is for this page only: https://www.billbassphoto.com/Photo-Essays/Protecting-Waterways

BillBassPhoto

Thanks again. That worked great. Appreciate the assistance.