Buy Button Customization within Lightbox

IanHowerton

Hello I am trying to customize the Lightbox "buy photo" button on my homepage to look like the "buy photo" button within my galleries. In the galleries there is an easy Lightbox option to change it to icon button (small box with just the cart and no text) and I would like to do that for the Lightbox on the home page. I am using the multiple photos block here, however in the Lightbox it shows a large "buy photo" button with the cart and text.

I was also wondering on both of these light boxes if it was possible to reduce the opacity of the button so it is not as bold and distracting from the image.

Thanks so much!

my portfolio site is https://www.ianhowerton.com

Hikin' Mike

I don't understand. What "buy photo" button on your home page. I'm not seeing any button there.

IanHowerton

It’s part of the Lightbox. Once you select an image, from my homepage, it opens a Lightbox feature. The “buy photo” button is shown there over the image and has a shopping cart and the text buy photo. I would like to remove the text and simply show a shopping cart as well as make the button smaller.

Hikin' Mike

There is no separate Lightbox between your home page and galleries. It's the same thing lightbox. You have already changed the opacity button by 75% in Lightbox and if you don't want the text, select the icon only.

Jtring

This thread has been quiet for a few days, but let me add a few notes. First of all, you (Ian) are right that, for the lightbox accessed by a multiple photo block, there is no control panel and thus no buy button style switch where you can select "icon only". I didn't know that until I started looking into this thread. I'm not that surprised, though: Smugmug has a collection of odd little inconsistencies like this running around. In any case, you can use CSS to change the buy button in ways that might help. You've already found one. You've changed the opacity. You can also use CSS to replicate the "icon button" option available in the gallery lighbox. The following CSS does that. It hides the button text and lets the button resize to just fit the icon and be square. I've tossed in an opacity change, here targeted just at the buy button. Remove that line if you wish. Put this in the CSS section of your theme to make it apply everywhere. Put this in a CSS block on your home page to make it only apply there.

/* This hides the lightbox buy button text*/
.sm-lightbox-v2-photo-buttons .sm-button[data-elem-id="lightbox_imagebuy_button"] span {
    display:none;
}
/* This resizes the lightbox buy button to just fit the icon. The opacity change is optional.*/
.sm-lightbox-v2-photo-buttons .sm-button[data-elem-id="lightbox_imagebuy_button"] {
    min-width:initial;
    padding: 0 14px;
    opacity: 75%;
}

Another option is just to totally hide the button. This CSS does that. Placement is as above.

/* This hides the lightbox buy button*/
.sm-lightbox-v2-photo-buttons .sm-button[data-elem-id="lightbox_imagebuy_button"]  {
  display:none;
}