Customizing the New Lightbox

145679

Comments

  • blouieblouie Austin, TexasRegistered Users Posts: 77 Big grins

    PS. And I disabled (by commenting out) all other possibly conflicting CSS mentioned previously.

  • blouieblouie Austin, TexasRegistered Users Posts: 77 Big grins

    To SmugMug developers: I truly do not understand why SmugMug wouldn't allow a simple option to display captions without first having to click a 'Photo Details' button. Such a simple, basic thing.

    It's been TWO AND A HALF YEARS and still no solution, after numerous attempts with various CSS patches and much time wasted going back and forth with them.

    I truly do not understand SmugMug's thinking. So simple: Just allow Lightbox to show captions without extra clicks.

  • leftquarkleftquark Former SmugMug Product Team Registered Users, Retired Mod Posts: 3,779 Many Grins

    @blouie said:
    To SmugMug developers: I truly do not understand why SmugMug wouldn't allow a simple option to display captions without first having to click a 'Photo Details' button. Such a simple, basic thing.

    It's been TWO AND A HALF YEARS and still no solution, after numerous attempts with various CSS patches and much time wasted going back and forth with them.

    I truly do not understand SmugMug's thinking. So simple: Just allow Lightbox to show captions without extra clicks.

    I'm confused, because Lightbox does show title and caption without having to do extra clicks.

    I'm no longer at SmugMug but when I was, I led the development of the new Lightbox. We ran a number of user studies, first observing how your viewers browsed your photos, where they focused their attention, and how much they recalled captions. Designs where the full caption and the photo were on the screen at the same time had significantly lower recall for the caption and lower aesthetic scores. Meaning when the viewer was presented with the full caption and photo, your viewers did not remember the caption and they didn't enjoy your photos as much. As we dove into why, it turned out that your viewers want to do 1 thing at a time: they either want to see the photo and enjoy it, or they want to read about it and learn the story. They don't do both very well at the same time. When we tested designs like the current one, your viewers rated the same photos as looking nicer, and remembered more of the caption.

    What are you trying to accomplish with showing the caption without extra clicks? Is it that you want your viewers to read the caption and remember it? If so, the current design is what you want.

    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
  • blouieblouie Austin, TexasRegistered Users Posts: 77 Big grins

    @leftquark said:
    What are you trying to accomplish with showing the caption without extra clicks? Is it that you want your viewers to read the caption and remember it? If so, the current design is what you want.

    I've said it probably at least a dozen times already combined from this thread and emails to support:

    I just want Lightbox to be the way it was before the "New" Lightbox. I simply want the caption to appear outside the image, just to the lower left of the image. And without the visitor having to click 'Photo Details' to do it - simply the way it used to be before "New" Lightbox.

    My captions are simply the image number in the gallery. I want visitors (especially publication editors and my critique fiends) to be able to jot down image numbers of photos that interest them or that they want to discuss with me. That has nothing to do with any SmugMug survey of what SmugMug says "MY" viewers want. I know what I want; I don't need someone else's survey for that.

    Since SmugMug changed Lightbox, I am saying that I should have an option to "Show captions in lower left persistently" or at least finally tell me CSS code that actually works to do that.

    Actually, all together, to restore my Lightbox to what it was before "New" Lightbox:

    1. Show captions without having to click 'Photo Detail's. And, if possible, allow it display immediately to the left of the image, and not all the way out to the edge of the page.

    2. Delete the 'Photo Details' button. If I have captions displayed, I don't need another button of clutter on the page. Moreover, I don't need that purple ribbon that appears on the left of the button

    3. Would be nice also to move the back/forward arrows closer to the image (though would have to see what that does on mobile; still SmugMug has no mobile customization whatsoever, except CSS that doesn't accomplish much on mobile anyway).

    Thank you for your interest.

  • blouieblouie Austin, TexasRegistered Users Posts: 77 Big grins

    PS. Because my images all have a white canvass, it would be okay, even better, if the caption appeared in the lower left of the image (in the white canvas).

    You can see it here on a Slideshow page I used to use (before the SmugMug oversharpening defect in Slideshow took hold around May of this year thus causing me to rely on Lightbox instead):

    https://www.markshapirophoto.com/RiverLakeSlides/n-28PWTs

    But that's not crucial; as long as the captions appear either inside in the lower left of the image or outside the image on the left.

  • leftquarkleftquark Former SmugMug Product Team Registered Users, Retired Mod Posts: 3,779 Many Grins
    edited November 7, 2021

    @blouie said:
    I've said it probably at least a dozen times already combined from this thread and emails to support:

    I just want Lightbox to be the way it was before the "New" Lightbox. I simply want the caption to appear outside the image, just to the lower left of the image. And without the visitor having to click 'Photo Details' to do it - simply the way it used to be before "New" Lightbox.

    My captions are simply the image number in the gallery. I want visitors (especially publication editors and my critique fiends) to be able to jot down image numbers of photos that interest them or that they want to discuss with me.

    You said you "truly do not understand SmugMug thinking". I was explaining it to you since you asked. It's not going back to the old way because for 99.9% of SmugMug photographers, the new Lightbox is a huge improvement. There's also the data -- SmugMug Pro's are making more money as a result -- so you want them to go back to how it was and hurt peoples businesses? Not going to happen.

    But even still, SmugMug did exactly what you want and my hunch is your custom CSS has butchered their programming. As a result of your mucking, you think it can't do what you want. You blame them for not doing something but they brought it to you years ago. I just showed you a screenshot where the caption is in the lower left without having to first click on anything. It's there as soon as your visitor clicks on the photo. You could have exactly what you're asking for, without having to do any custom CSS. But I think you're just looking for someone to blame.

    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
  • blouieblouie Austin, TexasRegistered Users Posts: 77 Big grins
    edited November 7, 2021

    Fair enough about explaining SmugMug's survey. I just wish that I had been asked.

    No, I did not say that it should go back to the old Lightbox. I am only saying that it would make sense for SmugMug to offer users an option in the settings to show persistent captions without clicking 'Photo Details'.

    The CSS I placed on my site all came from instructions from either SmugMug suport or Dgrin experts (as SmugMug itself advised me to go to Dgrin for additional help).

    And please do not make this personal by making a psychological claim about me that I am "just looking for someone to blame". On the contrary. What I want is to make my website behave correctly. I can't be blamed for the frustration of having been given CSS by SmugMug and Dgrin that hasn't worked, and even as I have gone back to disable certain of that CSS has I have been advised on Dgrin. I did everything in my power to conscientiously implement every suggestion from SmugMug and Dgrin (as SmugMug support referred me to).

    Moreover, the CSS that I got from SmugMug and Dgrin did not "butcher" an otherwise working programming, since from the start of new Lightbox I have never been told how to have what I require. Indeed, if I recall correctly, I was even told that what I require is simply not possible, even with CSS. Then subsequently other workarounds have been offered at Dgrin, as I attempted every one of them.

    So, if there is a way to implement my request, I very much welcome being told what it is. Today I tried yet another suggestion (including disabling previous CSS) but it doesn't work.

    I appreciate you expertise and help, and I welcome being instructed on how to achieve my requirements, but please don't turn it around to claim that I "mucked" anything up or that I have a "blaming" mentality.

    Thanks.

  • blouieblouie Austin, TexasRegistered Users Posts: 77 Big grins
    edited November 7, 2021
    1. Fair enough that citing the survey goes toward explaining SmugMug's thinking.

    2. I did not mean that Lightbox should altogether revert. I only mean that users should be given an option "show captions persistently without having to click Photo Details" and so that the caption would appear to the left of the image - and whatever other options to have Lightbox work as it used to. If many users like the new Lightbox, of course I don't want to take that away from them. I just want an option to make it work as I would like for myself, which, as I have said, is such an utterly basically simple design choice

    3. I did not "muck up" or "butcher" anything. I put in CSS every time at the advice of SmugMug support and Dgrin experts (as support referred me to Dgrin). I was conscientious at every point to put in only CSS in an exact way as I had been advised to do.

    4. I asked at the very beginning of new Lightbox. If the programming was working so that I could have as I requested, it had never been told to me what do with that programming other than adding the CSS I was advised to add. Moreover, if I recall correctly, finally after different CSS attempts, I was told that what I want is simply not possible with new Lightbox. Later, more Dgrin suggestions came in, and I faithfully tried every one of them exactly as suggested, including right up to today.

    5. Please do not turn this against me personally by making a psychological claim that I only want to "blame". On the contrary. What I want is to make my site work correctly. I should not be faulted for frustration in my taking so much time faithfully implementing every suggestion given to me only for nothing to work.

    I appreciate your expertise and your contributions, but it is not correct to say that I "mucked up" anything or that I'm exercising a supposed need to blame.

    That said, if anyone can tell me what to do to have the site work as I want, then I would sincerely appreciate that help with thanks in advance (for that matter, I sincerely appreciate the suggestions given me by Hikin' Mike and others, even though they've not worked so far, and I certainly do not blame them whatsoever for their generous advice).

  • leftquarkleftquark Former SmugMug Product Team Registered Users, Retired Mod Posts: 3,779 Many Grins
    edited November 7, 2021

    @blouie said:
    That said, if anyone can tell me what to do to have the site work as I want, then I would sincerely appreciate that help with thanks in advance (for that matter, I sincerely appreciate the suggestions given me by Hikin' Mike and others, even though they've not worked so far, and I certainly do not blame them whatsoever for their generous advice).

    In the impossible to find "Lightbox" settings (start on a Gallery -> Customize -> Content tab, look for the "Lightbox" option, click the wrench). Make sure the Caption field is turned ON.

    In your CSS, make sure you don't have anything that might be impacting the LB captions like sm-lightbox-v2-photo-title-and-caption or sm-text-ellipsis, especially anything that might hide the Lightbox captions. I'm hoping it's just the step above, turning LB captions on, which will place them in the lower left corner.

    Once enabled, your white borders might make it hard to see the image number, but we can help with some CSS to change font colors or position if that's a problem.

    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
  • blouieblouie Austin, TexasRegistered Users Posts: 77 Big grins

    Thank you for your help.

    Caption field is turned On as it always has been.

    I'll look for the CSS you mentioned.

    I should have mentioned also that once I get captions showing persistently, I want also to hide the 'Photo Detail's button. (I don't recall whether I had been told a while ago how to do that, but I've left it visible as it is the only way presently to show captions.)

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 5,311 Major grins
    edited November 7, 2021

    @hadron said:
    I'm a Pro SM user. This CSS in my Homepage CSS does not work. Should it?
    I'm trying to get the complete Captions always showing Under the photo, and remove the PhotoDetails button.

    Looks like SM changed some code since last year. If you want to always show the captions and remove photo details, this should do it. Add it to your theme's custom CSS section.

    /**
    * Shows Captions All The Time and Removes Details Button
    *******************************************************************/
    /* Displays Captions All of the Time */
    .sm-user-ui .sm-lightbox-v2[data-hide-ui] .sm-lightbox-v2-hideable {opacity: 1;}
    
    /* Removes Details Button */
    .sm-user-ui .user-ui-lightbox-details-button {display: none;}
    
  • blouieblouie Austin, TexasRegistered Users Posts: 77 Big grins

    I added it to the theme custom CSS (same place I tried Hikin' Mike's code).

    It hides Photo Details button, but doesn't show caption.

    Re possible conflicts, here is all the CSS that mentions Lightbox currently on my site:

    ENTIRE SITE

    .sm-user-ui .sm-lightbox-v2 .sm-button.sm-button-skin-default.sm-button-nochrome[data-elem-id="lightbox_fullscreen_button"] {display: none;}


    .sm-user-ui .sm-button.sm-button-skin-default.sm-button-nochrome[data-elem-id="lightbox_fullscreen_button"],
    .sm-user-ui .sm-button.sm-button-skin-default.sm-button-nochrome[data-elem-id="lightbox_details_button"] {display: none;}

    .sm-user-ui .sm-lightbox-v2-hideable {opacity: 1 !important;}

    .sm-user-ui .sm-button.sm-button-nochrome[data-elem-id="lightbox_image_title"] {
    position: fixed;
    bottom: 20px;
    left: 20px;
    cursor: default;
    }

    .sm-user-ui .sm-button.sm-button-nochrome[data-elem-id="lightbox_image_title"] p {color: black;}


    /Hiding VIEW PHOTO DETAILS button from lightbox 2019 view/
    .sm-user-ui .sm-lightbox-v2-photo-buttons {
    display: none;
    }


    .sm-lightbox-v2-sidebar-placeholder .sm-icon-Details,
    .sm-lightbox-v2-sidebar-placeholder .sm-muted{
    display: none;
    }


    .sm-user-ui .sm-lightbox-v2-nav-button .sm-icon-NavigateBack.sm-icon,
    .sm-user-ui .sm-lightbox-v2-nav-button .sm-icon-NavigateNext.sm-icon {
    height: 44px;
    width: 44px;
    }


    .sm-lightbox-v2-sidebar-content .sm-image-metadata {
    position: fixed;
    bottom: 100px; }

    ALL GALLERIES

    don't recall why it is commented out:

    //
    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;
    }
    }*/


    /* Removes "Shadow" */
    .sm-user-ui .sm-lightbox-v2-photo-buttons-scrim-dark {background: transparent;}

    /* Displays Captions All of the Time */
    .sm-user-ui .sm-lightbox-v2[data-hide-ui] .sm-lightbox-v2-hideable {opacity: 1;}

    /* Removes Icons */
    .sm-user-ui .sm-lightbox-v2-photo-title .sm-icon,
    .sm-user-ui .sm-button.sm-button-skin-default.sm-button-nochrome[data-elem-id="lightbox_details_button"],
    .sm-user-ui .sm-button.sm-button-skin-default.sm-button-nochrome[data-elem-id="lightbox_fullscreen_button"] {display: none;}

    /* Changes Caption Color */
    .sm-user-ui .sm-button.sm-button-nochrome[data-elem-id="lightbox_image_title"] p {color: black;}


    .sm-user-ui .sm-lightbox-v2[data-hide-ui] .sm-lightbox-v2-hideable {opacity: 1;}


    .sm-lightbox-ft-right {display: none;}

    .sm-fonticon-Sizes {display:none;}

    .sm-lightbox-info-expand {display:none;}

  • blouieblouie Austin, TexasRegistered Users Posts: 77 Big grins

    Didn't work. It hides Photo Details, but it doesn't show captions,

    Re conflicts, here is all the CSS on my site that mentions Lightbox:

    ENTIRE SITE

    .sm-user-ui .sm-lightbox-v2 .sm-button.sm-button-skin-default.sm-button-nochrome[data-elem-id="lightbox_fullscreen_button"] {display: none;}


    .sm-user-ui .sm-button.sm-button-skin-default.sm-button-nochrome[data-elem-id="lightbox_fullscreen_button"],
    .sm-user-ui .sm-button.sm-button-skin-default.sm-button-nochrome[data-elem-id="lightbox_details_button"] {display: none;}

    .sm-user-ui .sm-lightbox-v2-hideable {opacity: 1 !important;}

    .sm-user-ui .sm-button.sm-button-nochrome[data-elem-id="lightbox_image_title"] {
    position: fixed;
    bottom: 20px;
    left: 20px;
    cursor: default;
    }

    .sm-user-ui .sm-button.sm-button-nochrome[data-elem-id="lightbox_image_title"] p {color: black;}


    /Hiding VIEW PHOTO DETAILS button from lightbox 2019 view/
    .sm-user-ui .sm-lightbox-v2-photo-buttons {
    display: none;

    }

    .sm-lightbox-v2-sidebar-placeholder .sm-icon-Details,
    .sm-lightbox-v2-sidebar-placeholder .sm-muted{
    display: none;
    }


    .sm-user-ui .sm-lightbox-v2-nav-button .sm-icon-NavigateBack.sm-icon,
    .sm-user-ui .sm-lightbox-v2-nav-button .sm-icon-NavigateNext.sm-icon {
    height: 44px;
    width: 44px;
    }


    .sm-lightbox-v2-sidebar-content .sm-image-metadata {
    position: fixed;
    bottom: 100px; }

    ALL GALLERIES

    don't recall why it is commented out:

    //
    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;
    }
    }*/


    /* Removes "Shadow" */
    .sm-user-ui .sm-lightbox-v2-photo-buttons-scrim-dark {background: transparent;}

    /* Displays Captions All of the Time */
    .sm-user-ui .sm-lightbox-v2[data-hide-ui] .sm-lightbox-v2-hideable {opacity: 1;}

    /* Removes Icons */
    .sm-user-ui .sm-lightbox-v2-photo-title .sm-icon,
    .sm-user-ui .sm-button.sm-button-skin-default.sm-button-nochrome[data-elem-id="lightbox_details_button"],
    .sm-user-ui .sm-button.sm-button-skin-default.sm-button-nochrome[data-elem-id="lightbox_fullscreen_button"] {display: none;}

    /* Changes Caption Color */
    .sm-user-ui .sm-button.sm-button-nochrome[data-elem-id="lightbox_image_title"] p {color: black;}


    .sm-user-ui .sm-lightbox-v2[data-hide-ui] .sm-lightbox-v2-hideable {opacity: 1;}


    .sm-lightbox-ft-right {display: none;}

    .sm-fonticon-Sizes {display:none;}

    .sm-lightbox-info-expand {display:none;}

  • blouieblouie Austin, TexasRegistered Users Posts: 77 Big grins

    It hides Photo Details button but doesn't show captions.

    Re conflicts, here is all the CSS I have mentioning Lightroom:

    ENTIRE SITE

    .sm-user-ui .sm-lightbox-v2 .sm-button.sm-button-skin-default.sm-button-nochrome[data-elem-id="lightbox_fullscreen_button"] {display: none;}


    .sm-user-ui .sm-button.sm-button-skin-default.sm-button-nochrome[data-elem-id="lightbox_fullscreen_button"],
    .sm-user-ui .sm-button.sm-button-skin-default.sm-button-nochrome[data-elem-id="lightbox_details_button"] {display: none;}

    .sm-user-ui .sm-lightbox-v2-hideable {opacity: 1 !important;}

    .sm-user-ui .sm-button.sm-button-nochrome[data-elem-id="lightbox_image_title"] {
    position: fixed;
    bottom: 20px;
    left: 20px;
    cursor: default;
    }

    .sm-user-ui .sm-button.sm-button-nochrome[data-elem-id="lightbox_image_title"] p {color: black;}


    /Hiding VIEW PHOTO DETAILS button from lightbox 2019 view/
    .sm-user-ui .sm-lightbox-v2-photo-buttons {
    display: none;
    }


    .sm-lightbox-v2-sidebar-placeholder .sm-icon-Details,
    .sm-lightbox-v2-sidebar-placeholder .sm-muted{
    display: none;
    }


    .sm-user-ui .sm-lightbox-v2-nav-button .sm-icon-NavigateBack.sm-icon,
    .sm-user-ui .sm-lightbox-v2-nav-button .sm-icon-NavigateNext.sm-icon {
    height: 44px;
    width: 44px;
    }


    .sm-lightbox-v2-sidebar-content .sm-image-metadata {
    position: fixed;
    bottom: 100px; }

    ALL GALLERIES

    don't recall why it is commented out:

    //
    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;
    }
    }*/


    /* Removes "Shadow" */
    .sm-user-ui .sm-lightbox-v2-photo-buttons-scrim-dark {background: transparent;}

    /* Displays Captions All of the Time */
    .sm-user-ui .sm-lightbox-v2[data-hide-ui] .sm-lightbox-v2-hideable {opacity: 1;}

    /* Removes Icons */
    .sm-user-ui .sm-lightbox-v2-photo-title .sm-icon,
    .sm-user-ui .sm-button.sm-button-skin-default.sm-button-nochrome[data-elem-id="lightbox_details_button"],
    .sm-user-ui .sm-button.sm-button-skin-default.sm-button-nochrome[data-elem-id="lightbox_fullscreen_button"] {display: none;}

    /* Changes Caption Color */
    .sm-user-ui .sm-button.sm-button-nochrome[data-elem-id="lightbox_image_title"] p {color: black;}


    .sm-user-ui .sm-lightbox-v2[data-hide-ui] .sm-lightbox-v2-hideable {opacity: 1;}


    .sm-lightbox-ft-right {display: none;}

    .sm-fonticon-Sizes {display:none;}

    .sm-lightbox-info-expand {display:none;}

  • blouieblouie Austin, TexasRegistered Users Posts: 77 Big grins

    Note: I had each CSS block separted with dash lines underneath, but Dgrin supresses the dashes. (Also, Dgrin deletes posts when I try edit. To do edit, I have to make a completely new post. But that's another matter ...)

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 5,311 Major grins

    @blouie said:
    Note: I had each CSS block separted with dash lines underneath, but Dgrin supresses the dashes. (Also, Dgrin deletes posts when I try edit. To do edit, I have to make a completely new post. But that's another matter ...)

    Use the code button:

  • blouieblouie Austin, TexasRegistered Users Posts: 77 Big grins

    Thanks for that tip.

    /

    I do see 'photo-title' in one of my codes. I can comment it out, but don't know whether to comment out the comma at the end of the line.

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 5,311 Major grins
    edited November 8, 2021

    @blouie said:
    Thanks for that tip.

    /

    I do see 'photo-title' in one of my codes. I can comment it out, but don't know whether to comment out the comma at the end of the line.

    Just noticed several CSS errors you might want to fix.

    In your Entire Site, you are missing the * in the comments:

    /Hiding VIEW PHOTO DETAILS button from lightbox 2019 view/
    .sm-user-ui .sm-lightbox-v2-photo-buttons {
    display: none;
    }
    

    Should say:

    /*Hiding VIEW PHOTO DETAILS button from lightbox 2019 view*/
    .sm-user-ui .sm-lightbox-v2-photo-buttons {
    display: none;
    }
    

    In your Galleries you are missing / here:

    * 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:0
     }
    }
    

    Should be

    /* 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:0
     }
    }
    

    You have a duplicate here:

    .sm-user-ui .sm-lightbox-v2[data-hide-ui] .sm-lightbox-v2-hideable {
     opacity:1
    }
    

    This code doesn't work because SM changed the code:

    .sm-user-ui .sm-lightbox-v2-photo-title .sm-icon,
    .sm-user-ui .sm-button.sm-button-skin-default.sm-button-nochrome[data-elem-id='lightbox_details_button'],
    .sm-user-ui .sm-button.sm-button-skin-default.sm-button-nochrome[data-elem-id='lightbox_fullscreen_button'] {
     display:none
    }
    
  • blouieblouie Austin, TexasRegistered Users Posts: 77 Big grins

    The missing characters are in the actual code. It's just that Dgrin is leaving them out when I post.

    .sm-user-ui .sm-lightbox-v2-photo-title .sm-icon, .sm-user-ui .sm-button.sm-button-skin-default.sm-button-nochrome[data-elem-id='lightbox_details_button'], .sm-user-ui .sm-button.sm-button-skin-default.sm-button-nochrome[data-elem-id='lightbox_fullscreen_button'] { display:none }

    What is the replacement code?

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 5,311 Major grins

    @blouie said:
    The missing characters are in the actual code. It's just that Dgrin is leaving them out when I post.

    No, I copy/pasted from your Gallery, not SM.

    @blouie said:
    What is the replacement code?

    Sorry about that.

    /* Removes Details and Fullscreen Button */
    .sm-user-ui .user-ui-lightbox-details-button,
    .sm-user-ui .user-ui-lightbox-fullscreen-button {display: none;}
    
  • blouieblouie Austin, TexasRegistered Users Posts: 77 Big grins

    I don't know what you mean by Gallery not SmugMug.

    I copied from the CSS blocks in my SmugMjug customization. The code there is correct, and it shows correctly in my computer text editor, and it shows correctly in the Dgrin post composition window. But after I've posted, Dgrin fails to display certain characters.

    Thanks for the updated code.

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 5,311 Major grins
    edited November 8, 2021

    @blouie said:
    I don't know what you mean by Gallery not SmugMug.

    I copied from the CSS blocks in my SmugMjug customization. The code there is correct, and it shows correctly in my computer text editor, and it shows correctly in the Dgrin post composition window. But after I've posted, Dgrin fails to display certain characters.

    Thanks for the updated code.

    I meant I copied it from your site/gallery (using webtools) and not what you pasted on the forum. Specifically this:

    * 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:0
     }
    }
    

    You missed the first /:

    /* 8. Render title and buy button below image on desktop & tablet landscape viewports. */

  • blouieblouie Austin, TexasRegistered Users Posts: 77 Big grins
    edited November 8, 2021

    I don't know what Webtools is (is that the same as Developer Tool in Chrome?).

    Yes, what you just posted is how it shows in Dgrin, but it's not what is in my CSS block itself. What is in my CSS block includes the forwardslash character; but when I post to Dgrin, the forwardslash character gets left out.

  • blouieblouie Austin, TexasRegistered Users Posts: 77 Big grins

    //
    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;
    }
    }*/

  • blouieblouie Austin, TexasRegistered Users Posts: 77 Big grins

    The above post is an example. It is not what is in the post composition box before I hit 'Post Comment'. Instead, certain characters fail to display.

  • blouieblouie Austin, TexasRegistered Users Posts: 77 Big grins
    edited November 8, 2021
    /*/*
    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;
    }
    }*/
    
  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 5,311 Major grins

    @blouie said:
    I don't know what Webtools is (is that the same as Developer Tool in Chrome?).

    Yes, what you just posted is how it shows in Dgrin, but it's not what is in my CSS block itself. What is in my CSS block includes the forwardslash character; but when I post to Dgrin, the forwardslash character gets left out.

    Yes, webtool from Firefox. This is what I see:

  • blouieblouie Austin, TexasRegistered Users Posts: 77 Big grins
    edited November 8, 2021

    My previous post is what is actually in my CSS. It displays properly because I used the "Code" tag in the post composition window. It's when I wasn't using the Code tag that some characters fail to display.

  • blouieblouie Austin, TexasRegistered Users Posts: 77 Big grins

    What shows in Web Tools is not what is in my CSS block. My CSS block is as in my previous post.

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 5,311 Major grins

    @blouie said:
    What shows in Web Tools is not what is in my CSS block. My CSS block is as in my previous post.

    That's odd.

Sign In or Register to comment.