Adding Border to Thumbnails on Collage Landscape Block

PhilCorleyPhoto

I have managed to add borders to my other thumbnails on my site, but I can't seem to find the CSS for adding a border to the thumbnails used when displaying images using a Photo Block set to the Collage Landscape style

Can anyone help?

Thanks

Phil

Lille Ulven

Can you give me a link to your website, please? Would help to figure out how to do it

In general something like this should do the trick:

@media only screen and (min-width: 1200px){

 /* To get the frame around the index photos without inside border */
 .sm-tiles-spacing-4 .sm-tile{
   margin: 0px !important;
 }

  .sm-gallery-journal li.sm-tile-wrapper.sm-tile-photo{
    border: 2px solid white !important; /*#89a0de*/
    padding: 10px !important;
   /*outline: 2px solid #2b2c2f !important;*/
   /*margin: 1px*/
   margin: 2px !important;
   margin-bottom: 20px !important;
   /*outline-color: white !important;*/
   width: 100% !important;
  }


/* No border for slideshows as it messes things up significantly*/      
     .sm-slideshow-image div.sm-tile-wrapper.sm-tile-photo {
       border: none !important;
       margin: 0px !important;
     }

    }

Good luck

Lille Ulven

PhilCorleyPhoto

HI Lille - site is philcorley.smugmug.com

PhilCorleyPhoto

Hmm, not working for me. I have added the CSS to a CSS block for entire site, but the thumbnails remain without the border. If you check the site at philcorley.smugmug.com and select Portfolios > Iceland you will see what I mean.

Thanks

Phil

Lille Ulven

OK...
change the middle CSS from
.sm-gallery-journal li.sm-tile-wrapper.sm-tile-photo{ /remove .sm-gallery-journal/
border: 2px solid white !important; /#89a0de/
padding: 10px !important;
/outline: 2px solid #2b2c2f !important;/
/margin: 1px/
margin: 2px !important;
margin-bottom: 20px !important;
/outline-color: white !important;/
width: 100% !important; /to be removed/
}

to:

 li.sm-tile-wrapper.sm-tile-photo{
    border: 2px solid white !important; /*#89a0de*/
    padding: 10px !important;
   /*outline: 2px solid #2b2c2f !important;*/
   /*margin: 1px*/
   margin: 2px !important;
   margin-bottom: 20px !important;
   /*outline-color: white !important;*/
  }

Don't know why that gallery-selection thing does not work anymore...weird.

Lille Ulven

PhilCorleyPhoto

Getting there but a few snags - have a look at this page: philcorley.smugmug.com/Portfolios/Iceland

You will see the border on the images in the last column are being lost; also the border is being draw around the title as well - can it draw round just the thumbnail?

Thanks

Phil

Lille Ulven

Instead of

li.sm-tile-wrapper.sm-tile-photo{
border: 2px solid white !important; /*#89a0de*/
padding: 10px !important;
/*outline: 2px solid #2b2c2f !important;*/
/*margin: 1px*/
margin: 2px !important;
margin-bottom: 20px !important;
/*outline-color: white !important;*/
}

use:

li.sm-tile-wrapper.sm-tile-photo > div > a{
border: 2px solid white !important; /*#89a0de*/
}

That seems to do the trick

Lille Ulven

PhilCorleyPhoto

Brilliant - thank you very much

Phil

denisegoldberg

Phil -
I just noticed that you are allowing viewers access to your original images. I would recommend setting the display size to a size smaller than the original.

While you have a right click warning on, it is very easy to find the URL of the photo, to open it outside of your site, and to save the image locally. Decide which size (smaller than Original) that you are comfortable with and make that your largest display size.

I have the display size on my site set to X3. I know that with today's large monitors a larger size shows better online - but X3 is where my comfort level is.

Here's an example using Chrome:

• I viewed an image on your site in Lightbox.
• I changed the display size to X3 (for example).
• I entered chrome://cache/ in a new browser tab.
• I looked for a URL in the cache that looked like a smugmug jpg
• I clicked that URL to open chrome://view-http-cache for that image
• I used the https://photos.smugmug.com/Images/....jpg shown on that page to open the image
• I right-clicked and was prompted to save.

I didn't save your image, just wanted to show you how easy it is.

PhilCorleyPhoto

Ah many thanks - still learning how SM works and really appreciate the suggestion. Will make the change as you suggest

Phil