Add border around new style Smugmug slide show

slipkid · August 4, 2013

I am loving the new features in the "NEW" Smugmug. I would like to add a border around my slide shows. I found some CSS code but I am only able to have the border go around 3/4 on the slide show.
Thanks

http://www.slipkid.com/

Sir_Eagle · August 4, 2013

slipkid wrote: »

I am loving the new features in the "NEW" Smugmug. I would like to add a border around my slide shows. I found some CSS code but I am only able to have the border go around 3/4 on the slide show.
Thanks

http://www.slipkid.com/

What is the code you're using?

slipkid · August 4, 2013

Sir_Eagle wrote: »

What is the code you're using?

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

.sm-tile-single.sm-tiles-uncropped .sm-image {
border: 5px solid #8f7b62!important;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-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 {
border: 2px solid #000000!important;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-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;
}

Sir_Eagle · August 4, 2013

Is it the size of the slideshow box itself isn't big enough?

Sir_Eagle · August 4, 2013

Looking at this post by ko04:
http://www.dgrin.com/showpost.php?p=1888134&postcount=10

You might need to add the bold blue 0:
-webkit-box-shadow: .5px .5px 0 5px rgba(0, 0, 0, 1);
box-shadow: .5px .5px 0 5px rgba(0, 0, 0, 1);

rich56k · August 5, 2013

slipkid wrote: »

I am loving the new features in the "NEW" Smugmug. I would like to add a border around my slide shows. I found some CSS code but I am only able to have the border go around 3/4 on the slide show.
Thanks

http://www.slipkid.com/

First thanks for your border code - I used just the first half on my single slideshow and it works great!

What I noticed on my home page SS was if I used a super thick border (20px or so) the border was affected by the slideshow control arrows...this made me think about your issue -looking at your home page, if I widen your page to the full width of my monitor (20" iMac) - you actually DO have all 4 sides of each border but then a second later your images expand larger and cover the 4th side of each... you should be able to duplicate this effect

Look I don't know code but it's something in the sizing/borders/etc that is covering it up... hope that makes sense and can help you.

rich56k

slipkid · August 5, 2013

Sir_Eagle wrote: »

Looking at this post by ko04:
http://www.dgrin.com/showpost.php?p=1888134&postcount=10

You might need to add the bold blue 0:
-webkit-box-shadow: .5px .5px 0 5px rgba(0, 0, 0, 1);
box-shadow: .5px .5px 0 5px rgba(0, 0, 0, 1);

Thanks for the help.

Jingle Images · August 5, 2013

slipkid wrote: »

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

.sm-tile-single.sm-tiles-uncropped .sm-image {
border: 5px solid #8f7b62!important;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-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 {
border: 2px solid #000000!important;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-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;
}

You need to add this code

Width:93%;

slipkid · August 6, 2013

Jingle Images wrote: »

You need to add this code

Width:93%;

That does solve the issue I was having with the border around all sides of the slide show. Thanks for that tip. The code I am using now is below, it rounds off the corners and adds a slight shadow.

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

.sm-tile-single.sm-tiles-uncropped .sm-image {
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-webkit-box-shadow: 4px 0 4px rgba(0, 0, 0, .5);
width: 93%;
filter: progid:DXImageTransform.Microsoft.Shadow (Color='000000', direction='3', strength='3');
_filter: none;
}

.sm-tile-limit-both {
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-webkit-box-shadow: 4px 0 4px rgba(0, 0, 0, .5);
width: 93%;
filter: progid:DXImageTransform.Microsoft.Shadow (Color='000000', direction='3', strength='3');
_filter: none;
}

Uncle Bum · August 7, 2013

Thanks for the help...
I have successfully used your CSS to create great drop shadows for my Homepage slideshow as well as drop shadows on each primary image within each of my galleries. Each galleries style is set to 'SmugMug'. Once you open a gallery all the images are in the form of thumb nails + one larger, selected image. It is that image where I have added a drop shadow.

A viewer can double click that larger image and the action will initiate a slide show with images rendered in a larger size. I was hoping to also apply your code to those larger slideshow images. So far I have not been successful.

Do you have any suggestions on how to do that?

Thanks for your help!

Uncle Bum

Jingle Images · August 7, 2013

Uncle Bum wrote: »

I have successfully used your CSS to create great drop shadows for my Homepage slideshow as well as drop shadows on each primary image within each of my galleries. Each galleries style is set to 'SmugMug'. Once you open a gallery all the images are in the form of thumb nails + one larger, selected image. It is that image where I have added a drop shadow.

A viewer can double click that larger image and the action will initiate a slide show with images rendered in a larger size. I was hoping to also apply your code to those larger slideshow images. So far I have not been successful.

Do you have any suggestions on how to do that?

Thanks for your help!

Uncle Bum

Here is the code you need for that.

.sm-lightbox .sm-lightbox-image, .sm-lightbox .sm-lightbox-image-icon{
-webkit-box-shadow: 7px 7px 3px 
rgba(0, 0, 0, .6);
box-shadow: 7px 7px 3px 
rgba(0, 0, 0, .6);
}

Uncle Bum · August 7, 2013

Thanks, Again!
Worked like a charm!

If you would like to see how your help has added to my website, check it out at:
www.exploring-photography.com

Thanks again.
Jim Simpson

Jingle Images · August 7, 2013

Uncle Bum wrote: »

Worked like a charm!

If you would like to see how your help has added to my website, check it out at:
www.exploring-photography.com

Thanks again.
Jim Simpson

looks good but,
I think your missing your Header logo. Might be a bad link.

Just FYI

Uncle Bum · August 7, 2013

Header Logo Missing...
I am not sure what you are referring to. I think of my Header Logo as a stylized and centered version of:

Jim Simpson
exploring photography

If this did not appear on my site when you visited, then I do have a problem - cause it does appear when I am logged in or logged out...

If what I describe is not what you are referring to as a header logo - I do not know what you are referring to but am concerned that something is not working properly.

Would you mind trying to describe what you believe is missing?
Thanks

Jingle Images · August 7, 2013

Uncle Bum wrote: »

I am not sure what you are referring to. I think of my Header Logo as a stylized and centered version of:
Jim Simpson
exploring photography

If this did not appear on my site when you visited, then I do have a problem - cause it does appear when I am logged in or logged out...

If what I describe is not what you are referring to as a header logo - I do not know what you are referring to but am concerned that something is not working properly.

Would you mind trying to describe what you believe is missing?
Thanks

No that does not show up here.
That is the logo I'm talking about

aschendel · August 7, 2013

I also confirmed - that image doesn't show on your website. Is the image unlisted or private, or in a folder that is? Maybe you happen to have a copy in your browser cache.

a.s.

Uncle Bum · August 7, 2013

No Logo Visible
Guys, first, thanks a bunch for checking out my site. I would never have known the logo was not displaying, since it showed up on my screen.

Second, the original logo image was in a 'private' gallery. I changed that to make it 'public'. The folder the gallery resides in is also now listed as public. Thanks for asking, I would never have thought to consider that a problem.

Interestingly, when I went back to look at the image loaded into the logo page I got an error message that I could not make go away (indicating the image was flawed in some way). I even deleted the logo block and tried using a single photo block and then a text block using a title. None of these worked with that particular image - it happens to be a .png file. Is there a problem using .png files?

So, I went onto my hard drive and resurrected a bunch of my historic images I had created for logos. I uploaded them into a new gallery located in the same folder. I made sure each file I uploaded had been resaved as a .jpg. I loaded one and it appears to work while I am logged in and logged out.

Do you see the logo, now? thanks for checking.

Jingle Images · August 7, 2013

Uncle Bum wrote: »

Guys, first, thanks a bunch for checking out my site. I would never have known the logo was not displaying, since it showed up on my screen.

Second, the original logo image was in a 'private' gallery. I changed that to make it 'public'. The folder the gallery resides in is also now listed as public. Thanks for asking, I would never have thought to consider that a problem.

Interestingly, when I went back to look at the image loaded into the logo page I got an error message that I could not make go away (indicating the image was flawed in some way). I even deleted the logo block and tried using a single photo block and then a text block using a title. None of these worked with that particular image - it happens to be a .png file. Is there a problem using .png files?

So, I went onto my hard drive and resurrected a bunch of my historic images I had created for logos. I uploaded them into a new gallery located in the same folder. I made sure each file I uploaded had been resaved as a .jpg. I loaded one and it appears to work while I am logged in and logged out.

Do you see the logo, now? thanks for checking.

Yes it's working.

Uncle Bum · August 7, 2013

Another successful trouble shooting exercise...
Thanks!

Now I have to figure out how I made the first logo so it blended so seamlessly into my 'linen' background.
Then, my site should be ready to go.

This has been very interesting for another reason. I had that same image as my logo on the 'old' site.
I never had much traffic. I wonder if my logo never showed up there, either? Would that be a problem for web crawlers to identify my site and 'spread the word'? That was about a years worth of exposure (or lack of it...).

Jingle Images · August 8, 2013

Uncle Bum wrote: »

Thanks!

Now I have to figure out how I made the first logo so it blended so seamlessly into my 'linen' background.
Then, my site should be ready to go.

This has been very interesting for another reason. I had that same image as my logo on the 'old' site.
I never had much traffic. I wonder if my logo never showed up there, either? Would that be a problem for web crawlers to identify my site and 'spread the word'? That was about a years worth of exposure (or lack of it...).

I don't think so because it would go off the link and keywords not anything on the page.

ko04 · August 8, 2013

slipkid wrote: »

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

.sm-tile-single.sm-tiles-uncropped .sm-image {
border: 5px solid #8f7b62!important;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-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 {
border: 2px solid #000000!important;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-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;
}

I thought I'd chime in since I saw I was mentioned. I took out my code and used this code instead because mine was a little broken with this code and the width of 93 its prefect. I just thought I'd let you all know since I was mentioned in the post like I said

ghealy · August 16, 2013

I know it's been a while since this thread was active, but I hope someone is still monitoring it. I've used the code shown in message #9 above an placed it on my unveiled homepage. I have nicely rounded corners on my images, but no drop shadow. My background colour is white. So do I need to change a color reference in the code?

Any and all help appreciated

Hikin' Mike · August 16, 2013

ghealy wrote: »

I know it's been a while since this thread was active, but I hope someone is still monitoring it. I've used the code shown in message #9 above an placed it on my unveiled homepage. I have nicely rounded corners on my images, but no drop shadow. My background colour is white. So do I need to change a color reference in the code?

And and all help appreciated

Check out this:
http://www.smugocity.com/Hack-of-the-Week/Fancy-Homepage-Slideshow

ghealy · August 16, 2013

Thanks Mike. That brings me about 75% the way to where I'd like to be.

The above code gives me a drop shadow along the bottom. Would like one along the right edge as well as the bottom. I also round the corners of my images (border-radius). Is there a way to round the shadow in a similar fashion?

TIA

Hikin' Mike · August 16, 2013

ghealy wrote: »

Thanks Mike. That brings me about 75% the way to where I'd like to be.

The above code gives me a drop shadow along the bottom. Would like one along the right edge as well as the bottom. I also round the corners of my images (border-radius). Is there a way to round the shadow in a similar fashion?

TIA

Here is what I'm using on my slideshow.

.sm-page-widget-slideshow .sm-tile-single.sm-tiles-uncropped .sm-image {
    max-width: 96%;
    border: 2px solid #000;
    box-shadow: 5px 5px 5px #1e1e1e;
    -webkit-box-shadow: 5px 5px 5px #1e1e1e;
    -moz-box-shadow: 5px 5px 5px #1e1e1e;
    }

You can add this to the above code for the rounded edges. Change the number to suit.

border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;

brandofamily · August 16, 2013

Hikin' Mike wrote: »

Here is what I'm using on my slideshow.

.sm-page-widget-slideshow .sm-tile-single.sm-tiles-uncropped .sm-image {
    max-width: 96%;
    border: 2px solid #000;
    box-shadow: 5px 5px 5px #1e1e1e;
    -webkit-box-shadow: 5px 5px 5px #1e1e1e;
    -moz-box-shadow: 5px 5px 5px #1e1e1e;
    }

You can add this to the above code for the rounded edges. Change the number to suit.

border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;

Can you please tell me why your code uses the webkit and moz-box code while the code from the link you referenced does not?
On OLD SM I was told we needed the web-kit and moz-box code, but seems now folks on NEW SM are not using it.

dunno

ghealy · August 16, 2013

Thanks again, Mike. That almost worked. But for some reason, I've lost the drop shadow along the bottom. It is as if it has been cut off. Tried playing with the margins, and max width, but to no avail. Went back to the code above, added the max-width=96 and all is working well now.

Thanks for the help. Really appreciated.

Hikin' Mike · August 17, 2013

brandofamily wrote: »

Can you please tell me why your code uses the webkit and moz-box code while the code from the link you referenced does not?
On OLD SM I was told we needed the web-kit and moz-box code, but seems now folks on NEW SM are not using it.dunno

For no reason then I'm used to adding the two additional codes. It doesn't have anything to do with the old vs new Smugmug. It's for the older versions of Firefox etc.

brandofamily · August 17, 2013

Hikin' Mike wrote: »

For no reason then I'm used to adding the two additional codes. It doesn't have anything to do with the old vs new Smugmug. It's for the older versions of Firefox etc.

Thanks. Is it needed any longer?

Hikin' Mike · August 17, 2013

brandofamily wrote: »

Thanks. Is it needed any longer?

Probably not.

http://css-tricks.com/do-we-need-box-shadow-prefixes/

Add border around new style Smugmug slide show

Comments