Rounded corners - not working when gallery/folder titles are under the thumbnail

pbandj · August 22, 2015

The rounded corner tweak is not working for me when I put the gallery name under the gallery photo instead of using the "bottom bar".

Here's a sample...it's subtle, but in the screen shot below you can see that the top corners are rounded but the bottom corners are not. I'm using Nicholas Sherlock's tweaks from this page:
http://origin.sherlockphotography.org/Customisations/Rounded-corners

Does anyone know how to fix this? I haven't published my site yet so I can't provide a link.

Lille Ulven · August 22, 2015

Not being able to see your code makes it difficult to investigate where the problem is...but for a guess I would assume that you have your photo on layer 1 and the gallery name on layer 2 (layer 1 being the one on the bottom). Now your gallery name layer overwrites some of your photo and by that adds the "edgy corners" instead of the rounded ones.
So in order to change that you would have to make sure that your photo is always on top of everything, which means changing its z-index value.
The base setting for every element is z-index=0 for overlapping elements though that value is increased while you are going further down in your lines of code.
If you now added to your rounded corner css the line: z-index:1000 your photo should get further upwards in the stack and might get presented with the rounded corners.

Worth a try at least, I think

Good luck

Lille Ulven

pbandj · August 22, 2015

Thank you for the try, Lille. I added the z-index:1000; to the rounded corners css, but that didn't work...but as you say, it's hard to help when you can't see the site.

I'll wait until I've published the site publicly and then bump this up again.

Allen · August 22, 2015

z-index will not work unless the position is also set to relative.
z-index: relative;

I would first try to set the bottom bar's transparency using opacity and see if the thumb
underneath has rounded corners. I suspect there is an overlap that's hiding the bottom of the thumb.

If you move the layer, thumb, to the top and it doesn't have any transparency it would hide
all below it.

pbandj · September 1, 2015

I tried the z-index:relative and it didn't seem to make a difference either, unless I did something wrong.

However, I bit the bullet and published the site, so you can look at this page now (note, it'll be obvious that I'm not a professional...just publish photos for family & friends):
http://photos.bellhanley.com/Trips/Hiking

As I mentioned in my initial post, the bottom corners are rounded if I put the gallery name on the bottom bar, but when it's under the photo, the bottom corners don't round.

Allen · September 1, 2015

pbandj wrote: »

I tried the z-index:relative and it didn't seem to make a difference either, unless I did something wrong.

However, I bit the bullet and published the site, so you can look at this page now (note, it'll be obvious that I'm not a professional...just publish photos for family & friends):
http://photos.bellhanley.com/Trips/Hiking

As I mentioned in my initial post, the bottom corners are rounded if I put the gallery name on the bottom bar, but when it's under the photo, the bottom corners don't round.

I stuck this in and it seemed to round all the corners. This is what I use in "entire site". Ignore the double border I use on mine although it does add something.

.sm-page-widget-nodes .sm-tile a,
.sm-page-widget-folders .sm-tile a,
.sm-page-widget-galleries .sm-tile a {
  border-radius:8px;
  border: 4px double #777;
}

pbandj · September 2, 2015

Allen wrote: »
I stuck this in and it seemed to round all the corners. This is what I use in "entire site". Ignore the double border I use on mine although it does add something.
.sm-page-widget-nodes .sm-tile a,
.sm-page-widget-folders .sm-tile a,
.sm-page-widget-galleries .sm-tile a {
  border-radius:8px;
  border: 4px double #777;
}

Thank you for the magic, Allen...that did the trick!

Rounded corners - not working when gallery/folder titles are under the thumbnail

Comments