Frequently Requested Simple Modifications / Tweaks

178101213

Comments

  • GrabajavaGrabajava Beginner grinner Registered Users Posts: 5 Beginner grinner
    edited October 4, 2013
    Full Screen bottom menu "Share - Add To Cart"
    Thank you for all your help! thumb.gif

    I just started to customize my website and love your menu bar at the bottom of your "full Screen image" Full%20Screen%20Bottom%20menu-X3.jpg

    How can I create one similar to yours?

    How can I add the "ADD TO CART" in the right corner?

    http://www.carlleblanc.ca



    e340b++ffiLI298cdTX2P8H6i+4FXuIhTQAAAAASUVORK5CYII=

    Thank you!

    Carl
  • miseryshusbandmiseryshusband Big grins Registered Users Posts: 15 Big grins
    edited October 4, 2013
    Lightbox Size
    I am maintaining this for a boosterclub that has amatuer photographers (my wife, 2 others, and myself) taking pictures for the families of football games, mostly under the lights (painful). That being said my smugmug account is accually an iframe in there larger site www.hickoryfootball.org. Here is my question.

    Is there a way to change the size of the lightbox when you click to enlarge. Currently my page is 978px to fit in the iframe. When I click on a picture to go full size, it uses the entire Iframe and landscape picutres are half way down the page. Portrait pictures file the entire frame and you have to scroll up and down to see the picture. I would like the lightbox to only take up a max-height of 768px (approximate) so landscape picture stay toward the top of the iframe and you dont have to scroll up and down the page to see pictures that are portrait.

    Thanks for your help.
  • leftquarkleftquark Former SmugMug Product Team Registered Users, Retired Mod Posts: 3,780 Many Grins
    edited October 7, 2013
    I am maintaining this for a boosterclub that has amatuer photographers (my wife, 2 others, and myself) taking pictures for the families of football games, mostly under the lights (painful). That being said my smugmug account is accually an iframe in there larger site www.hickoryfootball.org. Here is my question.

    Is there a way to change the size of the lightbox when you click to enlarge. Currently my page is 978px to fit in the iframe. When I click on a picture to go full size, it uses the entire Iframe and landscape picutres are half way down the page. Portrait pictures file the entire frame and you have to scroll up and down to see the picture. I would like the lightbox to only take up a max-height of 768px (approximate) so landscape picture stay toward the top of the iframe and you dont have to scroll up and down the page to see pictures that are portrait.

    Thanks for your help.

    Do you still need help with this? Looking at your website it seems you've figured it out?
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • miseryshusbandmiseryshusband Big grins Registered Users Posts: 15 Big grins
    edited October 7, 2013
    lightbox size
    leftquark wrote: »
    Do you still need help with this? Looking at your website it seems you've figured it out?

    yes, I haven't been able to figure it out. Currently it is sitting full screen and I would like to limit its size. I know the css will be applied to entire site, and I know it is going to be a max-height setting. I am just not sure what the class is.

    if I had to guess
    .sm-user-us, .sm-lightbox-tools {
    max-height:xxxpx;}
    

    I haven't tried yet but that is what I was going to try tomorrow.
  • leftquarkleftquark Former SmugMug Product Team Registered Users, Retired Mod Posts: 3,780 Many Grins
    edited October 7, 2013
    yes, I haven't been able to figure it out. Currently it is sitting full screen and I would like to limit its size. I know the css will be applied to entire site, and I know it is going to be a max-height setting. I am just not sure what the class is.

    if I had to guess
    .sm-user-us, .sm-lightbox-tools {
    max-height:xxxpx;}
    

    I haven't tried yet but that is what I was going to try tomorrow.

    Have you looked at this thread? http://www.dgrin.com/showthread.php?t=241261&highlight=lightbox

    For what it's worth, when I looked at your site yesterday, the lightbox only opened up in the iframe. It didn't take up the entire screen.
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • miseryshusbandmiseryshusband Big grins Registered Users Posts: 15 Big grins
    edited October 7, 2013
    leftquark wrote: »
    Have you looked at this thread? http://www.dgrin.com/showthread.php?t=241261&highlight=lightbox

    For what it's worth, when I looked at your site yesterday, the lightbox only opened up in the iframe. It didn't take up the entire screen.

    Thank you for your reply. It sees the iframe as full screen and takes the entire iframe. So for a portrait pictures, the parent has to scroll the outside scroll bar to see the entire picture. I guess its not that big of a deal and it is way better than what I used to have, I was just trying to clean it up. I am gonna give your link a try later tonight to see if thats what I am looking for. Thanks
  • thenickdudethenickdude Software developer Dunedin, New ZealandRegistered Users Posts: 1,302 Major grins
    edited October 7, 2013
    Thank you for your reply. It sees the iframe as full screen and takes the entire iframe. So for a portrait pictures, the parent has to scroll the outside scroll bar to see the entire picture. I guess its not that big of a deal and it is way better than what I used to have, I was just trying to clean it up. I am gonna give your link a try later tonight to see if thats what I am looking for. Thanks

    Try installing this customisation of mine which makes the caption visible all the time:

    http://www.sherlockphotography.org/Customisations/Lightbox-captions

    A useful side-effect of this customisation for your purposes is that it allows the size of the image area to be easily controlled. Add this CSS code to the end of that customisation:
    .sm-lightbox .sm-lightbox-content { 
      height: 600px !important;
    }
    

    You can change that "600" to change the maximum height of the photo in the lightbox.
  • leftquarkleftquark Former SmugMug Product Team Registered Users, Retired Mod Posts: 3,780 Many Grins
    edited October 8, 2013
    Lamah wrote: »
    Try installing this customisation of mine which makes the caption visible all the time:

    http://www.sherlockphotography.org/Customisations/Lightbox-captions

    A useful side-effect of this customisation for your purposes is that it allows the size of the image area to be easily controlled. Add this CSS code to the end of that customisation:
    .sm-lightbox .sm-lightbox-content { 
      height: 600px !important;
    }
    

    You can change that "600" to change the maximum height of the photo in the lightbox.

    clap.gifwings.gifthumb.gif :ivar
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • miseryshusbandmiseryshusband Big grins Registered Users Posts: 15 Big grins
    edited October 8, 2013
    Lamah wrote: »
    Try installing this customisation of mine which makes the caption visible all the time:

    http://www.sherlockphotography.org/Customisations/Lightbox-captions

    A useful side-effect of this customisation for your purposes is that it allows the size of the image area to be easily controlled. Add this CSS code to the end of that customisation:
    .sm-lightbox .sm-lightbox-content { 
      height: 600px !important;
    }
    
    You can change that "600" to change the maximum height of the photo in the lightbox.



    Lamah, this was exactly what I was looking for. THANK YOU VERY MUCH. I went to the forum to get the play button removed. If I could trouble you for one more thing, the navigation arrows are below the cart and picture, is there anyway to bring them up to the picture.
  • thenickdudethenickdude Software developer Dunedin, New ZealandRegistered Users Posts: 1,302 Major grins
    edited October 8, 2013
    Lamah, this was exactly what I was looking for. THANK YOU VERY MUCH. I went to the forum to get the play button removed. If I could trouble you for one more thing, the navigation arrows are below the cart and picture, is there anyway to bring them up to the picture.

    Whoops, there was a bug in the code! Find this section:
    /* Previously floating navigation tools stay with the image */
    	.sm-user-ui .sm-lightbox .yui3-widget-hd .sm-lightbox-tools,.sm-lightbox .sm-lightbox-nav {
    		position: absolute;
    	}
    

    Replace it with:
    /* Previously floating navigation tools stay with the image */
    	.sm-user-ui .sm-lightbox .yui3-widget-hd .sm-lightbox-tools,
    	.sm-user-ui .sm-lightbox .sm-lightbox-nav {
    		position: absolute;
    	}
    
  • miseryshusbandmiseryshusband Big grins Registered Users Posts: 15 Big grins
    edited October 8, 2013
    Lamah wrote: »
    Whoops, there was a bug in the code! Find this section:
    /* Previously floating navigation tools stay with the image */
        .sm-user-ui .sm-lightbox .yui3-widget-hd .sm-lightbox-tools,.sm-lightbox .sm-lightbox-nav {
            position: absolute;
        }
    
    Replace it with:
    /* Previously floating navigation tools stay with the image */
        .sm-user-ui .sm-lightbox .yui3-widget-hd .sm-lightbox-tools,
        .sm-user-ui .sm-lightbox .sm-lightbox-nav {
            position: absolute;
        }
    

    PERFECT! Again thanks! The help some of you provide on here is priceless.
  • starrynightstarrynight Big grins Registered Users Posts: 69 Big grins
    edited October 9, 2013
    Thank you, Thank you!. I'm getting where i want to go. Still a few tweaks I consider critical, but now I have the wrapped text in my gallery names, which was absolutely vital to me, 'cause I couldn't tell what was in the galleries without it.

    Is there any way to make those wrapped titles appear under the images in the grid? rather than on the grid photo?
  • starrynightstarrynight Big grins Registered Users Posts: 69 Big grins
    edited October 9, 2013
    Ooh, it worked to just change the Gallery Display Tab setting Info Style to "Under" instead of "Bottom Bar".

    But, when I do that, my other formatting for the text (making the gallery name text smalso, I think written by Allen, but I'm not finding it right now, changing the color & the size of the font go away).
  • leftquarkleftquark Former SmugMug Product Team Registered Users, Retired Mod Posts: 3,780 Many Grins
    edited October 9, 2013
    Ooh, it worked to just change the Gallery Display Tab setting Info Style to "Under" instead of "Bottom Bar".

    But, when I do that, my other formatting for the text (making the gallery name text smalso, I think written by Allen, but I'm not finding it right now, changing the color & the size of the font go away).

    You should be able to control the titles with:
    .sm-tile .sm-tile-info a {
       color: green !important;
       font-size: 18px !important;
    }
    
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • miseryshusbandmiseryshusband Big grins Registered Users Posts: 15 Big grins
    edited October 10, 2013
    Tabs
    Leftquark, have you unveiled your site yet or are you still in LEGACY. If you have, how did you get your tabs under prints
  • leftquarkleftquark Former SmugMug Product Team Registered Users, Retired Mod Posts: 3,780 Many Grins
    edited October 10, 2013
    Leftquark, have you unveiled your site yet or are you still in LEGACY. If you have, how did you get your tabs under prints

    I have unveiled. I posted how to do it here: http://www.dgrin.com/showthread.php?t=241478&highlight=prints+page
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • AllenAllen "tweak 'til it squeaks" St. Louis, MoRegistered Users Posts: 9,970 Major grins
    edited October 14, 2013
    Lightbox
    Do y'all think this is a little too much? Do any of your site visitors even know they can see the caption in lightbox?
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • southeasternphotographysoutheasternphotography Trouper Registered Users Posts: 647 Major grins
    edited October 14, 2013
    Quite frankly, I wonder how many people even know they can click on the larger image to GET to the larger lightbox? When hovering over the larger image, I would rather have the little hand open a box that says "Click for larger image" instead of that info box which simply says what I have under the image already. That has always bothered me. Sometimes I add that to my gallery description and tell them to use the arrow keys to go back and forth in that larger view. Also, in lightbox, how many know to use the paper size icon to change the size. I still need to change the larger lightbox icons and add text to them. Unveiled last week.

    In answer to your question, I do not like the way SM implemented that. Just the little angle bracket. Does not seem intuitive to me. Think their programmer is like my son (Computer Major graduate) who created a website for our non-profit. Had to get him to change things so non-programmers would have a clue - geeks understood it, regular folks didn't. It is terrible when programmers do not understand who the MAIN audience will be. In SmugMug, they need to program for OUR end users while giving us the tools to easily WOW our endusers.

    Guess most folks know what "hover" means these days...or am I trapping my self in my own geek world? I remember Andy thinking a certain icon was known by everyone because Facebook uses it whereby many folks do not use Facebook and would have no idea what the icon meant. Maybe use "Open Caption". Would use same color as filename. Assuming you used red to show it off here.
  • AllenAllen "tweak 'til it squeaks" St. Louis, MoRegistered Users Posts: 9,970 Major grins
    edited October 14, 2013
    Only because Red catches the eye, might change color to something more softer.
    I like "Open Caption", "Read Caption" or "See Caption".
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • southeasternphotographysoutheasternphotography Trouper Registered Users Posts: 647 Major grins
    edited October 14, 2013
    I kinda like "See Caption" 1st, "Read Caption" 2nd, and "Open Caption" 3rd...think you are on the right track! Let me know how you did it so I can add that to mine! THANKS!
  • AllenAllen "tweak 'til it squeaks" St. Louis, MoRegistered Users Posts: 9,970 Major grins
    edited October 14, 2013
    I kinda like "See Caption" 1st, "Read Caption" 2nd, and "Open Caption" 3rd...think you are on the right track! Let me know how you did it so I can add that to mine! THANKS!
    Here's what I ended up with, probably a better way but this worked for me. Had to increase width to
    fit text. Left align so it doesn't run into things on right, problem with very small browser widths though.
    "all galleries" CSS
    .sm-lightbox-info-arrow.sm-fonticon {
       color:red !important;
    }
    
    .sm-lightbox-info-arrow {width: 180px;}
    .sm-lightbox-info-arrow.sm-fonticon:after {
       content:" See Caption";
       color:red;
       font-size: 16pt;
       font-weight:normal !important;
    }
    
    .sm-lightbox-info {
      text-align: left !important;
    }
    
    The last one is not needed, I was just overriding a CSS rule higher up. Gota find and delete that, just lazy.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • leftquarkleftquark Former SmugMug Product Team Registered Users, Retired Mod Posts: 3,780 Many Grins
    edited October 14, 2013
    Allen wrote: »
    Here's what I ended up with, probably a better way but this worked for me. Had to increase width to
    fit text. Left align so it doesn't run into things on right, problem with very small browser widths though.
    "all galleries" CSS
    .sm-lightbox-info-arrow.sm-fonticon {
       color:red !important;
    }
    
    .sm-lightbox-info-arrow {width: 180px;}
    .sm-lightbox-info-arrow.sm-fonticon:after {
       content:" See Caption";
       color:red;
       font-size: 16pt;
       font-weight:normal !important;
    }
    
    .sm-lightbox-info {
      text-align: left !important;
    }
    
    The last one is not needed, I was just overriding a CSS rule higher up. Gota find and delete that, just lazy.

    Thanks. I'll add it to my CSS customization site as soon as I have some free time (and credit you of course)!

    Personally, I think that the lightbox is designed quite well. The lightbox is a way to see the PHOTO as large as possible. It's not meant to have the photo and the caption displayed. That's why there's multiple views that fit the caption and the photo into 1 screen (aka the SM Layout). When a user goes from my SM Layout to my lightbox, I want them to see the IMAGE and only the image. The fact that they can actually read the caption, as it slides out, is a bonus to me.

    I realize that for many of you who use the COLLAGE layouts, this is a bit trickier. There is no-where for the caption to be displayed except in the lightbox. Perhaps SmugMug should implement 2 different lightboxes: one in collage/thumbnail layouts where the caption is on the right hand side (for example), and one in SM/Journal Layout where the lightbox acts like it currently does.
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • leftquarkleftquark Former SmugMug Product Team Registered Users, Retired Mod Posts: 3,780 Many Grins
    edited October 14, 2013
    Quite frankly, I wonder how many people even know they can click on the larger image to GET to the larger lightbox? When hovering over the larger image, I would rather have the little hand open a box that says "Click for larger image" instead of that info box which simply says what I have under the image already. That has always bothered me. Sometimes I add that to my gallery description and tell them to use the arrow keys to go back and forth in that larger view. Also, in lightbox, how many know to use the paper size icon to change the size. I still need to change the larger lightbox icons and add text to them. Unveiled last week.

    Someone posted code to do exactly this, and I describe how to implement it here: http://www.aaronmphotography.com/Customizations/Gallery/Click-to-Enlarge
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • southeasternphotographysoutheasternphotography Trouper Registered Users Posts: 647 Major grins
    edited October 15, 2013
    Allen wrote: »
    Here's what I ended up with, probably a better way but this worked for me. Had to increase width to
    fit text. Left align so it doesn't run into things on right, problem with very small browser widths though.
    "all galleries" CSS
    .sm-lightbox-info-arrow.sm-fonticon {
       color:red !important;
    }
    
    .sm-lightbox-info-arrow {width: 180px;}
    .sm-lightbox-info-arrow.sm-fonticon:after {
       content:" See Caption";
       color:red;
       font-size: 16pt;
       font-weight:normal !important;
    }
    
    .sm-lightbox-info {
      text-align: left !important;
    }
    
    The last one is not needed, I was just overriding a CSS rule higher up. Gota find and delete that, just lazy.

    Thanks! Works great! I actually went a step further and put this in " <---See Caption". Maybe that's too much!:D
  • AllenAllen "tweak 'til it squeaks" St. Louis, MoRegistered Users Posts: 9,970 Major grins
    edited October 15, 2013
    Thanks! Works great! I actually went a step further and put this in " <---See Caption". Maybe that's too much!:D
    The only problem I found is when the browser is narrowed especially if the text is long. It bumps the
    right buttons and does funny things. Have no idea what happens on small screens like an ipad.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • ko04ko04 An Artist at heart Registered Users Posts: 370 Major grins
    edited November 3, 2013
    I browsed through the thread to see if this question was answered but I am having issue's with the right click protection. Currently I have the code that was provided in the form in my CSS for the entire site could someone help me on this issue please. Thank you leftquark for everything you are doing here!
  • leftquarkleftquark Former SmugMug Product Team Registered Users, Retired Mod Posts: 3,780 Many Grins
    edited November 3, 2013
    ko04 wrote: »
    I browsed through the thread to see if this question was answered but I am having issue's with the right click protection. Currently I have the code that was provided in the form in my CSS for the entire site could someone help me on this issue please. Thank you leftquark for everything you are doing here!

    What exactly is your problem?
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • southeasternphotographysoutheasternphotography Trouper Registered Users Posts: 647 Major grins
    edited November 3, 2013
    ko04 wrote: »
    I browsed through the thread to see if this question was answered but I am having issue's with the right click protection. Currently I have the code that was provided in the form in my CSS for the entire site could someone help me on this issue please. Thank you leftquark for everything you are doing here!

    Don't know the problem either. Right-click protection is assigned by a menu item in Organize, then Gallery Settings. Understand Right-Click protection will thwart Goggle Image Search from indexing your images.eek7.gif
  • ko04ko04 An Artist at heart Registered Users Posts: 370 Major grins
    edited November 3, 2013
    leftquark wrote: »
    What exactly is your problem?

    The problem is that when you do a right click on my images no message pop's up
  • southeasternphotographysoutheasternphotography Trouper Registered Users Posts: 647 Major grins
    edited November 3, 2013
    ko04 wrote: »
    The problem is that when you do a right click on my images no message pop's up

    So, no message. Are you able to copy the file with the right click? Or can't copy but no message saying you can't?
Sign In or Register to comment.