How to round corners of thumbnails

Sorbz62Sorbz62 Beginner grinnerRegistered Users Posts: 5 Beginner grinner
edited October 15, 2013 in SmugMug Customization
Hi Guys,

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

Cheers,
Jim
«13456

Comments

  • thenickdudethenickdude Software developer Dunedin, New ZealandRegistered Users Posts: 1,301 Major grins
    edited August 8, 2013
    Inside SmugMug-style galleries?
    .sm-gallery-tiles .sm-tile img {
        border-radius:8px;
    }
    
  • AllenAllen "tweak 'til it squeaks" St. Louis, MoRegistered Users Posts: 9,850 Major grins
    edited 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.
    Al - Just a volunteer here having fun
    My Website | My Blog
  • thenickdudethenickdude Software developer Dunedin, New ZealandRegistered Users Posts: 1,301 Major grins
    edited 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;
    }
    
  • AllenAllen "tweak 'til it squeaks" St. Louis, MoRegistered Users Posts: 9,850 Major grins
    edited 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.
    Al - Just a volunteer here having fun
    My Website | My Blog
  • mbonocorembonocore Social Butterfly Registered Users Posts: 2,299 Major grins
    edited August 9, 2013
    NICE! Looks Great Allen! Thanks for the help Lemah

    Moving this over to the Customization forum.
  • krashedmykarchkrashedmykarch Major grins Brampton, CanadaRegistered Users Posts: 107 Major grins
    edited 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.
    ~Ciao
    Charles
    Brampton, Canada
    www.charlesdalyphotography.com
  • AllenAllen "tweak 'til it squeaks" St. Louis, MoRegistered Users Posts: 9,850 Major grins
    edited 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.
    Al - Just a volunteer here having fun
    My Website | My Blog
  • krashedmykarchkrashedmykarch Major grins Brampton, CanadaRegistered Users Posts: 107 Major grins
    edited 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!
    ~Ciao
    Charles
    Brampton, Canada
    www.charlesdalyphotography.com
  • AllenAllen "tweak 'til it squeaks" St. Louis, MoRegistered Users Posts: 9,850 Major grins
    edited 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!
    Try this in "all galleries" CSS.
    .sm-gallery-tiles .sm-tile img {
      border-radius: 8px;
    }
    
    Al - Just a volunteer here having fun
    My Website | My Blog
  • macromeistermacromeister SMUG anarchist! West WalesRegistered Users Posts: 490 Major grins
    edited 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
    I'm Rob Ashcroft - MACROMEISTER IMAGES . . . .
  • krashedmykarchkrashedmykarch Major grins Brampton, CanadaRegistered Users Posts: 107 Major grins
    edited 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.
    ~Ciao
    Charles
    Brampton, Canada
    www.charlesdalyphotography.com
  • ScottBuckelScottBuckel Big grins Registered Users Posts: 24 Big grins
    edited 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
  • thenickdudethenickdude Software developer Dunedin, New ZealandRegistered Users Posts: 1,301 Major grins
    edited August 10, 2013
    Add this as a CSS block to the page:
    .sm-page-widget-images .sm-tile img {
        border-radius:8px;
    }
    
  • ScottBuckelScottBuckel Big grins Registered Users Posts: 24 Big grins
    edited 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
  • krashedmykarchkrashedmykarch Major grins Brampton, CanadaRegistered Users Posts: 107 Major grins
    edited August 10, 2013
    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.
    ~Ciao
    Charles
    Brampton, Canada
    www.charlesdalyphotography.com
  • macromeistermacromeister SMUG anarchist! West WalesRegistered Users Posts: 490 Major grins
    edited 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. 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
    I'm Rob Ashcroft - MACROMEISTER IMAGES . . . .
  • earthwalkerearthwalker Big grins Registered Users Posts: 81 Big grins
    edited August 10, 2013
    Not working for me
    Can someone see what I'm doing wrong? www.andrecahill.com

    Thanks
  • McQMcQ Grinning From Ear To Ear Registered Users Posts: 165 Major grins
    edited 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

    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.
    "Where have you gone, Joe DiMaggio, our nation turns its lonely eyes to you?"

    http://mcq.smugmug.com
  • macromeistermacromeister SMUG anarchist! West WalesRegistered Users Posts: 490 Major grins
    edited 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;
    }
    
    I'm Rob Ashcroft - MACROMEISTER IMAGES . . . .
  • CheersCheers Big grins Farmington, MORegistered Users Posts: 55 Big grins
    edited 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
  • AllenAllen "tweak 'til it squeaks" St. Louis, MoRegistered Users Posts: 9,850 Major grins
    edited 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.
    Al - Just a volunteer here having fun
    My Website | My Blog
  • CheersCheers Big grins Farmington, MORegistered Users Posts: 55 Big grins
    edited 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! ne_nau.gif Thanks
  • brandofamilybrandofamily Just a Guy with a Camera Illinois USARegistered Users Posts: 2,005 Major grins
    edited 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...
  • thenickdudethenickdude Software developer Dunedin, New ZealandRegistered Users Posts: 1,301 Major grins
    edited 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! ne_nau.gif 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;
    }
    
  • Darter02Darter02 Major grins Mount Horeb, WIRegistered Users Posts: 946 Major grins
    edited August 10, 2013
    Cool beans! This worked great!
  • brandofamilybrandofamily Just a Guy with a Camera Illinois USARegistered Users Posts: 2,005 Major grins
    edited 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
  • thenickdudethenickdude Software developer Dunedin, New ZealandRegistered Users Posts: 1,301 Major grins
    edited August 10, 2013
  • CheersCheers Big grins Farmington, MORegistered Users Posts: 55 Big grins
    edited 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;
    }
    

    Laughing.gif 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!
  • brandofamilybrandofamily Just a Guy with a Camera Illinois USARegistered Users Posts: 2,005 Major grins
    edited 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
  • McQMcQ Grinning From Ear To Ear Registered Users Posts: 165 Major grins
    edited August 10, 2013
    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?
    "Where have you gone, Joe DiMaggio, our nation turns its lonely eyes to you?"

    http://mcq.smugmug.com
Sign In or Register to comment.