Button Updates

AJLemosAJLemos Registered Users Posts: 13 SmugMug Employee
edited January 10, 2018 in SmugMug Product News

Hello customizers!

Heads up, we are releasing a design revision to all buttons on SmugMug. We are making this update to improve usability, visibility, design aesthetics, and consistency of the buttons on SmugMug in an effort to keep SmugMug designs modern and elegant.

Button changes on user sites should only affect typography and slight button size adjustments, both of which will improve usability and appearance. We don’t expect there to be any noticeable impact to your customizations, but if you have custom CSS applied to your buttons you'll want to review them after the release and adjust accordingly.

AJ

«1

Comments

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
  • AJLemosAJLemos Registered Users Posts: 13 SmugMug Employee

    Not yet but soon. I'll post here when it is live.

  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins

    I'll also be monitoring this thread in case people have questions.

    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
  • AJLemosAJLemos Registered Users Posts: 13 SmugMug Employee
    edited January 11, 2018

    The button update is live.

    The only issue with custom CSS that we have identified is the lightbox button labels as seen in these tutorials: https://news.smugmug.com/clarify-with-copy-updating-your-lightbox-view-5375fbe69fff and http://www.aaronmphotography.com/Customizations/Gallery/Add-Icon-Labels

    We will update those as soon as possible and let you know.

  • denisegoldbergdenisegoldberg Administrators Posts: 14,220 moderator
    edited January 12, 2018

    @AJLemos said:

    The only issue with custom CSS that we have identified is the lightbox button labels as seen in these tutorials: ...

    Is this the cause of the buy button (with text) overlapping the slideshow button, and the overlaps of the "buttons" in lightbox?

    What do you plan to update, the instructions / CSS for adding text, or something else?

  • AJLemosAJLemos Registered Users Posts: 13 SmugMug Employee
    edited January 12, 2018

    Hi @denisegoldberg,

    I'm not aware of the buy button text overlapping the slideshow button. Can you provide an example?

    For the custom lightbox text labels as seen here: https://news.smugmug.com/clarify-with-copy-updating-your-lightbox-view-5375fbe69fff you need to add a few more CSS rules:

    /*Allow lightbox icon buttons to expand to our custom content width*/
    .sm-user-ui .sm-lightbox .sm-lightbox-panel .sm-lightbox-tools .sm-lightbox-icons .sm-button {
        width: auto;
    }
    
    /*Give the icons some space between them and our custom text*/
    .sm-user-ui .sm-lightbox .sm-lightbox-panel .sm-lightbox-tools .sm-lightbox-icons .sm-button .sm-icon,
    .sm-user-ui .sm-lightbox .sm-lightbox-panel .sm-lightbox-tools .sm-lightbox-icons .sm-button .sm-fonticon {
        margin-right: 6px;
    }
    
  • AJLemosAJLemos Registered Users Posts: 13 SmugMug Employee
  • denisegoldbergdenisegoldberg Administrators Posts: 14,220 moderator
    edited January 12, 2018

    @AJLemos said:
    Hi @denisegoldberg,
    I'm not aware of the buy button text overlapping the slideshow button. Can you provide an example?

    Thanks for the code to correct the buttons in lightbox, looks good.

    I have both a slideshow and a buy button on my galleries. With today's update, the text for the slideshow button slides beneath the buy button. In addition, the triangle (icon) for the slideshow is missing in Chrome and Firefox although it shows in Edge.

    Here's an example using this collage landscape gallery on my site - http://www.denisegoldberg.com/Wandering-near-home/Winter-2018/.

    Here's an example using a journal-style gallery - http://www.denisegoldberg.com/Fragments/Top-photos-2017/. In this case you can see the word "slideshow" overlapping with a square gray box.

    The screen shots are from Chrome, note the missing (triangle) slideshow icon.

  • David_S85David_S85 Administrators Posts: 13,167 moderator
    edited January 12, 2018

    Is there a fix for the Image Close "X," with text "Close?"

    The text next to my buttons is messed up, like everyone else using the previous CSS. I will use the new code listed above to fix the button texts at the bottom of Lightbox views.

    My Smugmug
    "You miss 100% of the shots you don't take" - Wayne Gretzky
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins

    @David_S85 said:
    Is there a fix for the Image Close "X," with text "Close?"

    The text next to my buttons is messed up, like everyone else using the previous CSS. I will use the new code listed above to fix the button texts at the bottom of Lightbox views.

    When I can find some time, I'll update my code/customization for the close button as well. It's impacting my site so I need to get it fixed :)

    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
  • David_S85David_S85 Administrators Posts: 13,167 moderator

    @leftquark said:
    When I can find some time, I'll update my code/customization for the close button as well. It's impacting my site so I need to get it fixed :)

    Thanks!

    My Smugmug
    "You miss 100% of the shots you don't take" - Wayne Gretzky
  • AllenAllen Registered Users Posts: 10,007 Major grins
    edited January 12, 2018

    After a few hours of intense work I almost have my lightbox close and buy buttons back to the way I had it.

    Close button: I need to better size the box and get the text larger. Plus the hover color is messed up.
    Should be white for text and on hover #d3d4d4

    Buy button: all good except I'd like to remove the large R/L padding and make text slightly larger.

    BTW, when I size the lightbox photo larger and get a bottom scroll bar. When I hover the mouse over the
    right side of the scroll bar the whole icon field vibrates. Firefox Win7. This has been happening for quite
    a while.

    Al - Just a volunteer here having fun
    My Website index | My Blog
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins

    @David_S85 said:
    Is there a fix for the Image Close "X," with text "Close?"

    The text next to my buttons is messed up, like everyone else using the previous CSS. I will use the new code listed above to fix the button texts at the bottom of Lightbox views.

    I tweaked the old code by adding 5 px of padding-left to the close text, and then moved the close button 20 pixels to the left so it wouldn't be off the screen:

        /* Lightbox: Add the word "Close" next to the X  */
        .sm-user-ui .sm-lightbox-tools .sm-lightbox-close:after {
          content: ' Close';
          font-size: 18px;
          padding-left: 5px;
          top: -1px;
          position: relative;
        }
    
        /* Move the close button to the left so the word "Close" will fit */
        .sm-user-ui .sm-lightbox-tools .sm-lightbox-close {
            left: -20px;
            position: relative;
        }
    
    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
  • denisegoldbergdenisegoldberg Administrators Posts: 14,220 moderator
    edited January 12, 2018

    @denisegoldberg said:
    I have both a slideshow and a buy button on my galleries. With today's update, the text for the slideshow button slides beneath the buy button. In addition, the triangle (icon) for the slideshow is missing in Chrome and Firefox although it shows in Edge.

    I understand the changes needed to move the slideshow button and text, but I've removed the "slideshow" text for now. With the width of the word plus the width of the buy button I think I like the narrower look (without the word).

  • AJLemosAJLemos Registered Users Posts: 13 SmugMug Employee

    @denisegoldberg The fix for adding custom text to your slide show button is to set width: auto which will allow our fixed "square" buttons to adapt to extra content.

    /* Custom label on the slideshow icon button */
    .sm-user-ui .sm-gallery-cover[data-show-image=true] .sm-button.sm-gallery-cover-slideshow-button:after {
        content: 'Slideshow';
    }
    
    /* Allow the slideshow icon button to adapt to content width */
    .sm-user-ui .sm-gallery-cover[data-show-image=true] .sm-button.sm-gallery-cover-slideshow-button {
        width: auto;
    }
    
  • AJLemosAJLemos Registered Users Posts: 13 SmugMug Employee

    @Allen

    You can reduce the left & right padding on your gallery cover buy buttons like this

    .sm-user-ui .sm-gallery-cover-buy-button {
        padding: 0 12px;
    }
    

    A similar fix can be done for other buy buttons.

    I'm not sure what the color issue you are having is without a link or more of an example. Thanks.

  • denisegoldbergdenisegoldberg Administrators Posts: 14,220 moderator

    @AJLemos said:
    @denisegoldberg The fix for adding custom text to your slide show button is to set width: auto which will allow our fixed "square" buttons to adapt to extra content.

    Thank you!

  • AllenAllen Registered Users Posts: 10,007 Major grins
    edited January 12, 2018

    It was only the buy button in the lightbox that wouldn't cooperate. Got it solved now.
    I can not get the "return to gallery"/close button to cooperate. Button Size, text size and hover color problem.
    http://www.photosbyat.com/Birds/2017-Birding/Birding-2017-December/2017-12-20-Riverlands-Migratory-Bird-Sanctuary/i-j7Pgg4H/A
    Thanks

    Edit: the tool buttons use to hover color change also, missing now.

    @AJLemos said:
    @Allen

    You can reduce the left & right padding on your gallery cover buy buttons like this

    .sm-user-ui .sm-gallery-cover-buy-button {
        padding: 0 12px;
    }
    

    A similar fix can be done for other buy buttons.

    I'm not sure what the color issue you are having is without a link or more of an example. Thanks.

    Al - Just a volunteer here having fun
    My Website index | My Blog
  • AJLemosAJLemos Registered Users Posts: 13 SmugMug Employee

    @Allen You need to add a bit more specificity to your custom rues

    .sm-user-ui .sm-lightbox .sm-lightbox-tools .sm-button.sm-lightbox-close {
        ...styles
    }
    
  • AllenAllen Registered Users Posts: 10,007 Major grins

    That did it! Thanks

    @AJLemos said:
    @Allen You need to add a bit more specificity to your custom rues

    .sm-user-ui .sm-lightbox .sm-lightbox-tools .sm-button.sm-lightbox-close {
        ...styles
    }
    
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • AllenAllen Registered Users Posts: 10,007 Major grins

    Now can you greatly reduce that 5 sec delay for hiding the tools overlay?
    Almost every site I go to hides their overlay quickly so there's no excuse for these ridiculous delays.

    Al - Just a volunteer here having fun
    My Website index | My Blog
  • rhtrht Registered Users Posts: 30 Big grins

    @AJLemos said:
    @Allen

    You can reduce the left & right padding on your gallery cover buy buttons like this

    .sm-user-ui .sm-gallery-cover-buy-button {
        padding: 0 12px;
    }
    

    A similar fix can be done for other buy buttons.

    I'm not sure what the color issue you are having is without a link or more of an example. Thanks.

    Thanks - this caused me to do some rushed adjustments to try and accommodate the changes with the buy button on the journal gallery style. It works well enough now so I'll just leave it as is.

    w: Reheat Images
    Torn between cycling and photography!
  • James LyallJames Lyall Registered Users Posts: 202 Major grins

    Since the button update, despite spending several hours with CSS, I cannot restore the display to my original.
    I have two problems:
    1. Whilst "Slideshow" displays in the correct position, "Download all", to its right, will not display on a single line. In addition, I previously had the same font size for the button captions both above and below the lightbox.
    2. "Full Screen" and "Close" are now superimposed. I have been unable correct this, despite much experimentation.
    I should be most grateful to have help with sorting this out.
    Thank you.

  • AJLemosAJLemos Registered Users Posts: 13 SmugMug Employee
    edited January 15, 2018

    @James Lyall

    1. You need to add the same width: auto fix for the download button as the slideshow button
    .sm-user-ui .sm-button.sm-gallery-cover-download-button {
        width: auto;
    }
    

    You'll also want to increase the padding on the gallery info container to make sure it doesn't collide with the extra width your labels give the icon buttons.

    .sm-user-ui .sm-gallery-cover[data-show-download=true][data-show-slideshow=true] .sm-gallery-cover-info {
        padding-right: 260px;
    }
    

    And drop the font weight on your custom labels:

    .sm-button.sm-gallery-cover-slideshow-button:after {
        content: 'Slideshow';
        font-size: 12px;
        font-weight: 300;
        text-transform: none;
    }
    
    
    1. Close button with custom text in your lightbox needs the same width fix:
    .sm-user-ui .sm-lightbox-tools .sm-lightbox-close {
        width: auto;
    }
    

    I don't see any full screen button in your lightbox. Please let me know where I can see this.

  • James LyallJames Lyall Registered Users Posts: 202 Major grins

    @AJLemos
    Thank you very much for your prompt expert advice which has solved most of my problems.
    The full screen button should now be visible, but I cannot fix its width.
    There must be a simple solution which I am missing.

    Finally, I have forgotten how to include code in a posting and cannot find instructions on this site; could you remind me?

    Many thanks.

  • AJLemosAJLemos Registered Users Posts: 13 SmugMug Employee

    @James Lyall

    Looks like the full screen button is caused by some of your custom CSS on the close button:

    .sm-user-ui .sm-lightbox-tools .sm-lightbox-close {
        left: -20px;
        position: relative;
    }
    

    It can simply be removed to fix the issue or if you would like both buttons adjusted to the left do this:

    .sm-user-ui .sm-lightbox-tools .sm-lightbox-close,
    .sm-user-ui .sm-lightbox-tools .sm-lightbox-expand {
        left: -20px;
        position: relative;
    }
    

    You can post code examples by using "back ticks". Wrap code in one back tick ( ` ) for inline code and three ( ``` ) for code blocks.

  • James LyallJames Lyall Registered Users Posts: 202 Major grins

    @AJLemos
    Brilliant! You make it all look so easy. I am most grateful to you for your prompt help.

  • AllenAllen Registered Users Posts: 10,007 Major grins
    edited January 26, 2018

    Ever since this change my right lightbox nav arrow has been missing. I finally found what I think is the problem.
    The first rule below is causing it. I added the second rule and now have that nav arrow back.
    Can anyony double check this? Thanks

    .sm-button-size-large.sm-button-square {
     min-width:120px!important;
     font-size:18px!important
    }
    
    .sm-lightbox-nav-right .sm-button-size-large.sm-button-square {
     min-width:20px!important;
     font-size:18px!important
    }
    
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • denisegoldbergdenisegoldberg Administrators Posts: 14,220 moderator

    @Allen said:
    Ever since this change my right lightbox nav arrow has been missing. I finally found what I think is the problem.
    The first rule below is causing it. I added the second rule and now have that nav arrow back.
    Can anyony double check this? Thanks

    I just looked at this gallery - http://www.photosbyat.com/Birds/2018-Birding/Birding-2018-January/2018-01-January-Yardbirds/i-WnzJsWf.

    The lightbox shows an arrow on the left but not on the right. Even though there isn't a visible arrow on the right I can click on the invisible arrow to go to the next photo.

  • AllenAllen Registered Users Posts: 10,007 Major grins
    edited January 27, 2018

    Also just noticed that. Guess forgot to save! Done now.

    Next is getting both R & L at same side margin.

    @denisegoldberg said:

    @Allen said:
    Ever since this change my right lightbox nav arrow has been missing. I finally found what I think is the problem.
    The first rule below is causing it. I added the second rule and now have that nav arrow back.
    Can anyony double check this? Thanks

    I just looked at this gallery - http://www.photosbyat.com/Birds/2018-Birding/Birding-2018-January/2018-01-January-Yardbirds/i-WnzJsWf.

    The lightbox shows an arrow on the left but not on the right. Even though there isn't a visible arrow on the right I can click on the invisible arrow to go to the next photo.

    Al - Just a volunteer here having fun
    My Website index | My Blog
Sign In or Register to comment.