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

mike80

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?

Hikin' Mike

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

mike80

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' Mike

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

mike80

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' Mike

Please post your website.

mike80

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

Hikin' Mike

That's fine.

mike80

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' Mike

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' Mike

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

Crowntree

Hi - I'm trying to do the same thing. I followed your advice Mike (thank you) and tried to put in the code to the existing CSS then pressed 'done' but the next 'done' that appears on 'create theme' won't click and a red line appears so I'm unable to apply the changes. Any idea what the problem might be?
My website is www.clarerowntree.com Thanks

Hikin' Mike

@Crowntree said:
Hi - I'm trying to do the same thing. I followed your advice Mike (thank you) and tried to put in the code to the existing CSS then pressed 'done' but the next 'done' that appears on 'create theme' won't click and a red line appears so I'm unable to apply the changes. Any idea what the problem might be?
My website is www.clarerowntree.com Thanks

No idea. I don't own a crystal ball (I don't have access to see "under the hood of your site), but the Help Desk does. I suggest contact them.

The Mechanic

@mike80 said:
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?

You can use this code to remove all the buy buttons:
https://smugocity.com/customization-toolbox/smugmug-core-elements/remove-buy-buttons-logged-in/

@mike80 said:
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.

You can use this code to remove the view detail button and icon that show when an image doesn't have a title or caption:
https://smugocity.com/customization-toolbox/smugmug-lightbox-v2/remove-view-details/

@Crowntree You can add these css changes to your entire site area as these are pretty global changes typically. You do not need to add this into the theme. I think the red line error with the theme is the theme missing a new name to save it.

I hope this will help both of you out!
-The Mechanic