Journal Style Add To Cart

jlegan

Has anyone successfully added a custom button for the add to cart menu in the journal style? All examples use buymenu as the CSS tag, but journal uses buy-icon and as much as I have tried I cannot get it to take.

Here is a gallery: http://www.jameslegan.com/People/Kids-On-Bikes

The green box in the bottom right hand corner of each pic is as far as I have gotten it to work (removed the "Add To Cart" text from the box but my image is still not appearing and the box is still there. Here is my CSS:

/* Add To Cart */
.sm-user-ui .sm-gallery .sm-gallery-buy-icon .sm-button {
background-color: transparent;
border: none;
background-image: url(http://www.jameslegan.com/photos/i-V5n8FcB/0/X3/i-V5n8FcB-X3.png);
background-repeat: no-repeat;
background-position: center;
background-size: 137px 37px;
width: 137px;
height: 37px;
}

.sm-gallery .sm-gallery-buy-icon .sm-button-label,
.sm-gallery .sm-gallery-buy-icon .sm-fonticon {
display: none;
}

Thanks in advance,

Jim

jlegan

Bumping this before it goes to the second page...

jlegan

SmugMug support team asked me via email to bump my thread (don't worry, the irony is not lost on me).

jlegan

Made some progress. I now have the button appearing but it is offset by one or two pixels down from the other buttons. Any thoughts?

Thanks,

Jim

jlegan

Bump again...

dallasw

I see a custom buy button on the page you linked for Chrome and IE 10. Is there a specific browser that isn't working?

jlegan

dallasw wrote: »

I see a custom buy button on the page you linked for Chrome and IE 10. Is there a specific browser that isn't working?

I finally got the button working (around post #4) but if you look closely, it is offset (appears to be a top margin in possible sm-accent) by 1 or 2 px. See attachement.

dallasw

The 'Add to Cart' button doesn't have the 'sm-button-nochrome' CSS class, because it has a border. To make it the same height, you can add a padding-top and padding-bottom of 7px. Your CSS would change to:

.sm-user-ui .sm-gallery .sm-gallery-buy-icon {
    padding-bottom: 7px;
    padding-top: 7px;
    background-color: transparent;
    border: 0;
    background-image: url(http://www.jameslegan.com/photos/i-QPnrPcJ/0/X3/i-QPnrPcJ-O.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 62px 35px;
    width: 62px;
    height: 35px;
}

jlegan

Dalls,

Thank you, it is getting much closer.

Padding by 8px in Chrome and Safari still offset the button by what looks like 1/2 of a pixel.

I kept tweaking it and at 7.75px top padding, Chrome is happy however Safari is not (still looks slightly off), that is until you zoom your browser in at which time it is happy.

Do we know why the no-chrome is not being applied to all of the buttons in journal style? I would argue this is a small bug with a likely relatively quick fix that is going to bite anyone else going forward with journal and wanting custom buttons.

For the time being I am going opaque the container that holds the buttons to hide the issue until it can be resolved.

Thanks again,

Jim

dallasw

jlegan wrote: »

Padding by 8px in Chrome and Safari still offset the button by what looks like 1/2 of a pixel.

You're right. The padding wasn't needed. Sorry about that.

If you apply "vertical-align: top" to the buttons, the alignment issue will go away. Tested in Chrome, Safari, Firefox, and IE 10.

.sm-gallery-journal .sm-tile-info .sm-gallery-image-bar .sm-button {
    vertical-align: top;
}

Do we know why the no-chrome is not being applied to all of the buttons in journal style?

The 'Add to Cart' button has a 1px border by default. Applying no-chrome would make it not have a border.