Button Updates

AJLemos

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

Hikin' Mike

Thanks for the heads-up. Did you release the revision?

AJLemos

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

leftquark

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

AJLemos

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.

denisegoldberg

@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?

AJLemos

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;
}

AJLemos

The custom CSS example in this article has been updated: https://news.smugmug.com/clarify-with-copy-updating-your-lightbox-view-5375fbe69fff

Here is a gist of the code: https://gist.github.com/AJLemos/eb2f1bd9d2206d10e443bfaf8ea688b9

denisegoldberg

@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_S85

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.

leftquark

@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

David_S85

@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!

Allen

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.

leftquark

@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;
    }

denisegoldberg

@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).

AJLemos

@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;
}

AJLemos

@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.

denisegoldberg

@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!

Allen

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.

AJLemos

@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
}

Allen

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
}

Allen

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.

rht

@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.

James Lyall

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.

AJLemos

@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;
}

2. 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 Lyall

@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.

AJLemos

@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 Lyall

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

Allen

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
}

denisegoldberg

@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.

Allen

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.