How to round corners of thumbnails

McQ

RKnecht wrote: »

Glenn, I see your galleries fine. Did you remove the code?

I put in the codes that were listed above, in this thread. Replaced the old ones with it.

I can only see the galleries in Firefox. They don't show up in Safari or Chrome.

And I don't know why yours has that right edge cut off, but that's another one of the fixes they were talking about in this thread, or so I thought.

I'll have to be back at the site tomorrow to try and fix what I messed up.

UPDATED: FIXED!

guy

Round corners is SM photo box
So with the help of this thread I've been able to round the corners of my collage landscape galleries. Is there a way to round the corners of the photos in a one row photo box element that I put on my home page?



Many thanks

Hikin' Mike

guy wrote: »

So with the help of this thread I've been able to round the corners of my collage landscape galleries. Is there a way to round the corners of the photos in a one row photo box element that I put on my home page?
Many thanks

Try this:

.sm-page-home .sm-tile-content {
    border-radius: 5px;
    }

guy

Hikin' Mike wrote: »

Try this:

.sm-page-home .sm-tile-content {
    border-radius: 5px;
    }

Worked like a charm, thank you :^)..

d3needshelp

Sir_Eagle wrote: »

I used this to fix the pics on the right side in the collage landscape galleries.

.sm-tiles-row-organic .sm-tiles-list {
overflow: visible;
margin: 0 0 0 -18px;
}

Can you help me with code for collage "portrait"?

Thanks

Sir_Eagle

d3needshelp wrote: »

Can you help me with code for collage "portrait"?

Thanks

Try this:

.sm-tiles-column-organic .sm-tiles-list {    
overflow: visible;
    margin: 0 0 0 -18px;
  }

d3needshelp

Sir_Eagle wrote: »

Try this:

.sm-tiles-column-organic .sm-tiles-list {    
overflow: visible;
    margin: 0 0 0 -18px;
  }

Thanks Sir_Eagle,

After a little adjustment, I added this code and it worked great:

.sm-tiles-column-organic .sm-tiles-list {
overflow: visible;
margin: 0 0 0 0px;
}
.sm-gallery-columnorganic img {
border-radius: 10px;
}

Cheers!

Sir_Eagle

This does not work anymore for me.

-webkit-mask-image:  url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAAC   Qd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5c   cllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkS  uQmCC);/*THIS FIXES A  SAFARI BUG*/

Not sure why, must have something overriding it.

phaserbeam

With the help of this thread i got most corners rounded on my homepage. But there is a single(!) featured gallery photo inside of a gallery content block on a custom page that still has edges. See screenshot. The info hover has rounded corners, every photo around has round corners, just not this featured photo.

I have some custom side wide css to round corners. Any ideas why only this thumb does not get round corners?

EDIT: Might be browser related, since FireFox does show round corners for that image. Just not Opera12 which is my favorite broser. Anyway... other images have round corners, even in Opera.

P.S. I just added a video gallery to a galleries content block and that one also shows edges while the other galleries do have round corners. Have a look here.

.sm-tile-info {
    border-radius: 12px;
}

.sm-tiles-vertical .sm-tile-info {
    border-radius: 0px!important;
}

.sm-tile-album img, .sm-tile-album a{
    border-radius: 12px;
}

.sm-gallery-tiles .sm-tile img {
    border-radius:12px;
}

.sm-gallery-tiles .sm-tile-overlay:hover {
    border-radius:12px;
}

.sm-tiles-row-organic img, .sm-tiles-row-organic a {
    border-radius: 12px;
}

Sir_Eagle

This code was not working in Safari anymore and I could not figure out why. So I removed it and.......

/* MAKE CORNERS ROUND ON GALLERY & FOLDER LINK IMAGES */   
.sm-page-widget-folders .sm-tile a,    
.sm-page-widget-galleries .sm-tile a,   
.sm-page-widget-nodes .sm-tile a,   
.sm-page-widget-pages .sm-tile a {  
   border-radius: 8px;  
 -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);/*THIS FIXES A SAFARI BUG*/   
}

............ added this code instead to a CSS block in the All Folders section only..........

/*ROUNDS CORNERS ON FOLDER THUMBNAILS IN ALL BROWSERS*/
  .sm-page-widget-images, .sm-tile img  a, .sm-tile {
    border-radius:8px;
    max-height: 100%;
    max-width: 100%;
    background-color: rgba(9, 9, 9, 0.2);
    overflow: hidden;
  }
  /*MAKES TEXT CORRECT SIZE FOR FOLDER DESCRIPTIONS*/
  .sm-tiles-grid ul li a p {
    font-size: 18px!important;
    height: 22px!important;
  }

.................... It makes rounded corners in FF, IE, Safari, Chrome, FF for Android, Chrome on Android. The txt code is part of the code for making folder descriptions wrap all words, but I just used parts to fill the space wanted and adjust so bottoms of g, y, etc didn't get cut off. I have other code for galleries, slideshows, smugmug stye, I think that's all. :whew

tonsofpics

I am not doing something right, but you all make this sound so easy. I took a css code link from the bar and dragged it above the all folders or above my photos on the home page and added the code. Published it and nothing happened. What did I do wrong?

Thanks so much for your help, I really did want rounded corners and I would like them in my galleries as well. As soon as I figure out where to put the css code I will be good. :-)

Jamie
ActionJunction.com

tonsofpics

I finally got it to work. Thanks for everybody else having the same problem. At least I am not alone.

MickMJM

Hi Allen - Thank you for this code. It worked perfectly for me and I am very happy with the 8px rounding. A question please: on my galleries I found some code that gives a "drop shadow" effect, which I also like. Would it be possible to apply a similar effect to my folders (instead of the rounded corners)? If so what might the code be? I'm a newbie on DG so can't post urls but I'm at marrison dot smugmug dot com

Thank you for all your hard work in the forum.

Regards

Mick UK

> @Allen said:
> Cheers wrote: »
>
> I have tried and tried, plugged the code everywhere I could think. The photos have rounded edges, and work great, but I can't get rounded edges on my galleries/folders? What am I missing? Thank you
>
>
>
> On any page click customize > customize site
> Select "all folders" on flyout drawer. Look for "CSS APP PLACEHOLDER" out in page and click wrench.
> Add this CSS in that box. When you hover it, it should say "ON ALL FOLDERS" to the right of the wrench. .sm-page-widget-folders .sm-tile a, .sm-page-widget-galleries .sm-tile a { border-radius: 8px; }
>
> If you do not find the "CSS APP PLACEHOLDER", make sure "all folders" is still selected and go to "ADD
> CONTENT BLOCKS" at the bottom click "HTML & CSS" to expand it. Then drag a CSS widget over to
> your page.