I like this but I have something odd happening. The far right folders, galleries, and photos have their right sides unaffected by this mod.
What you're seeing is the photos on the right getting their complete right edge cropped off by the edge of the page. If you resize your browser window slightly, you'll see SmugMug's Collage Landscape layout reshuffling the images to fit better, and they'll suddenly stop getting cropped off at the right.
As to why that might be happening, I'm not sure. You could try reducing any left or right margins you can find in the customiser to zero.
Also, is there a code to round images in photo blocks, both the single, and the multi?
For the multi:
.sm-page-widget-images .sm-tile a {
border-radius:8px;
}
For the single, it might depend on the options you've chosen, but this works for one of mine:
I remember watching your prep of (all) your legacy sites with great admiration for all the work you put in, and how well they ended up. I also understand the huge amount of work you'll need to replicate those results in the new smug.
So I checked in on this thread (as I hope to do the rounded corners (amongst other things when I get my site converted). In the spirit of mutual benefit I felt I should post this as it's the beginning of the 'new smug' customization efforts and this type of thing happened alot back in the early days of legacy work.
As a mac user I run both FF and Safari so I checked some of the sites in this thread and got concerned as it looks like the results aren't universal across browsers (not sure about Chrome or IE) but I wanted to mention this to see if it's just at my end or what... in each case below the Safari screenshot is on the left with FF on the right side.
Rons site:
Robs site:
I can and will check any other type efforts as needed if I can be of assistance - as a mac guy I hope to see these changes work in ALL the current browsers so all our customers have a universally good experience.
I remember watching your prep of (all) your legacy sites with great admiration for all the work you put in, and how well they ended up. I also understand the huge amount of work you'll need to replicate those results in the new smug.
So I checked in on this thread (as I hope to do the rounded corners (amongst other things when I get my site converted). In the spirit of mutual benefit I felt I should post this as it's the beginning of the 'new smug' customization efforts and this type of thing happened alot back in the early days of legacy work.
As a mac user I run both FF and Safari so I checked some of the sites in this thread and got concerned as it looks like the results aren't universal across browsers (not sure about Chrome or IE) but I wanted to mention this to see if it's just at my end or what... in each case below the Safari screenshot is on the left with FF on the right side.
Rons site:
Robs site:
I can and will check any other type efforts as needed if I can be of assistance - as a mac guy I hope to see these changes work in ALL the current browsers so all our customers have a universally good experience.
Hope this helps,
rich56k
Wow! Thanks for the very nice comment. I think I'm blushing:D.
Any way... I have 2 of the most basic sites pretty well converted. The one I'm working on now (www.onbroadwaydancers.com) has a bit more to it, but no where near MY site. I hope to learn on these 1st 3 then hit the ground running on mine.
As for the rounded stuff... Is Safari on your MAC different than Safari on an iPhone? The corners look good on my phone.
I'll play with my code and maybe I can PM your later.
So I checked in on this thread (as I hope to do the rounded corners (amongst other things when I get my site converted). In the spirit of mutual benefit I felt I should post this as it's the beginning of the 'new smug' customization efforts and this type of thing happened alot back in the early days of legacy work.
I can and will check any other type efforts as needed if I can be of assistance - as a mac guy I hope to see these changes work in ALL the current browsers so all our customers have a universally good experience.
Hope this helps,
rich56k
I loaded Safari 5 for Windows... the rounded corners show up fine except for the Folder and Gallery page thumbs.
In Smugmug gallery style the show up fine as well as the other image boxes around the site ans the homepage slideshow box. Weird.
Wow! Thanks for the very nice comment. I think I'm blushing:D.
Any way... I have 2 of the most basic sites pretty well converted. The one I'm working on now (www.onbroadwaydancers.com) has a bit more to it, but no where near MY site. I hope to learn on these 1st 3 then hit the ground running on mine.
As for the rounded stuff... Is Safari on your MAC different than Safari on an iPhone? The corners look good on my phone.
I'll play with my code and maybe I can PM your later.
I also have one other site to do too, but I didn't migrate in time (they paused migrations until next week)- I working on my main site - just waiting for the dust to settle a bit before going live.
As far as iPhone Safari - (I don't have one but I'm pretty sure it's an "iOS" version for mobile so that could account for the diff.)
Note my Safari isn't the very newest (it is the latest for my machine with the OS I have - there is one newer...) on Monday at work/school I'll have Dell PC's with IE and Chrome and a brand new iMac with the very latest Safari and Firefox. Last week I did some compares and the new version of safari seems to match my slightly older home version in all cases as far as new smug results...so I can check across multiple platforms side by side
I also have one other site to do too, but I didn't migrate in time (they paused migrations until next week)- I working on my main site - just waiting for the dust to settle a bit before going live.
As far as iPhone Safari - (I don't have one but I'm pretty sure it's an "iOS" version for mobile so that could account for the diff.)
Note my Safari isn't the very newest (it is the latest for my machine with the OS I have - there is one newer...) on Monday at work/school I'll have Dell PC's with IE and Chrome and a brand new iMac with the very latest Safari and Firefox. Last week I did some compares and the new version of safari seems to match my slightly older home version in all cases as far as new smug results...so I can check across multiple platforms side by side
Rounded corners are cool. I finally got all mine working.
/*ADD RADIUS CORNERS TO SLIDESHOW AND LARGE PIC IN GALLERIES*/
.sm-tile-single.sm-tiles-uncropped .sm-image {
border-radius: 25px;
box-shadow: 0 0 0 #000;
max-width: 95%}
I left the box shadow in but currently not using it.
/* 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;
}
/* round the edges on gallery thumbnails */
.sm-gallery-roworganic img {
border-radius: 10px;
}
This was some of the 1st code put out on Dgrin. I'm not sure WHY it makes it work, but it does. I plated with some of the original code posted for this HACK.
Safari on my PC act weird w/ the corners They appear rounded as the site loads, then once loading is complete they go square.
I googled it and the new Safari is supposed to work w/ the same code as the new FF.
Did you look at any other pages on the site to see if the corners rendered correctly?
The all-in-one super marketing page!
OK the original page I posted the screen shot of - when I returned it did the same thing (as you mentioned) showed rounded at first then filled in as square (??!!) EDIT: That was at 9:28 PT - hey I'm a slow typist!!
The attached image (folder/gallery page) looks better, almost like it's just the folder name (2006) and it's 'panel' it appears on causing the issue. Once I clicked into the gallery itself it looked great: All rounded corner thumbs AND main image!
As of 9:48 PT everything I checked looks great - all rounded everywhere!!
Gallery/folder pages AND actual galleries themselves!
Rounded corners are cool. I finally got all mine working.
I left the box shadow in but currently not using it.
Sir Eagle,
Please note in Safari the only rounded images are the home page slideshow...the folder/galleries pages and galleries themselves are still square...
Must be something diff between your code and Anthonys...
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?
The /* is just a comment line to give a note as to what the following code is for. As long as you have a matching */ at the end of the line it should be greyed out, but the following code should be coloured and active. Have you got it working now?
OK the original page I posted the screen shot of - when I returned it did the same thing (as you mentioned) showed rounded at first then filled in as square (??!!) EDIT: That was at 9:28 PT - hey I'm a slow typist!!
The attached image (folder/gallery page) looks better, almost like it's just the folder name (2006) and it's 'panel' it appears on causing the issue. Once I clicked into the gallery itself it looked great: All rounded corner thumbs AND main image!
As of 9:48 PT everything I checked looks great - all rounded everywhere!!
Gallery/folder pages AND actual galleries themselves!
That was it!
R
Fixed that one
.sm-tile-info
{
border-radius: 0px 0px 25px 25px;
}
Code sets different curves for each corner (top-left, top-right, bottom-right, bottom-left). I had to do that other wise the over-lay was rounded on all 4 corners.
Her's all my code
/********Rounding the corners********/
.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-tile-single.sm-tiles-uncropped .sm-image /*SM Main & Homepage Slideshow Box*/
{
border-radius: 25px;
}
/*Safari Hack for Folder & Gallery Thumbs*/
.sm-tiles-center-image .sm-tile-limit-width,
.sm-tile-info
{
border-radius: 0px 0px 25px 25px;
}
.sm-gallery-tiles .sm-tile img, /*SM Thm*/
.sm-gallery-tiles .sm-tile .sm-tile-overlay/*SM Thm*/
{
border-radius: 10px;
}
Sir Eagle,
Please note in Safari the only rounded images are the home page slideshow...the folder/galleries pages and galleries themselves are still square...
Must be something diff between your code and Anthonys...
R
Thanks, just added brandofamily tweak, did it fix it?
The /* is just a comment line to give a note as to what the following code is for. As long as you have a matching */ at the end of the line it should be greyed out, but the following code should be coloured and active. Have you got it working now?
Haven't been able to get it to work yet. But now I noticed a bigger issue. Every time I try to place the coding for rounded galleries or photos, that part works fine, but some of my galleries then disappear!
Argh!
So all I need to do is get the folders to look rounded and then determine why my galleries disappear. They're still on the site, because I see them in my Organizer. They just go "Poof!" for some reason when I start messing with the site.
I know it's because I don't know what the heck I'm doing and am making some kind of mistake, but it's frustrating. I've gotten very little help from the support heroes on this.
The most recent time, they simply "fixed" it for me but didn't give me a solid understanding of what went wrong so I can fix it myself the next time it happens.
"Where have you gone, Joe DiMaggio, our nation turns its lonely eyes to you?"
The /* is just a comment line to give a note as to what the following code is for. As long as you have a matching */ at the end of the line it should be greyed out, but the following code should be coloured and active. Have you got it working now?
Darn. Still can't get it to work. I wonder if it's because of my theme or because I'm using Collage Landscape?
"Where have you gone, Joe DiMaggio, our nation turns its lonely eyes to you?"
Darn. Still can't get it to work. I wonder if it's because of my theme or because I'm using Collage Landscape?
This is what I have in CSS for galleries and folders. I tried just placing it in the entire site theme, but it didn't like that.I use collage landscape too. I got it from Nicholas' excellent site http://www.sherlockphotography.org/Customisations/Rounded-corners
/* make corners round on gallery lin images in folders */
.sm-page-widget-galleries .sm-tile a {
border-radius:10px;
}
/* Round the images inside Collage Landscape or Collage Portrait galleries */
.sm-gallery-roworganic .sm-gallery-images .sm-tile, .sm-gallery-columnorganic .sm-gallery-images .sm-tile {
border-radius:8px;
overflow:hidden;
}
/* Round images displayed in the Lightbox */
.sm-lightbox-image {
border-radius:8px;
}
This is what I have in CSS for galleries and folders. I tried just placing it in the entire site theme, but it didn't like that.I use collage landscape too. I got it from Nicholas' excellent site http://www.sherlockphotography.org/Customisations/Rounded-corners
/* make corners round on gallery lin images in folders */
.sm-page-widget-galleries .sm-tile a {
border-radius:10px;
}
/* Round the images inside Collage Landscape or Collage Portrait galleries */
.sm-gallery-roworganic .sm-gallery-images .sm-tile, .sm-gallery-columnorganic .sm-gallery-images .sm-tile {
border-radius:8px;
overflow:hidden;
}
/* Round images displayed in the Lightbox */
.sm-lightbox-image {
border-radius:8px;
}
Thank you, Rob! Yes, it didn't like it in the Entire Site CSS. But it works fine in the All Folders CSS for me. So thanks for the helping hand. And thanks for passing along the customizations from Sherlock Photography.
"Where have you gone, Joe DiMaggio, our nation turns its lonely eyes to you?"
What you're seeing is the photos on the right getting their complete right edge cropped off by the edge of the page. If you resize your browser window slightly, you'll see SmugMug's Collage Landscape layout reshuffling the images to fit better, and they'll suddenly stop getting cropped off at the right.
As to why that might be happening, I'm not sure. You could try reducing any left or right margins you can find in the customiser to zero.
I used this to fix the pics on the right side in the collage landscape galleries.
Comments
Add this:
.sm-gallery-tiles .sm-tile .sm-tile-overlay { border-radius: 25px; }Please check out my gallery of customisations for the New SmugMug, more to come!
Thanks!
Also, is there a code to round images in photo blocks, both the single, and the multi?
What you're seeing is the photos on the right getting their complete right edge cropped off by the edge of the page. If you resize your browser window slightly, you'll see SmugMug's Collage Landscape layout reshuffling the images to fit better, and they'll suddenly stop getting cropped off at the right.
As to why that might be happening, I'm not sure. You could try reducing any left or right margins you can find in the customiser to zero.
For the multi:
.sm-page-widget-images .sm-tile a { border-radius:8px; }For the single, it might depend on the options you've chosen, but this works for one of mine:
.sm-page-widget-image .sm-tile img { border-radius:8px; }Please check out my gallery of customisations for the New SmugMug, more to come!
Hi Anthony,
I remember watching your prep of (all) your legacy sites with great admiration for all the work you put in, and how well they ended up. I also understand the huge amount of work you'll need to replicate those results in the new smug.
So I checked in on this thread (as I hope to do the rounded corners (amongst other things when I get my site converted). In the spirit of mutual benefit I felt I should post this as it's the beginning of the 'new smug' customization efforts and this type of thing happened alot back in the early days of legacy work.
As a mac user I run both FF and Safari so I checked some of the sites in this thread and got concerned as it looks like the results aren't universal across browsers (not sure about Chrome or IE) but I wanted to mention this to see if it's just at my end or what... in each case below the Safari screenshot is on the left with FF on the right side.
Rons site:
Robs site:
I can and will check any other type efforts as needed if I can be of assistance - as a mac guy I hope to see these changes work in ALL the current browsers so all our customers have a universally good experience.
Hope this helps,
rich56k
Member: ASMP; EP; NPPA; CPS
Luckily, it's not like the corners falling back to the default shape is going to ruin your clients' experience or anything.
Please check out my gallery of customisations for the New SmugMug, more to come!
I have Safari 5.0.6 running on an iMac 17" 2.33 Core 2 duo with OSX 10.5.8.
The only difference I could see is just the square vs rounded corners so yes it won't be known to them unless they visit with 2 different browsers...
-rich56k
Member: ASMP; EP; NPPA; CPS
Wow! Thanks for the very nice comment. I think I'm blushing:D.
Any way... I have 2 of the most basic sites pretty well converted. The one I'm working on now (www.onbroadwaydancers.com) has a bit more to it, but no where near MY site. I hope to learn on these 1st 3 then hit the ground running on mine.
As for the rounded stuff... Is Safari on your MAC different than Safari on an iPhone? The corners look good on my phone.
I'll play with my code and maybe I can PM your later.
I loaded Safari 5 for Windows... the rounded corners show up fine except for the Folder and Gallery page thumbs.
In Smugmug gallery style the show up fine as well as the other image boxes around the site ans the homepage slideshow box. Weird.
I also have one other site to do too, but I didn't migrate in time (they paused migrations until next week)- I working on my main site - just waiting for the dust to settle a bit before going live.
As far as iPhone Safari - (I don't have one but I'm pretty sure it's an "iOS" version for mobile so that could account for the diff.)
Note my Safari isn't the very newest (it is the latest for my machine with the OS I have - there is one newer...) on Monday at work/school I'll have Dell PC's with IE and Chrome and a brand new iMac with the very latest Safari and Firefox. Last week I did some compares and the new version of safari seems to match my slightly older home version in all cases as far as new smug results...so I can check across multiple platforms side by side
Here's one of my all time favorite pages from your main site:
http://www.brandolinoimaging.com/gallery/1091885
You really went all out!1
Let me know if I can do anything else in the meantime!
Rich
Member: ASMP; EP; NPPA; CPS
I hope to recreate that one:D
This is my fav: http://www.brandolinoimaging.com/gallery/6055140_dwSjx
But I doubt I'll be recreating that one since it's all JS.:cry
Safari on my PC act weird w/ the corners They appear rounded as the site loads, then once loading is complete they go square.
I googled it and the new Safari is supposed to work w/ the same code as the new FF.
Did you look at any other pages on the site to see if the corners rendered correctly?
I left the box shadow in but currently not using it.
/*Safari Hack for Folder & Gallery Thumbs*/ .sm-tiles-center-image .sm-tile-limit-width { border-radius: 25px; }This was some of the 1st code put out on Dgrin. I'm not sure WHY it makes it work, but it does. I plated with some of the original code posted for this HACK.
The all-in-one super marketing page!
OK the original page I posted the screen shot of - when I returned it did the same thing (as you mentioned) showed rounded at first then filled in as square (??!!) EDIT: That was at 9:28 PT - hey I'm a slow typist!!
The attached image (folder/gallery page) looks better, almost like it's just the folder name (2006) and it's 'panel' it appears on causing the issue. Once I clicked into the gallery itself it looked great: All rounded corner thumbs AND main image!
As of 9:48 PT everything I checked looks great - all rounded everywhere!!
Gallery/folder pages AND actual galleries themselves!
That was it!
R
Member: ASMP; EP; NPPA; CPS
Sir Eagle,
Please note in Safari the only rounded images are the home page slideshow...the folder/galleries pages and galleries themselves are still square...
Must be something diff between your code and Anthonys...
R
Member: ASMP; EP; NPPA; CPS
The /* is just a comment line to give a note as to what the following code is for. As long as you have a matching */ at the end of the line it should be greyed out, but the following code should be coloured and active. Have you got it working now?
http://www.sherlockphotography.org/Customisations/Rounded-corners
There's also a code at the bottom there that just tries to round virtually everything in your website in one command.
Please check out my gallery of customisations for the New SmugMug, more to come!
Fixed that one
.sm-tile-info { border-radius: 0px 0px 25px 25px; }Code sets different curves for each corner (top-left, top-right, bottom-right, bottom-left). I had to do that other wise the over-lay was rounded on all 4 corners.
Her's all my code
/********Rounding the corners********/ .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-tile-single.sm-tiles-uncropped .sm-image /*SM Main & Homepage Slideshow Box*/ { border-radius: 25px; } /*Safari Hack for Folder & Gallery Thumbs*/ .sm-tiles-center-image .sm-tile-limit-width, .sm-tile-info { border-radius: 0px 0px 25px 25px; } .sm-gallery-tiles .sm-tile img, /*SM Thm*/ .sm-gallery-tiles .sm-tile .sm-tile-overlay/*SM Thm*/ { border-radius: 10px; }Haven't been able to get it to work yet. But now I noticed a bigger issue. Every time I try to place the coding for rounded galleries or photos, that part works fine, but some of my galleries then disappear!
Argh!
So all I need to do is get the folders to look rounded and then determine why my galleries disappear. They're still on the site, because I see them in my Organizer. They just go "Poof!" for some reason when I start messing with the site.
I know it's because I don't know what the heck I'm doing and am making some kind of mistake, but it's frustrating. I've gotten very little help from the support heroes on this.
The most recent time, they simply "fixed" it for me but didn't give me a solid understanding of what went wrong so I can fix it myself the next time it happens.
http://mcq.smugmug.com
OK as of 10:55 a.m. Pacific Time...
I'm seeing the main folder/galleries and next level of nav bar (shown) still squared the galleries themselves are now rounded (shown)...getting closer
-r
Member: ASMP; EP; NPPA; CPS
http://www.onbroadwaydancers.com/Other/Search-Page
Darn. Still can't get it to work. I wonder if it's because of my theme or because I'm using Collage Landscape?
http://mcq.smugmug.com
This is what I have in CSS for galleries and folders. I tried just placing it in the entire site theme, but it didn't like that.I use collage landscape too. I got it from Nicholas' excellent site http://www.sherlockphotography.org/Customisations/Rounded-corners
/* make corners round on gallery lin images in folders */ .sm-page-widget-galleries .sm-tile a { border-radius:10px; } /* Round the images inside Collage Landscape or Collage Portrait galleries */ .sm-gallery-roworganic .sm-gallery-images .sm-tile, .sm-gallery-columnorganic .sm-gallery-images .sm-tile { border-radius:8px; overflow:hidden; } /* Round images displayed in the Lightbox */ .sm-lightbox-image { border-radius:8px; }http://www.sherlockphotography.org/Customisations/Rounded-cornersThank you, Rob! Yes, it didn't like it in the Entire Site CSS. But it works fine in the All Folders CSS for me. So thanks for the helping hand. And thanks for passing along the customizations from Sherlock Photography.
http://mcq.smugmug.com
I think it has something to do with the square thumbs. Sorry to not be more helpful.
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;
}