Stroke and drop shadow for folders and ?

AceCo55 · April 20, 2014

I have code working for my homepage slideshows and the main photo in a smug gallery

/* drop shadow for the large image in galleries */
.sm-tile-single.sm-tiles-uncropped .sm-image {
border: 1px solid #ffffff;
border-radius:1px;
max-width: 90%;
box-shadow: 12px 14px 6px -4px #000000;
}
.sm-tile-content {
padding-bottom: 40px;
}

I don't want this for the thumbnails IN a gallery but I do want it for:
Folders on home page http://www.acecootephotography.com/
Subfolders example: http://www.acecootephotography.com/Kingston-Football
Sub-sub folders example http://www.acecootephotography.com/Kingston-Football/Football-A-Grade

I don't know classnames that might make this work
Any help would be much appreciated

Hikin' Mike · April 20, 2014

Try adding this to your selected pages:

.sm-user-ui .sm-tiles .sm-tile-content {
	border: 1px solid #ffffff;
	border-radius:1px;
	max-width: 90%;
	box-shadow: 12px 14px 6px -4px #000000;
	}

AceCo55 · April 20, 2014

Thanks Mike - worked perfectly.
Sometimes it causes a blue line at top or bottom of the thumbnail - but I think I should be able to change the crop ratio for those.

Many thanks ... once again.

Hikin' Mike · April 20, 2014

I might suggest adding another 1px on the border (border:2px solid #ffffff;). That will stop the "dancing hover".

AceCo55 · April 20, 2014

Thank you for the extra suggestion - it looks much better. Appreciate the extra effort from you.
I have found out that if the Featured image is exactly square, then I get those top and bottom bars. Simply adding a few pixels to the top and bottom fixes that nicely.

So once again thank you for your help - very much appreciate what you do here.

Zevs · April 23, 2014

AceCo55 wrote: »

Thank you for the extra suggestion - it looks much better. Appreciate the extra effort from you.
I have found out that if the Featured image is exactly square, then I get those top and bottom bars. Simply adding a few pixels to the top and bottom fixes that nicely.

So once again thank you for your help - very much appreciate what you do here.

AceCo55 and Smug Eric does this work also for a folders page .... ? I have a page with both folders and galleries on and neither the folder photo icon or the gallery photo icons shows any border or any drop shadow. Here is the page if you want to have a look: http://www.christerwe.com/Galleries. I put the following code into the All Folders CSS box:

.sm-tile-single.sm-tiles-uncropped .sm-image {
border: 30px solid #333333;
border-radius:1px;
max-width: 80%;
box-shadow: 12px 14px 6px -4px #000000;
}
.sm-tile-content {
padding-bottom: 40px;

Thanks
Christer W

AceCo55 · April 23, 2014

Zevs wrote: »

AceCo55 and Smug Eric does this work also for a folders page .... ? I have a page with both folders and galleries on and neither the folder photo icon or the gallery photo icons shows any border or any drop shadow. Here is the page if you want to have a look: http://www.christerwe.com/Galleries. I put the following code into the All Folders CSS box:

.sm-tile-single.sm-tiles-uncropped .sm-image {
border: 30px solid #333333;
border-radius:1px;
max-width: 80%;
box-shadow: 12px 14px 6px -4px #000000;
}
.sm-tile-content {
padding-bottom: 40px;

Thanks
Christer W

This is the CSS I have for my folders ... hope this works for you:

/* stroke and drop shadow for folders */
.sm-user-ui .sm-tiles .sm-tile-content {
border: 2px solid #ffffff;
border-radius:1px;
max-width: 90%;
box-shadow: 10px 12px 6px -4px #000000;
}

Zevs · April 23, 2014

AceCo55 wrote: »

This is the CSS I have for my folders ... hope this works for you:

/* stroke and drop shadow for folders */
.sm-user-ui .sm-tiles .sm-tile-content {
border: 2px solid #ffffff;
border-radius:1px;
max-width: 90%;
box-shadow: 10px 12px 6px -4px #000000;
}

Thanks AceCo55 for answering, but nothing happens if I put this code into the CSS for all folders or for the whole site. I don't get any border or any shadow.

Christer W

Hikin' Mike · April 23, 2014

Zevs wrote: »

Thanks AceCo55 for answering, but nothing happens if I put this code into the CSS for all folders or for the whole site. I don't get any border or any shadow.

Christer W

Try this:

.sm-tile-content {
    border: 30px solid #333;
    border-radius: 1px;
    box-shadow: 5px 5px 5px #000;
    }

Zevs · April 24, 2014

Hikin' Mike wrote: »

Try this:

.sm-tile-content {
    border: 30px solid #333;
    border-radius: 1px;
    box-shadow: 5px 5px 5px #000;
    }

Thanks soo very much Hikin' Mike, that worked perfectly!!!

Christer W

Zevs · April 24, 2014

Hikin' Mike, one more question.... how does one address the images on the Collage Landscape and the Collage Portraits galleries ...? For example for adding a small border and a small drop shadow

Thanks
Christer W

Hikin' Mike · April 24, 2014

Zevs wrote: »

Hikin' Mike, one more question.... how does one address the images on the Collage Landscape and the Collage Portraits galleries ...? For example for adding a small border and a small drop shadow

Thanks
Christer W

Try this:

.sm-tiles-row-organic .sm-tile {
    border: 5px solid #333;
    box-shadow: 5px 5px 5px #000;
    }

Zevs · April 24, 2014

Hikin' Mike wrote: »

Try this:

.sm-tiles-row-organic .sm-tile {
    border: 5px solid #333;
    box-shadow: 5px 5px 5px #000;
    }

Thanks, thanks again Hikin' Mike!! Works perfectly!!!

Christer W

Stroke and drop shadow for folders and ?

Comments