How to round corners of thumbnails

Sorbz62 · August 8, 2013

Hi Guys,

How do I round the corners of my thumbnails in all galleries in the new Smugmug??

Cheers,
Jim

thenickdude · August 8, 2013

Inside SmugMug-style galleries?

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

Allen · August 9, 2013

Lamah wrote: »
Inside SmugMug-style galleries?
.sm-gallery-tiles .sm-tile img {
    border-radius:8px;
}

That worked great, thanks.

Now I'm trying to do the same for galleries in a folder that's set to grid. At least see what it looks like.
Just can't come up with the correct classes. Have tried everything up the line.

thenickdude · August 9, 2013

Ah, that's because the image tags on those tiles usually extend out of the frame they're contained in, leaving their rounded corners invisible. Instead, you have to round the link that contains them:

.sm-page-widget-galleries .sm-tile a {
    border-radius:8px;
}

Allen · August 9, 2013

Lamah wrote: »
Ah, that's because the image tags on those tiles usually extend out of the frame they're contained in, leaving their rounded corners invisible. Instead, you have to round the link that contains them:
.sm-page-widget-galleries .sm-tile a {
    border-radius:8px;
}

Perfect, thanks.

Added to "all folders".
Here's how it looks like.

mbonocore · August 9, 2013

NICE! Looks Great Allen! Thanks for the help Lemah

Moving this over to the Customization forum.

krashedmykarch · August 9, 2013

Well, that's Superb! Thank you all who asked/replied. What would be really amzing would be a comprehensive users manual. I must say I do miss Allen's excellent coding work.

Allen · August 9, 2013

mbonocore wrote: »

NICE! Looks Great Allen! Thanks for the help Lemah

Moving this over to the Customization forum.

Thanks Michael, I had about 420 of these pages to individually customize.

krashedmykarch · August 9, 2013

Allen, can the thumbnails in each gallery also have rounded corners as well? The rounded corners on the gallery tn's are softer and quite attractive, IMHO
Thanks!

Allen · August 9, 2013

krashedmykarch wrote: »

Allen, can the thumbnails in each gallery also have rounded corners as well? The rounded corners on the gallery tn's are softer and quite attractive, IMHO
Thanks!

Try this in "all galleries" CSS.

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

macromeister · August 10, 2013

Thanks for the useful info here.

I have changed my folder thumbnails for images folder, and it looks good. http://www.macromeister.co.uk/Images Also changed thumbnails on each gallery EXAMPLE

krashedmykarch · August 10, 2013

Thanks Allen

Allen wrote: »
Try this in "all galleries" CSS.
.sm-gallery-tiles .sm-tile img {
  border-radius: 8px;
}

Perfect, thank you Allen.

ScottBuckel · August 10, 2013

I like the look of rounded corners, I would like to apply these rounded corners to the multiphotos that I have on my home page. What would the code be?

Thanks

thenickdude · August 10, 2013

Add this as a CSS block to the page:

.sm-page-widget-images .sm-tile img {
    border-radius:8px;
}

ScottBuckel · August 10, 2013

Lamah - thanks worked perfectly for my homepage.

I also tried to do this to the thumbnails for my galleries and it does not work. Then I visited your customizations and figured out the CSS I needed to use.

Thanks for posting a listing of you customizations it has been very useful.

Scott

krashedmykarch · August 10, 2013

krashedmykarch wrote: »

Perfect, thank you Allen.

Allen wrote: »
Try this in "all galleries" CSS.
.sm-gallery-tiles .sm-tile img {
  border-radius: 8px;
}

Scott, this is what Allen posted for me and it worked perfectly.

macromeister · August 10, 2013

ScottBuckel wrote: »

Lamah - thanks worked perfectly for my homepage.

I also tried to do this to the thumbnails for my galleries and it does not work. Are there differences between types of galleries?

Scott

You seem to have collage-landscape as the gallery view as I do. I had to do this... http://www.dgrin.com/showpost.php?p=1894038&postcount=8

earthwalker · August 10, 2013

Not working for me
Can someone see what I'm doing wrong? www.andrecahill.com

Thanks

McQ · August 10, 2013

macromeister wrote: »

Thanks for the useful info here.

I have changed my folder thumbnails for images folder, and it looks good. http://www.macromeister.co.uk/Images Also changed thumbnails on each gallery EXAMPLE

Rob, it looks fantastic on the folders as well as the galleries and photos. How exactly did you get the folders to have rounded corners? I somehow missed the code for that and where to place it.

macromeister · August 10, 2013

McQ wrote: »

Rob, it looks fantastic on the folders as well as the galleries and photos. How exactly did you get the folders to have rounded corners? I somehow missed the code for that and where to place it.

Thanks, Glenn. I just added this code to all folders CSS. I settled on 10px but you can reduce or increase that to suit.

/* make corners round on gallery lin images in folders */
.sm-page-widget-galleries .sm-tile a {
    border-radius:10px;
}

Cheers · August 10, 2013

Rounded Edges
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

Allen · August 10, 2013

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.

Cheers · August 10, 2013

Allen wrote: »
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.

I appreciate the help Allen, but no joy. I deleted all the CSS from most everywhere and started over. The Photos are rounded, but not the folders. few hairs left to pull out!

Thanks

brandofamily · August 10, 2013

Lamah wrote: »
Ah, that's because the image tags on those tiles usually extend out of the frame they're contained in, leaving their rounded corners invisible. Instead, you have to round the link that contains them:
.sm-page-widget-galleries .sm-tile a {
    border-radius:8px;
}

How about some simple code for a homepage slide show.

And Big Image in Smugmug style too...

I have some code for SM big pic and slide show currently but yours seems simpler...

thenickdude · August 10, 2013

Cheers wrote: »

I appreciate the help Allen, but no joy. I deleted all the CSS from most everywhere and started over. The Photos are rounded, but not the folders. few hairs left to pull out! Thanks

Ah, this is because you are using the "galleries, pages and folders" block. Here's the version which works for all the things that can link to folders, galleries or pages:

.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;
}

Darter02 · August 10, 2013

Cool beans! This worked great!

brandofamily · August 10, 2013

Lamah wrote: »
You mean the full-page slideshow I have on my homepage? That's achieved by adding a slideshow to the centre of the page, then adding this CSS:
.sm-slideshow {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}
.sm-page-edit .sm-slideshow { 
  position:static; 
}
Plus a bunch of tweaks to adjust the other elements I had on that page, like the sidebar, which I would need to see your site to suggest.

Unfortunately it's not currently possible to make the images in the slideshow completely fill the screen, because SmugMug hasn't added support for that in the slideshow element yet.

Actually I added a slideshow box to the home page
http://www.onbroadwaydancers.com/

I added to your code:

.sm-page-widget-folders .sm-tile a, /*Folders*/
.sm-page-widget-galleries .sm-tile a,  /*Galleries*/
.sm-page-widget-nodes .sm-tile a,  
.sm-page-widget-pages .sm-tile a, /*Pages*/
.sm-page-widget-images .sm-tile img, /*Single Image Boxes*/
.sm-gallery-tiles .sm-tile img, /*SM Thm*/
.sm-tile-single.sm-tiles-uncropped .sm-image /*SM Main*/
{
  border-radius: 25px;
}

that last piece

.sm-tile-single.sm-tiles-uncropped .sm-image

seems to do both that slideshow and the main pic in the SM style gallery

thenickdude · August 10, 2013

Oh yep, looks like I totally missed what you were actually asking!

Cheers · August 10, 2013

Lamah wrote: »
Ah, this is because you are using the "galleries, pages and folders" block. Here's the version which works for all the things that can link to folders, galleries or pages:
.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;
}

If I had known what the difference was, I would have said that. Thanks for figuring that out for me! It looks and works great!

brandofamily · August 10, 2013

Allen wrote: »
Try this in "all galleries" CSS.
.sm-gallery-tiles .sm-tile img {
  border-radius: 8px;
}

Allen I added this and the thumbs are rounded, but when I hove there seems to be a "filter" that appears and it is square. Any ideas?

http://www.onbroadwaydancers.com/Picture-Galleries/On-Broadway-Dancers/2005/Celebration-in-The-Park-2005

McQ · August 10, 2013

macromeister wrote: »
Thanks, Glenn. I just added this code to all folders CSS. I settled on 10px but you can reduce or increase that to suit.
/* make corners round on gallery lin images in folders */
.sm-page-widget-galleries .sm-tile a {
    border-radius:10px;
}

Rob, thanks. For some reason it's not working. The part of the code "/* make corners round on gallery lin images in folders */" shows up greyed out when I paste it in, and nothing happens after I insert the entire code.

Any ideas?

How to round corners of thumbnails

Comments