Border problem with thumbnails
bingbang
Registered Users Posts: 17 Big grins
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 ?
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 ?
Portfolio : http://patrickbingbang.smugmug.com
0
Comments
.sm-tiles-list div.sm-tile {border:2px solid #FFFFFF;}
tailoredportraits.com
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.
My Website index | My Blog
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.
tailoredportraits.com
tailoredportraits.com
Also https://patrickbingbang.smugmug.com/People/Studio/.
--- Denise
Musings & ramblings at https://denisegoldberg.blogspot.com
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.