Borders

Zevs · April 18, 2014

I found code below (thanks to phaserbeam and goldeneye99 !!!) for making borders around images which works well for lightbox and slideshow images. I wonder if anyone knows if it is possible to modify the code so that it also generates borders around the larger image in the Smugmug style gallery and also possibly in the Collage style galleries.

Grateful for some feedback...

My website can be found here: www.christerwe.com

Thanks/Christer W

/* Create border around homepage-slideshow/lightbox-slideshow image */
.sm-page-widget-slideshow .sm-slideshow .sm-tile-photo .sm-tile-content .sm-image,
.sm-lightbox .sm-slideshow .sm-tile-photo .sm-tile-content .sm-image {
border:30px solid #333333;
}

/* Scale photo in homepage-slideshow/lightbox-slideshow */
.sm-page-widget-slideshow .sm-slideshow .sm-slideshow-image .sm-tile-content .sm-image,
.sm-lightbox .sm-slideshow .sm-slideshow-image .sm-tile-content .sm-image {
transform: scale(0.9);
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform-origin: center center;
-moz-transform-origin: center center;
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
margin-top:-30px;
margin-left:-30px;
}

/* Scale lightbox photo */
.sm-lightbox .sm-lightbox-content img {
transform: scale(0.8);
-moz-transform: scale(0.8);
-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
transform-origin: center center;
-moz-transform-origin: center center;
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
}

/* Create border around lightbox photo */
.sm-lightbox .sm-lightbox-content .sm-lightbox-image {
border: 30px solid #333333;
position:relative;
left:-30px;
top:-30px;
}

leftquark · April 18, 2014

This should do the trick for ya: http://www.aaronmphotography.com/Customizations/Gallery/SM-Layout/Add-Image-Border

Zevs · April 19, 2014

leftquark wrote: »

This should do the trick for ya: http://www.aaronmphotography.com/Customizations/Gallery/SM-Layout/Add-Image-Border

Thanks leftquark, but sorry it doesn't work! Neither if I put it into the CSS of the whole site or just in the gallery CSS.

Zevs · April 21, 2014

Zevs wrote: »

Thanks leftquark, but sorry it doesn't work! Neither if I put it into the CSS of the whole site or just in the gallery CSS.

Anyone else have any ideas on how to achieve this...?

Christer W

AceCo55 · April 21, 2014

This is what worked for me - instigated in the last couple of days.
Customize > Site > All galleries > CSS placeholder
Note 1: also adds a drop shadow (so delete that part if you don't want
Note 2: I know nothing about coding (look > look > copy > paste > fail > repeat)

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

Zevs · April 21, 2014

Thanks soo very much AceCo55!!! That worked very well and I liked the shadow also so I incorporated that into the other pages. I just changed the border size and also the border color.

/* stroke and drop shadow for the large image in galleries */
.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 again!!!!

Christer W
www.christerwe.com

Borders

Comments