Options

"Lightbox Exit Button - No X"

brandofamilybrandofamily Registered Users Posts: 2,013 Major grins
edited October 15, 2013 in SmugMug Customization
I added the "Lightbox Exit Button - No X" code to my site... example below. I also tweaked it to change the full screen icon to text. My question is how do I make those "buttons" smaller... less padding? I cannot figure out where in the code the padding is set.

http://www.brandolinoimaging.com/Image-Galleries/European-Tours/European-Tour-2008/Oberammergau-Germany-Wood/i-4dzn4Zw/A

I figured out how to adjust the height of the button, but the text is off center (top to bottom) if I lessen the height....

Comments

  • Options
    leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited October 15, 2013
    brandofamily wrote: »
    I added the "Lightbox Exit Button - No X" code to my site... example below. I also tweaked it to change the full screen icon to text. My question is how do I make those "buttons" smaller... less padding? I cannot figure out where in the code the padding is set.

    http://www.brandolinoimaging.com/Image-Galleries/European-Tours/European-Tour-2008/Oberammergau-Germany-Wood/i-4dzn4Zw/A

    I figured out how to adjust the height of the button, but the text is off center (top to bottom) if I lessen the height....

    The height of the button is controlled here: 
    .sm-button-size-large.sm-button-nochrome {
  line-height: 80px;
}

    I couldn't figure out the padding either but I did shrink the height to 20 and it stayed centered. It may appear not centered because the "y" in "Gallery" hangs down, but that's how the font works. Everything else is centered. If you moved the text up a couple pixels it would look off-center. Looks centered to me when I use the above code and change 80px to 20px.
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • Options
    brandofamilybrandofamily Registered Users Posts: 2,013 Major grins
    edited October 15, 2013
    leftquark wrote: »
    The height of the button is controlled here: 
    .sm-button-size-large.sm-button-nochrome {
  line-height: 80px;
}
    I couldn't figure out the padding either but I did shrink the height to 20 and it stayed centered. It may appear not centered because the "y" in "Gallery" hangs down, but that's how the font works. Everything else is centered. If you moved the text up a couple pixels it would look off-center. Looks centered to me when I use the above code and change 80px to 20px.

    any idea if that code effects other buttons also? Sometimes I break one thing by fixing another.
  • Options
    leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited October 15, 2013
    brandofamily wrote: »
    any idea if that code effects other buttons also? Sometimes I break one thing by fixing another.

    You could make it more specific just to be sure:
    .sm-user-ui .sm-user-overlay-container .sm-lightbox-tools .sm-button-size-large.sm-button-nochrome {
  line-height: 80px;
}
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • Options
    brandofamilybrandofamily Registered Users Posts: 2,013 Major grins
    edited October 15, 2013
    leftquark wrote: »
    You could make it more specific just to be sure:
    .sm-user-ui .sm-user-overlay-container .sm-lightbox-tools .sm-button-size-large.sm-button-nochrome {
  line-height: 80px;
}

    Thank you. With this new class system on NEW SM I still have not figured out how to be specific w/ the code the way I could in old SM.
Sign In or Register to comment.