Bug or something about my customization for "Download" next to download button or something conflict

mrhonimrhoni Registered Users Posts: 173 Major grins
edited November 24, 2018 in SmugMug Customization

I haven't had to create this kind of gallery web page for a while so I don't recall if this issue has been there in the past or something new.
If a photo is clicked it goes to the lightbox. In the bottom left of the photo should see "Download", but its truncated.

Here's a link to the web page I'm working on
https://www.mrhoni-photography.com/Portfolio/Special-Events/Hair-of-the-Dog-2019/

This is some CSS on this page that I've used in the past to get the word Download next to the icon.

Comments

  • denisegoldbergdenisegoldberg Administrators Posts: 14,220 moderator
    edited November 24, 2018

    I just checked my site and my code is a little different:

    .sm-button.sm-button-image-download:after {
    margin-left: 4px;
    display:inline-block;
    content: "Download"
    }

    The word isn't truncated. You can see it on this page - https://www.denisegoldberg.com/On-paws-and-wings/Baxter-Gracie/i-pR7mK5c/A.

    I just looked at your page and the word isn't truncated there either - but it does appear to be sitting almost on top of the sizes icon.

  • mrhonimrhoni Registered Users Posts: 173 Major grins

    Thanks. I see yours looks good. I used the code you have shown with no change. You're right, its not truncated, but its as if the space it wants to reside only has so much room. I assume that something I have set is conflicting. I'm stumped. I played with the Lightbox settings for this page and didn't resolve.

    BTW: How do I place CSS code in the post so that it appears readable?

  • Lille UlvenLille Ulven Registered Users Posts: 567 Major grins

    In the formatting line above the text box you are typing your post in, you see something looking like a vertically mirrored P followed by an I. Mark the text you want to show as code then click that symbol and chose Code (fourth option from the text). Et voila your code is presented in a readable form once you post your comment. :)

    Good luck.

    https://www.lilleulven.smugmug.com - The Photos of my travels
  • mrhonimrhoni Registered Users Posts: 173 Major grins

    Trying your suggestion Lille

    /* Add the word "Download" after the download button */
    .sm-button.sm-button-image-download:after {
      margin-left: 4px;
      display:inline-block;
      content: " Download"
    }
    
  • Lille UlvenLille Ulven Registered Users Posts: 567 Major grins
    edited November 26, 2018

    And now for a second suggestion :smile:
    try adding this little bit of code to your theme's CSS to make the download-button area a little larger:

    .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome.sm-button-image-download.sm-button-square {
        width: 20%;
    }
    
    https://www.lilleulven.smugmug.com - The Photos of my travels
  • mrhonimrhoni Registered Users Posts: 173 Major grins

    Thanks for the suggestion but that made things worse. The lightbox didn't really improve and the gallery got worse.

    Here's what the gallery looks like with that change.

    Here's what the gallery looks like after removing the change

Sign In or Register to comment.