Modify CSS to Eliminate Display of "Buy Photo" Button When Logged In to Own Smugmug Site

mike80mike80 SacramentoPosts: 5Registered Users Big grins
I use Smugmug to view my own photos and to share photos with family and friends. I am not a professional photographer and I do not sell photos through Smugmug. When logged into my own Smugmug site, a rather large “Buy Photo” button appears when viewing photos full screen. This obscures the photos and degrades my experience using Smugmug. Smugmug provides an option to eliminate the button when others view my site but there is no option to eliminate the button when I view my own site. I understand that it is possible to eliminate the button by making a CSS modification. I do not know how to make CSS modifications. Can you please provide step-by-step instructions on how to make the modification?

Comments

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,478Registered Users Major grins
    edited September 18, 2019

    Add this to your theme's site-wide custom CSS section:

    .sm-user-ui .gallery-cover-buy-button,
    .sm-user-ui .sm-button[data-elem-id="lightbox_imagebuy_button"] {display: none;}
    

    If you don't know how read this: https://gallery.imagesinthebackcountry.com/Smugmug-customization/Adding-CSS-to-your-SmugMug-Website

  • mike80mike80 SacramentoPosts: 5Registered Users Big grins
    Thanks to Hikin' Mike. Following the instructions on the link provided to add the code, I was able to get rid of the "Buy Photo" button. Honestly it is outrageous for SmugMug to make it so difficult to remove the enormous "Buy Photo" button that obscures photos when viewed full screen. I would now appreciate CSS code to remove the offensive "VIEW DETAILS" button on the left side of the screen. I'd like to be able to view my photos without obscuration. I think you in advance if you are able to provide the required CSS code. Also, please let me know if the code can simply be added below the 2 lines that were required to get rid of the "Buy Photo" button.
  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,478Registered Users Major grins

    @mike80 said:
    Honestly it is outrageous for SmugMug to make it so difficult to remove the enormous "Buy Photo" button that obscures photos when viewed full screen.

    Honestly, you are probably the ONLY person to want to remove those buttons while your logged in.

    @mike80 said:
    I would now appreciate CSS code to remove the offensive "VIEW DETAILS" button on the left side of the screen. I'd like to be able to view my photos without obscuration. I think you in advance if you are able to provide the required CSS code. Also, please let me know if the code can simply be added below the 2 lines that were required to get rid of the "Buy Photo" button.

    Yes, just add .sm-user-ui .sm-button[data-elem-id="lightbox_details_button"] to your existing CSS:

    .sm-user-ui .gallery-cover-buy-button,
    .sm-user-ui .sm-button[data-elem-id="lightbox_details_button"],
    .sm-user-ui .sm-button[data-elem-id="lightbox_imagebuy_button"] {display: none;}
    
  • mike80mike80 SacramentoPosts: 5Registered Users Big grins
    Thank you for the additional code. Unfortunately, neither the original code or the new code, when added to the CSS, seems to work. "VIEW DETAILS" and "BUY PHOTO" buttons appear, obscuring the bottom portion of photos that are viewed in large size in the galleries on my site when I am logged in. When I am not logged in, "VIEW DETAILS" appears but not "BUY PHOTO.." What am I doing wrong? After entering the CSS exactly as shown above according to the instructions at the link you provided, I am not able to get rid of the buttons. After clicking Done, Done, and Done, I clicked Publish Immediately.
  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,478Registered Users Major grins
  • mike80mike80 SacramentoPosts: 5Registered Users Big grins

    My website is not public. It is for my own use. I am happy to share it with you privately.

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,478Registered Users Major grins
  • mike80mike80 SacramentoPosts: 5Registered Users Big grins

    Dear Hikin' Mike, Well, I learned from SmugMug Support Hero Bea that custom CSS doesn't work for galleries where "Hide Owner" is enabled. My galleries had "Hide Owner" enabled but I have now set all my galleries back to Hide Owner Off. The custom CSS you provide seems to do the job of getting rid of the BUY PHOTO buttons on all galleries. Thanks for that; it is a really huge deal for me! However, it does not get rid of the hamburger/VIEW DETAILS in the left bottom corner of the photo. Can you please check the 3 lines of CSS that you provided above? Is there a way of fixing the CSS so that it does eliminate VIEW DETAILS. Even better, how about moving VIEW DETAILS from smack on top of my photo to an unobtrusive spot in the upper left corner of the screen underneath the wrench (lowest icon in a menu outside the left border of the photo). One final request: if a title is entered, it appears on top of the photo in the lower left corner instead of the words VIEW DETAILS. It would be great if this text appeared briefly when the photo was displayed but then turned off but could be turned back on by a mouse over.

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,478Registered Users Major grins
    edited October 4, 2019

    Without seeing your site I can't help.

    FWIW, I just added that to my site (temporary) and it works. It removes the "Buy Photo" button and removes the View Details Button in the left menu as you asked.

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,478Registered Users Major grins

    If you are talking about the Title and Captions above the photo, then this will remove it:

    .sm-user-ui .sm-button[data-elem-id="lightbox_image_title"] {display: none;}

Sign In or Register to comment.