Border problem with thumbnails

bingbang · November 30, 2016

Hi There,

I am a brand new (and happy) customer on smugmug (http://patrickbingbang.smugmug.com/), but I have a problem with the borders of my thumbnail images. Basically, all these images were imported and they included a thin white border that do not always appear correctly on the site. I would like to fix this by adding an extra thin border using css, but when I try to do that that I realize that only the top and left borders are added, while the bottom and right borders are left unchanged.

For doing that, I edit the theme and I just add a border property in the syle for "a img", with :

a img {
border: 2px solid #ffffff;
}

Strangely, this works fine for the header image but not for the other thumbnails. I left it as is so you can get a chance to see the result at http://patrickbingbang.smugmug.com/

My guess is that there is an issue with the size of the image as displayed in the corresponding container, so tha the extra border flows over and is not displayed correctly. I did some tests and indeed the image seems to be pushed to the right and is thus cropped. How can I fix this ?

Thanks a lot for your help

P.S. : I did find a part of the solution in the forum, with the following code :

li.sm-tile-wrapper.sm-tile-photo
{
border: 1px solid white !important;
margin: 1px !important;
}

However, as I am using the "landscape collage" presentation, the width of each line is now different... Any idea ?

photoclick · November 30, 2016

Instead of applying the border to the image, I suggest you apply it to the containing DIV:

.sm-tiles-list div.sm-tile {border:2px solid #FFFFFF;}

bingbang · November 30, 2016

Works like a charm ! Many thanks, you save my day !

Allen · November 30, 2016

The hover works fine but is there a way to highlight the border of an active thumb of the large photo?
Basically referring to Smugmug style thumbs. This is a huge problem when using the keyboard arrow
to navigate or returning from lightbox. Do not have a clue what thumb you're on.

Looks like same problem with the collage styles, no idea what photo is active when returning from lightbox.

photoclick · November 30, 2016

Allen,
I do not believe the gallery was designed with the "active/current" image in mind. Such concept simply does not exists at present time in these galleries.

bingbang · November 30, 2016

Well, I was speaking a bit too fast. Indeed, when I paste the CSS code for the "Entire site", it works on the thumbnails for the homepage, but it does not work for the thumbnails in other galleries... so back to the beginning, I am afraid.

photoclick · November 30, 2016

don't be afraid:) Just show the link where it does not work

denisegoldberg · November 30, 2016

photoclick wrote: »

...show the link where it does not work

Look at this page - https://patrickbingbang.smugmug.com/Galleries.
Also https://patrickbingbang.smugmug.com/People/Studio/.

--- Denise

bingbang · November 30, 2016

Hi Denise and Photoclick. Finally, I will manage another way around the problem : I switch everything on a light grey background using another theme. And I even managed to change by my own the default background color for the lightbox using CSS. A lot of information around on these forums, this is good.

So thanks again for your help and sorry for annoying you with this. I believe my site is now entirely set up and I can now concentrate on taking pictures and posting them.

Cheers from Belgium.

Border problem with thumbnails

Comments