How to get rid of "View Photo Details" overlay on photos in Lightbox?

npudarnpudar Big grinsPosts: 39Registered Users Big grins
edited August 16, 2019 in SmugMug Customization

I believe I have searched through all of the options in Settings, and have looked through the Customizations. I can't seem to find any way to get rid of the "View Photo Details" photo overlay in the Lightbox. It is in the lower left corner of all my Lightbox photos as shown in the image. Any recommendations?
(I want to keep the View Photo Details button in the toolbar menu -- I just don't want the overlay text to always be on the photos in the lower left corner.)
Thanks,
Nick

Comments

  • RichardRichard Mildly bemused Madrid, SpainPosts: 18,988Administrators, Vanilla Admin moderator

    +1

  • RonvanderPlasRonvanderPlas NederlandsPosts: 15Registered Users Big grins

    +1 Count me in.
    The overlay is not necessary because the hamburger menu icon gives the same result. If there's a title it's ok but otherwise just hide it to get a 'clean' picture.

  • Lille UlvenLille Ulven Lille Ulven ScandinaviaPosts: 525Registered Users Major grins

    This should get rid of the "display details" button and text over your photo, but leaves the button in the sidebar

    .sm-button.sm-button-nochrome.sm-button-size-large.sm-button-skin-none.sm-lightbox-v2-photo-title.sm-lightbox-v2-hide-landscape.sm-flex-justify-start {
        display: none;
    }
    
    http://www.lilleulven.com - The Photos of my travels
    http://blog.lilleulven.com - The Stories of my travels
  • RichardRichard Mildly bemused Madrid, SpainPosts: 18,988Administrators, Vanilla Admin moderator

    Thanks Lille--worked perfectly.

  • Lille UlvenLille Ulven Lille Ulven ScandinaviaPosts: 525Registered Users Major grins

    You are welcome, @Richard :)

    http://www.lilleulven.com - The Photos of my travels
    http://blog.lilleulven.com - The Stories of my travels
  • npudarnpudar Big grins Posts: 39Registered Users Big grins

    @Lille Ulven said:
    This should get rid of the "display details" button and text over your photo, but leaves the button in the sidebar

    .sm-button.sm-button-nochrome.sm-button-size-large.sm-button-skin-none.sm-lightbox-v2-photo-title.sm-lightbox-v2-hide-landscape.sm-flex-justify-start {
      display: none;
    }
    

    @Lille Ulven Fantastic! Thank you so much!
    Nick

  • AllenAllen "tweak 'til it squeaks" St. Louis, MoPosts: 9,700Registered Users Major grins
    edited August 17, 2019

    Thanks, immediately added.
    Instead of hiding, if we could change it to photo position in gallery, xx / xxx, it would be great.

    Al - Just a volunteer here having fun
    My Website | My Blog
  • npudarnpudar Big grins Posts: 39Registered Users Big grins
    edited August 17, 2019

    @Lille Ulven I just implemented the code, and it removes the text from the bottom -- but it did not retain the button in the sidebar. I'm wondering if others are experience the same result?
    Thanks,
    Nick

  • James LyallJames Lyall Major grins Oxford, UK.Posts: 198Registered Users Major grins

    Thank you, a great improvement.
    What about a MAP button in the lightbox for geotagged photographs?

  • RichardRichard Mildly bemused Madrid, SpainPosts: 18,988Administrators, Vanilla Admin moderator

    @npudar : The sidebar button was not affected by the change in Chrome and Firefox. Dunno.

  • Lille UlvenLille Ulven Lille Ulven ScandinaviaPosts: 525Registered Users Major grins

    @npudar could you give me a link to your website, so I can have a look, why the button vanishes in your sidebar as well?

    @James Lyall thank you :) - @leftquark said the map would come back potentially early next week if I remember correctly, I suspect that will also give you a map button in the lightbox.

    @Allen, I don't quite understand what you mean by "if we could change it to photo position in gallery, xx / xxx, it would be great." - there is a code from @leftquark somewhere to move it below the photo:

    8. Render title and buy button below image on desktop
    & tablet landscape viewports.
    
    @media screen and (min-width: 961px) {
        .sm-user-ui .sm-lightbox-v2-content {
            height: calc(100% - 72px);
        }
    
        .sm-user-ui .sm-lightbox-v2-photo-buttons {
            padding: 0;
            bottom: -60px;
        }
    
        .sm-user-ui .sm-lightbox-v2-photo-buttons-scrim {
            background: none;
        }
    }
    

    otherwise, if you can explain to me what you mean, I will have a look (though I am not a webdev per definition, I just love doing it :D )

    http://www.lilleulven.com - The Photos of my travels
    http://blog.lilleulven.com - The Stories of my travels
  • npudarnpudar Big grins Posts: 39Registered Users Big grins
    edited August 17, 2019

    @Lille Ulven My site is photos.pudar.com
    Although here is a easier gallery link where I started having issues: Pitre Paragons

    Thanks!

  • Lille UlvenLille Ulven Lille Ulven ScandinaviaPosts: 525Registered Users Major grins

    @npudar I have had a look, what I can see is that the HTML code for that button is missing on your site (at least the Pitre Paragons), and that should not vanish only because you tell the CSS to not show it.
    Even if I comment out (in firefox web dev) the code for hiding the button from the top of your photo, it does not show up again.
    So I believe, there is more to it, than what I can see (or rather for what I have the knowledge of fixing).

    I'd say send an email to the heroes, maybe they are able to figure out what is going on.

    Sorry, I am of no help here.

    http://www.lilleulven.com - The Photos of my travels
    http://blog.lilleulven.com - The Stories of my travels
  • npudarnpudar Big grins Posts: 39Registered Users Big grins

    @Lille Ulven Thank you for all your assistance -- it is very much appreciated! I will reach out to the heroes.
    Best regards,
    Nick

  • npudarnpudar Big grins Posts: 39Registered Users Big grins
    edited August 19, 2019

    Hero Tom provided the CSS code that worked for my site:

    /*** Removes 'Display Details from bottom of Lightbox'
    ***************************************************/
    .sm-user-ui .sm-lightbox-v2-photo-buttons .sm-button {
      display: none;
    }
    

    This code removes the text overlay, but keeps the hamburger icon in the toolbar for me.

    Nick

  • vadbvadb SwitzerlandPosts: 4Registered Users Big grins
    Before I found this topic, I made it working for myself using this code:

    span[class="sm-button-label sm-label-large sm-text-ellipsis"],
    span[class="sm-button-label sm-label-small sm-text-ellipsis"]{
    display: none;
    }


    (Sorry for the lack of formatting, I'm new on this forum and AFAIU is not allowed yet to use the full editor...)
Sign In or Register to comment.