I think I have finally got mine sorted. I have rounded corners on gallery images and in the light box (when you click on an image) Also added a thin border around the images.
You have a redundant period at the end of your website link. It won't load until you remove it.
edit - it's gone now!
I did nuthin'
BTW, I'm losing almost all the <a herf= links in my html boxes. Now seen on two different site index pages.
Sencond page lost them in one of three boxes, luckily I had just copied out the html and saved in notepad.
Can you list all your code for the roundness Allen?
Not sure yet if this can all be put somewhere more efficient.
Yellow are the CSS boxes. The rule "xxxx round corners of all thumbs," is because comments do not
stick after saving in any of my CSS boxes and just a work-a-round.
All pages smugmug style
[COLOR=Yellow]=== all galleries ===[/COLOR]
xxxx round corners of all thumbs,
.sm-gallery-tiles .sm-tile img {
border-radius: 8px;
}
[COLOR=Yellow]==== all folders ====[/COLOR]
.sm-page-widget-folders .sm-tile a,
.sm-page-widget-galleries .sm-tile a {
border-radius: 8px;
}
[COLOR=Yellow]=== homepage (slideshow and popular box photos) ===[/COLOR]
.sm-page-widget-slideshow .sm-tile-single.sm-tiles-uncropped .sm-image {
border-radius: 25px;
box-shadow: -6px 5px 10px #000;
max-width: 95%
}
xxxx round corners of all photos,
.sm-page-widget-images .sm-image {
border-radius: 8px;
}
One thing I noticed is when any of these pages (that end up top=square/bottom=rounded) is loading the initial view is a solid black all rounded placeholder (?) then once the actual image loads it goes sq/rd...
Look I don't know jack about all this coding stuff, however, I can and will do this checking for you guys as often as I can on mac / safari...because the ground you're all breaking now so to speak is going to benefit all smuggers down the road...
1. Rounded menu buttons - also filled with colour
2. Rounded images in gallery list
3. Rounded gallery images (I use collage-landscape) also with thin border
4. Rounded lightbox images (big ones when you click on image) also with thin border
5. Suppress captions on images in gallery collage
6. Correct margin error due to adding borders
/* ALL SITE CSS make menu bar filled and rounded items */
.sm-page-widget-nav-toplink
{
border:1px solid #c2c2c4;
padding: 4px 4px 4px 4px; /*padding around text*/
border-radius:6px; /* round off the corners*/
background: #7c7c7c; /* fill the background*/
}
/* HOMEPAGE CSS make menu bar filled and rounded items */
.sm-page-widget-nav-toplink
{
border:1px solid #c2c2c4;
padding: 4px 4px 4px 4px; /*padding around text*/
border-radius:6px; /* round off the corners*/
background: #7c7c7c; /* fill the background*/
}
/* FOLDERS CSS make corners round on gallery link images in folders */
.sm-page-widget-nav-toplink
{
border:1px solid #c2c2c4;
padding: 4px 4px 4px 4px; /*padding around text*/
border-radius:6px; /* round off the corners*/
background: #7c7c7c; /* fill the background*/
}
/* FOLDERS CSS block make corners round on gallery link images in folders */
.sm-page-widget-galleries .sm-tile a {
border-radius: 10px;
}
/* GALLERY CSS block #1 hide captions on images */
.sm-tile-caption {
display: none;
}
/* GALLERY CSS block #2 make corners round on gallery link images in folders */
.sm-page-widget-galleries .sm-tile a {
overflow:hidden;
border:1px solid #c2c2c4;
padding: 0px 0px 0px 0px; /* padding around text*/
border-radius:7px; /* round off the corners*/
background: #2e4c46; /* fill the background*/
}
/* GALLERY CSS block #3 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 {
overflow:hidden;
border:1px solid #c2c2c4;
padding: 0px 0px 0px 0px; /* padding around text*/
border-radius:7px; /* round off the corners*/
background: #2e4c46; /* fill the background*/
}
/* GALLERY CSS block #4 Round image corners and displayed in the Lightbox */
.sm-lightbox-image {
border:1px solid #c2c2c4;
border-radius:8px; /* round off the corners*/
}
/* GALLERY CSS block #5 make menu bar filled and rounded items */
.sm-page-widget-nav-toplink {
border:1px solid #c2c2c4;
padding: 4px 4px 4px 4px; /*padding around text*/
border-radius:6px; /* round off the corners*/
background: #7c7c7c; /* fill the background*/
}
/* GALLERY CSS block #6 fix right margins being cropped off */
.sm-tiles-row-organic .sm-tiles-list {
overflow: visible;
margin: 0 0 0 -18px;
}
Note: the only square corners I saw anywhere are on the left side of home page in the Blog itself,
the right side of home page are all rounded.
Yeah those are from a feed off of blogger. I had a number of use who used to go to my main page, and then go to blogger. Why they just didn't go there first I don't know. I figured I'd save them a trip, plus it gives me a means to always update my homepage. I doubt those could be rounded. Who knows? It's above my pay-grade...
Thanks!
Can you check these again. I removed some code and compared mine to some other site's code who you said had everything rounded.
Now all are currently all squared...however, the bottom 3 links if I reload those pages multiple times they still have that "load black placeholder rounded corners (all 4 corners) before loading the actual images and showing all square" behavior noted in my last email...
Hope that helps...
4 pm EDIT: I should have mentioned they're all squared ONLY in Safari; in FF ALL are still rounded
1. Rounded menu buttons - also filled with colour
2. Rounded images in gallery list
3. Rounded gallery images (I use collage-landscape) also with thin border
4. Rounded lightbox images (big ones when you click on image) also with thin border
5. Suppress captions on images in gallery collage
6. Correct margin error due to adding borders
/* ALL SITE CSS make menu bar filled and rounded items */
.sm-page-widget-nav-toplink
{
border:1px solid #c2c2c4;
padding: 4px 4px 4px 4px; /*padding around text*/
border-radius:6px; /* round off the corners*/
background: #7c7c7c; /* fill the background*/
}
/* HOMEPAGE CSS make menu bar filled and rounded items */
.sm-page-widget-nav-toplink
{
border:1px solid #c2c2c4;
padding: 4px 4px 4px 4px; /*padding around text*/
border-radius:6px; /* round off the corners*/
background: #7c7c7c; /* fill the background*/
}
/* FOLDERS CSS make corners round on gallery link images in folders */
.sm-page-widget-nav-toplink
{
border:1px solid #c2c2c4;
padding: 4px 4px 4px 4px; /*padding around text*/
border-radius:6px; /* round off the corners*/
background: #7c7c7c; /* fill the background*/
}
/* FOLDERS CSS block make corners round on gallery link images in folders */
.sm-page-widget-galleries .sm-tile a {
border-radius: 10px;
}
/* GALLERY CSS block #1 hide captions on images */
.sm-tile-caption {
display: none;
}
/* GALLERY CSS block #2 make corners round on gallery link images in folders */
.sm-page-widget-galleries .sm-tile a {
overflow:hidden;
border:1px solid #c2c2c4;
padding: 0px 0px 0px 0px; /* padding around text*/
border-radius:7px; /* round off the corners*/
background: #2e4c46; /* fill the background*/
}
/* GALLERY CSS block #3 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 {
overflow:hidden;
border:1px solid #c2c2c4;
padding: 0px 0px 0px 0px; /* padding around text*/
border-radius:7px; /* round off the corners*/
background: #2e4c46; /* fill the background*/
}
/* GALLERY CSS block #4 Round image corners and displayed in the Lightbox */
.sm-lightbox-image {
border:1px solid #c2c2c4;
border-radius:8px; /* round off the corners*/
}
/* GALLERY CSS block #5 make menu bar filled and rounded items */
.sm-page-widget-nav-toplink {
border:1px solid #c2c2c4;
padding: 4px 4px 4px 4px; /*padding around text*/
border-radius:6px; /* round off the corners*/
background: #7c7c7c; /* fill the background*/
}
/* GALLERY CSS block #6 fix right margins being cropped off */
.sm-tiles-row-organic .sm-tiles-list {
overflow: visible;
margin: 0 0 0 -18px;
}
Rob,
Thanks for posting this!!
You know those borders really set the whole viewing experience up a few notches - well done
I think I have finally got mine sorted. I have rounded corners on gallery images and in the light box (when you click on an image) Also added a thin border around the images.
1. Rounded menu buttons - also filled with colour
2. Rounded images in gallery list
3. Rounded gallery images (I use collage-landscape) also with thin border
4. Rounded lightbox images (big ones when you click on image) also with thin border
5. Suppress captions on images in gallery collage
6. Correct margin error due to adding borders
Rob, thank you for posting this as well. So good I printed the page!
"Where have you gone, Joe DiMaggio, our nation turns its lonely eyes to you?"
I spent quite a bit of time setting it up. But once it's in place there shouldn't be need to change it. Two other things...
1. Round edges and borders for menus and images should be a standard feature in the new smug customisation interface as I'm sure a lot of users will want them. It must be a ridiculously easy thing to do at the product level. We should not have to faff around with bits of code for major things like that.
2. If it is done by CSS code, then Smug should provide a central resource where examples of that code are available and explained, and all a user has to do is make minor mods such as colours, thickness etc. Users shouldn't have to trawl through threads like this one looking for answers to how to do something in customisation.Some users are paying a lot of $$$ for this service.
2. If it is done by CSS code, then Smug should provide a central resource where examples of that code are available and explained, and all a user has to do is make minor mods such as colours, thickness etc. Users shouldn't have to trawl through threads like this one looking for answers to how to do something in customisation.Some users are paying a lot of $$$ for this service.
I asked one of the development personnel for a list of codes that would work and they directed me to learn more CSS on my own.
I asked one of the development personnel for a list of codes that would work and they directed me to learn more CSS on my own.
That's probably not an unreasonable response. You didn't quote my first point, which is that these sort of features should be standard in Smug through the customisation interface. You shouldn't need to do basic cosmetic stuff like this in CSS, because it's not just you doing it, it's potentially thousands.
The CSS option is there, but I guess Smug don't want to be a general support service for that as it's too much of a resource overhead. Isn't this partly the reason they redesigned the system?
Comments
http://www.macromeister.co.uk/Images
Thanks! That worked!
Yeah, it worked for me as well. I had the same problem. Thanks, Eagle.
Any ideas on this one?
My Website index | My Blog
You have a redundant period at the end of your website link. It won't load until you remove it.
edit - it's gone now!
.sm-page-widget-galleries .sm-tile a { border-radius: 10px; } .sm-gallery-roworganic img { border-radius: 10px; } .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: 10px; } .sm-user-ui .sm-page-widget-nav-toplink a:hover { color: #898752!important; } .sm-page-widget-images .sm-tile a { border-radius: 10px; } .sm-page-widget-image .sm-tile img { border-radius: 8px; } .sm-tiles-row-organic .sm-tiles-list { overflow: visible; margin: 0 0 0 -18px; } .sm-tile-single.sm-tiles-uncropped .sm-image { border-radius: 10px; box-shadow: 0 0 0 #000; max-width: 95%}Can you list all your code for the roundness Allen?
/* Try to round nearly every image on the site */ .sm-lightbox-image, .sm-tile { border-radius:8px; overflow:hidden; }Only rounds the top corners of this page for some reason:
http://www.onbroadwaydancers.com/popular
BTW, I'm losing almost all the <a herf= links in my html boxes. Now seen on two different site index pages.
Sencond page lost them in one of three boxes, luckily I had just copied out the html and saved in notepad.
My Website index | My Blog
Yellow are the CSS boxes. The rule "xxxx round corners of all thumbs," is because comments do not
stick after saving in any of my CSS boxes and just a work-a-round.
All pages smugmug style
[COLOR=Yellow]=== all galleries ===[/COLOR] xxxx round corners of all thumbs, .sm-gallery-tiles .sm-tile img { border-radius: 8px; } [COLOR=Yellow]==== all folders ====[/COLOR] .sm-page-widget-folders .sm-tile a, .sm-page-widget-galleries .sm-tile a { border-radius: 8px; } [COLOR=Yellow]=== homepage (slideshow and popular box photos) ===[/COLOR] .sm-page-widget-slideshow .sm-tile-single.sm-tiles-uncropped .sm-image { border-radius: 25px; box-shadow: -6px 5px 10px #000; max-width: 95% } xxxx round corners of all photos, .sm-page-widget-images .sm-image { border-radius: 8px; }My Website index | My Blog
Gee, I'm rapidly losing my mental faculties (is that spelling correct?) and all you have to worry about is lost links...:D
Charles
Brampton, Canada
www.charlesdalyphotography.com
My Website index | My Blog
As of 2:30 pm pacific time everything on your site that had been square in Safari is now rounded in all cases.
This is on a new iMac running OSX 10.8.4; with Safari 6.0.5 and FifeFox 22.0
rich56k
Member: ASMP; EP; NPPA; CPS
Ron,
As of 2:35 pm pacific time everything on your site that had been square in Safari is now rounded in all cases.
This is on a new iMac running OSX 10.8.4; with Safari 6.0.5 and FifeFox 22.0
rich56k
Note: the only square corners I saw anywhere are on the left side of home page in the Blog itself,
the right side of home page are all rounded.
Member: ASMP; EP; NPPA; CPS
Rob,
As of 2:40 pm pacific time everything on your site that had been square in Safari is now rounded in all cases.
This is on a new iMac running OSX 10.8.4; with Safari 6.0.5 and FifeFox 22.0
rich56k
Note: Only square anythings to be found were:
your home page video box and the (2) about page images
Added Bonus - lots of cool borders too
Member: ASMP; EP; NPPA; CPS
Anthony,
As of 2:50 pm pacific time - on a new iMac running OSX 10.8.4; with Safari 6.0.5 and FifeFox 22.0
ON: http://www.onbroadwaydancers.com/popular they're still all square in BOTH browsers.
ON everything listed below: FF= rounded; Safari= square tops w/round bottoms (huh?)
http://www.onbroadwaydancers.com/Info-Pages/Broadway-Dance-Center-Info
http://www.onbroadwaydancers.com/Picture-Galleries
http://www.onbroadwaydancers.com/Picture-Galleries/On-Broadway-Dancers
http://www.onbroadwaydancers.com/Picture-Galleries/On-Broadway-Dancers/2005
However once into the actual galleries they're all round
ex: http://www.onbroadwaydancers.com/Picture-Galleries/On-Broadway-Dancers/2005/Celebration-in-The-Park-2005
One thing I noticed is when any of these pages (that end up top=square/bottom=rounded) is loading the initial view is a solid black all rounded placeholder (?) then once the actual image loads it goes sq/rd...
Look I don't know jack about all this coding stuff, however, I can and will do this checking for you guys as often as I can on mac / safari...because the ground you're all breaking now so to speak is going to benefit all smuggers down the road...
rich56k
Member: ASMP; EP; NPPA; CPS
http://www.macromeister.co.uk/
1. Rounded menu buttons - also filled with colour
2. Rounded images in gallery list
3. Rounded gallery images (I use collage-landscape) also with thin border
4. Rounded lightbox images (big ones when you click on image) also with thin border
5. Suppress captions on images in gallery collage
6. Correct margin error due to adding borders
/* ALL SITE CSS make menu bar filled and rounded items */ .sm-page-widget-nav-toplink { border:1px solid #c2c2c4; padding: 4px 4px 4px 4px; /*padding around text*/ border-radius:6px; /* round off the corners*/ background: #7c7c7c; /* fill the background*/ } /* HOMEPAGE CSS make menu bar filled and rounded items */ .sm-page-widget-nav-toplink { border:1px solid #c2c2c4; padding: 4px 4px 4px 4px; /*padding around text*/ border-radius:6px; /* round off the corners*/ background: #7c7c7c; /* fill the background*/ } /* FOLDERS CSS make corners round on gallery link images in folders */ .sm-page-widget-nav-toplink { border:1px solid #c2c2c4; padding: 4px 4px 4px 4px; /*padding around text*/ border-radius:6px; /* round off the corners*/ background: #7c7c7c; /* fill the background*/ } /* FOLDERS CSS block make corners round on gallery link images in folders */ .sm-page-widget-galleries .sm-tile a { border-radius: 10px; } /* GALLERY CSS block #1 hide captions on images */ .sm-tile-caption { display: none; } /* GALLERY CSS block #2 make corners round on gallery link images in folders */ .sm-page-widget-galleries .sm-tile a { overflow:hidden; border:1px solid #c2c2c4; padding: 0px 0px 0px 0px; /* padding around text*/ border-radius:7px; /* round off the corners*/ background: #2e4c46; /* fill the background*/ } /* GALLERY CSS block #3 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 { overflow:hidden; border:1px solid #c2c2c4; padding: 0px 0px 0px 0px; /* padding around text*/ border-radius:7px; /* round off the corners*/ background: #2e4c46; /* fill the background*/ } /* GALLERY CSS block #4 Round image corners and displayed in the Lightbox */ .sm-lightbox-image { border:1px solid #c2c2c4; border-radius:8px; /* round off the corners*/ } /* GALLERY CSS block #5 make menu bar filled and rounded items */ .sm-page-widget-nav-toplink { border:1px solid #c2c2c4; padding: 4px 4px 4px 4px; /*padding around text*/ border-radius:6px; /* round off the corners*/ background: #7c7c7c; /* fill the background*/ } /* GALLERY CSS block #6 fix right margins being cropped off */ .sm-tiles-row-organic .sm-tiles-list { overflow: visible; margin: 0 0 0 -18px; }Can you check these again. I removed some code and compared mine to some other site's code who you said had everything rounded.
What code if any did you add to correct the Safari issue?
My "hack" was causing more issues to arise I think.
Yeah those are from a feed off of blogger. I had a number of use who used to go to my main page, and then go to blogger. Why they just didn't go there first I don't know. I figured I'd save them a trip, plus it gives me a means to always update my homepage. I doubt those could be rounded. Who knows? It's above my pay-grade...
Now all are currently all squared...however, the bottom 3 links if I reload those pages multiple times they still have that "load black placeholder rounded corners (all 4 corners) before loading the actual images and showing all square" behavior noted in my last email...
Hope that helps...
4 pm EDIT: I should have mentioned they're all squared ONLY in Safari; in FF ALL are still rounded
Member: ASMP; EP; NPPA; CPS
I had that thought might have been the case; I just figured if I mentioned it it would have been something else altogether
All of this is way over my pay grade - just waiting for you all to get stuff squared away then I'll start on mine
Member: ASMP; EP; NPPA; CPS
Rob,
Thanks for posting this!!
You know those borders really set the whole viewing experience up a few notches - well done
Member: ASMP; EP; NPPA; CPS
Yes, that's looking good.
http://mcq.smugmug.com
Rob, thank you for posting this as well. So good I printed the page!
http://mcq.smugmug.com
I spent quite a bit of time setting it up. But once it's in place there shouldn't be need to change it. Two other things...
1. Round edges and borders for menus and images should be a standard feature in the new smug customisation interface as I'm sure a lot of users will want them. It must be a ridiculously easy thing to do at the product level. We should not have to faff around with bits of code for major things like that.
2. If it is done by CSS code, then Smug should provide a central resource where examples of that code are available and explained, and all a user has to do is make minor mods such as colours, thickness etc. Users shouldn't have to trawl through threads like this one looking for answers to how to do something in customisation.Some users are paying a lot of $$$ for this service.
I asked one of the development personnel for a list of codes that would work and they directed me to learn more CSS on my own.
That's probably not an unreasonable response. You didn't quote my first point, which is that these sort of features should be standard in Smug through the customisation interface. You shouldn't need to do basic cosmetic stuff like this in CSS, because it's not just you doing it, it's potentially thousands.
The CSS option is there, but I guess Smug don't want to be a general support service for that as it's too much of a resource overhead. Isn't this partly the reason they redesigned the system?