Customizing the New Lightbox

1456810

Comments

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins
    edited January 21, 2020

    @blouie said:
    As mentioned, my objective is to show captions but not show the Photo Details button. And I've tried the above mentioned code. However, probably other code is interfering. So here is the code I have now that perhaps is the interfering code:

    Remove all 3 and use this:

    /* 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;}
    
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins

    @camner said:
    That's wonderful! BUT, if "Shop View" is only available to Pro and Portfolio level users, then those of use on the Power plan are going to be SOL, right? Obviously that's a business decision for SM to make, but since Shop View is intended to help Pro and Portfolio level users drive their selling-prints business (and presumably those that use SM primarily as a sales platform are less likely to have captions, let alone prefer to have captions always showing), might SM consider making the option to show captions by default NOT be limited to those with higher level plans?

    Absolutely. This setting wouldn't be something we'd gate on specific plans. One way I could invision it being built is that certain options within that setting (like Shop View) wouldn't be shown if the plan didn't support it. For example, for Power/Basic accounts, the options could be "Details, Share, Comments" while Portfolio/Pro would have an additional "Shop" option.

    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
  • camnercamner Registered Users Posts: 109 Major grins

    @leftquark said:

    @camner said:
    That's wonderful! BUT, if "Shop View" is only available to Pro and Portfolio level users, then those of use on the Power plan are going to be SOL, right? Obviously that's a business decision for SM to make, but since Shop View is intended to help Pro and Portfolio level users drive their selling-prints business (and presumably those that use SM primarily as a sales platform are less likely to have captions, let alone prefer to have captions always showing), might SM consider making the option to show captions by default NOT be limited to those with higher level plans?

    Absolutely. This setting wouldn't be something we'd gate on specific plans. One way I could invision it being built is that certain options within that setting (like Shop View) wouldn't be shown if the plan didn't support it. For example, for Power/Basic accounts, the options could be "Details, Share, Comments" while Portfolio/Pro would have an additional "Shop" option.

    Wonderful to hear! Thanks.

  • blouieblouie Registered Users Posts: 77 Big grins
    edited January 26, 2020

    @Hikin' Mike said:

    @blouie said:
    As mentioned, my objective is to show captions but not show the Photo Details button. And I've tried the above mentioned code. However, probably other code is interfering. So here is the code I have now that perhaps is the interfering code:

    Remove all 3 and use this:

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

    Doesn't work. It still displays the Photo Details button. It works in the sense that clicking the Photo Details button then reveals the caption and the captions display, without having to again click Photo Details, throughout the clicking forward. But all I want is no Photo Details button and just the caption.

    I guess I give up. All I wanted was to have it the way it was before the new Lightbox: just the image, the caption, the left and right arrows, and the X close button.

  • The MechanicThe Mechanic Registered Users Posts: 197 Major grins
    edited February 20, 2020

    @blouie It sounds like this is getting a bit confusing. The following links should help to address each thing you want to change one at a time:

    Remove Lightbox Left Sidebar Nav:
    https://smugocity.com/customization-toolbox/smugmug-lightbox-v2/remove-side-nav-bar/

    Remove View Details When No Title/Caption Present:
    https://smugocity.com/customization-toolbox/smugmug-lightbox-v2/remove-view-details/

    Make The Caption Always On Without Mouse Movement:
    https://smugocity.com/customization-toolbox/smugmug-lightbox-v2/static-title-caption-lightbox/

    This should help you address these changes one at a time.

  • Paul (France)Paul (France) Registered Users Posts: 30 Big grins

    Dear Smugmug and Dgrin-community, I like very much the lightbox lay-out AFTER you click on the "photo details"-symbol (or the cut-off caption): the photo at right, with title, captions and keywords left of the photo. I would like to get that lay-out immediately after my visitors click on a thumbnail in my gallery view. How can I skip the standard lightbox and directly go to the view with the photo details? Thanks for your suggestions, Paul.

  • camnercamner Registered Users Posts: 109 Major grins

    @Paul (France):
    At the present time what you want is not possible. The SmugMug team has said that they intend to implement this at some point in the future.

  • Paul (France)Paul (France) Registered Users Posts: 30 Big grins

    Isn't the only thing that is needed some code that says: "click on the photo details symbol"? Can somebody write the code for that command?

  • AllenAllen Registered Users Posts: 10,013 Major grins

    .> @Paul (France) said:

    Isn't the only thing that is needed some code that says: "click on the photo details symbol"? Can somebody write the code for that command?

    Not sure what you're referring to but.

    Like this? Upper left corner.
    https://www.photosbyat.com/Birds/Missouri-Bird-Photos-A-G/i-Mrg8Z6F/A

    Al - Just a volunteer here having fun
    My Website index | My Blog
  • camnercamner Registered Users Posts: 109 Major grins

    @Allen
    Can you share the CSS that you used to produce this effect?

    (BTW, on my iPad only the first two lines appear...the third line (“on/off”) is missing)

  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited February 27, 2020

    @camner said:
    @Allen
    Can you share the CSS that you used to produce this effect?

    (BTW, on my iPad only the first two lines appear...the third line (“on/off”) is missing)

    Might try removing "& CAPTION" but line breaks aren't allowed and might not wrap right.
    Maybe "PHOTO INFO On/Off" would wrap better.

    or for only two lines (might also play with height for 3 lines)
    content:" INFO On/Off";
    font-size:90%;

     .sm-user-ui .sm-page-gallery-keyword .sm-lightbox-v2 .sm-lightbox-v2-navbar-primary li:nth-child(3) .sm-button-square:after {
      content:" INFO & CAPTION On/Off";
      font-size:75%;
      background:#222;
      color:#ff0
     }
    
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • RonvanderPlasRonvanderPlas Registered Users Posts: 22 Big grins

    Does anyone know the code to get the title/caption displayed on mobile landscape?

    Currently you have to click on the details button which opens an overlay that covers the whole image. The portrait display does show the title/caption fine. I would like to have that in landscape mode too.

  • Paul (France)Paul (France) Registered Users Posts: 30 Big grins

    @Allen Yes, Allen, that is an acceptable solution. Thanks for the CSS-code. I have no idea where I should put that code. I have no experience with CSS. Can you explain to me where I should put it? And explain it like to a child ;-) Thanks!

  • LaurieWinterNZLaurieWinterNZ Registered Users Posts: 6 Big grins

    @leftquark I would like to add my support to those wanting the Title, Caption and other details to stay permanently visible on the left hand side in lightbox.
    As I am planning on using Collage Landscape layout, this is the only way I can get all of that information to show nicely for each photo. Most of my customers are a little older, and may not realise to click on the caption or the hamburgers to see more.

    I appreciate the various codes I have found reading through these posts but this is the one thing I would really, really like. The option to turn that on and off would satisfy both sides of the coin.

    For me, the reasoning is that I want to include purchasing information in my caption. I live in New Zealand and SmugMug does not have a printer here. It's totally not economical for me as a hobby photographer to ship from other areas of the world, and thus I can not use SmugMug's buy functionality.

  • Davidw25Davidw25 Registered Users Posts: 8 Big grins
    I am working on building my first site. One of the things I am really struggling with is that in the Lightbox view and Galleries, there is text that comes over the image which I really do not prefer. I don't mind it, actually kind of like it when it is the title of the gallery that shows up upon hover, or goes away when you hover, but when someone is just viewing the images, I don't want any text over the image. So I have been exploring a bit for the last 24 hours and have found a few things that get close but it isn't really what I want. Here is a link to a gallery - https://www.davidwallacephotography.com/Galleries/Details/

    The way it looks on the gallery page is fine, but when I go to the lightbox there are a few things I don't like.
    1st, the "ombre" effect...I just want the text on the background.
    2nd, I would like the text to be dark, like the buttons on the left
    3rd, I would be happy if I could change the subtext to a slightly lighter color.

    Here is the code I have, it is on the Whole Site level in the the Theme CSS section:

    /*Changing font size and color of TITLE*/
    .sm-lightbox-title {
    font-size: 30px !important; /*This code will change the font size of TITLE*/
    color: #222222 !important; /*This code will change the font color of TITLE*/
    }

    /*Changing the font size and color of CAPTION*/
    .sm-lightbox-caption {
    font-size: 24px !important; /*This code will change the font size of CAPTION*/
    color: #3a3a3a !important; /*This code will change the font color of CAPTION*/
    }

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

    /* Make the folder images slightly transparent when the mouse hovers over it */
    .sm-user-ui .sm-tiles .sm-tile-content:hover {
    opacity: 0.85;
    /* Have the transparency fade in */
    -webkit-transition: all 0.15s ease-in;
    -moz-transition: all 0.15s ease-in;
    transition: all 0.15 ease-in;
    }

    /* Fade out the transparency. This code can be removed if you do not want it to fade */
    .sm-user-ui .sm-tiles .sm-tile-content {
    -webkit-transition: all 0.15s ease-in;
    -moz-transition: all 0.15s ease-in;
    transition: all 0.15 ease-in;
    }
  • JoMelJoMel Registered Users Posts: 10 Big grins
    I need some help with round corners in the new lightbox.

    I used this code to round the corners:

    .sm-user-ui .sm-lightbox-v2-photo {
    border-radius:20px;
    }

    It mostly works good, but not on all photos. Some photos have alle 4 corners rounded but there are some where only the the upper corners were rounded and one or sometimes both corners at the bottom are still angular.
    Why is this so and how can I fix this?
  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited April 12, 2021

    It's the background of the lightbox caption showing its square corners.
    Add the radius to this, the caption box with background, to match the photo corner radius.

    .sm-lightbox-v2-photo-buttons-scrim-dark {
        border-radius: 20px
    }
    
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • JoMelJoMel Registered Users Posts: 10 Big grins
    Perfect, now it`s looking good on all images.

    Thanks
  • blouieblouie Registered Users Posts: 77 Big grins
    edited April 23, 2021

    In Lightbox, how can I change the 'X' button to a button with the standard Internet icon of a grid indicating "goes to thumbnails'. Also, how to change the text of the popup from 'Close' to 'Thumbnails'.

    Also, none of the suggestions mentioned above work to have persistent captions without having to first click the 'Photo Details' button. I want to not have the 'Photo Details' button at all; just the captions to appear automatically immediately when opening Lightbox. On both desktop and mobile. (With mobile now, the 'Photo Details' button doesn't even appear unless you hold the phone horizontally.) Also, not to have the appearance of the caption shift the image to the right in the window.

  • blouieblouie Registered Users Posts: 77 Big grins

    Also, how to get rid of the purple bar to the left of the 'Photo Details' button when the 'Photo Details' button has been clicked on?

  • savoirferret21savoirferret21 Registered Users Posts: 7 Big grins
    In my Lightbox, the tooltips for the icons are showing up as white text on white background. I've searched but cannot find the identifier to address the tooltips in CSS. I just need to change the tooltip background to black.
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins

    @savoirferret21 said:
    In my Lightbox, the tooltips for the icons are showing up as white text on white background. I've searched but cannot find the identifier to address the tooltips in CSS. I just need to change the tooltip background to black.

    /**
    * Changes Tooltip Color
    **********************************/
    .sm-user-ui.sm-tooltip,
    .sm-user-ui .sm-tooltip {
      color: #000;
    }
    
  • savoirferret21savoirferret21 Registered Users Posts: 7 Big grins
    > @"Hikin' Mike" said:
    > /*** Changes Tooltip Color**********************************/.sm-user-ui.sm-tooltip,.sm-user-ui .sm-tooltip { color: #000;}

    Thank you, Mike. I wish that worked, but they're still white-on-white.
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins

    @savoirferret21 said:

    @Hikin' Mike said:
    /*** Changes Tooltip Color**********************************/.sm-user-ui.sm-tooltip,.sm-user-ui .sm-tooltip { color: #000;}

    Thank you, Mike. I wish that worked, but they're still white-on-white.

    Looks like they changed it to:

    .sm-user-ui .sm-tooltip-v2,
    .sm-user-ui .sm-tooltip-v2::after {background: #000;}
    
  • savoirferret21savoirferret21 Registered Users Posts: 7 Big grins
    > @"Hikin' Mike" said:
    > Looks like they changed it to:
    >
    > .sm-user-ui .sm-tooltip-v2,.sm-user-ui .sm-tooltip-v2::after {background: #000;}

    Awesome. That worked.

    However, I probably should have dug deeper before reporting this issue. It seems that all buttons/textareas/etc. are displaying white-on-white. See attached photos of the Share Photos and Commerce popups.

    This all became apparent after I changed my Lightbox background color to black. Obviously, not all elements followed suit. Text was always white and I was working to make the Lightbox readable. I used the following code

    .sm-user-ui .sm-lightbox-v2,
    .sm-user-ui .sm-lightbox-v2-navbar,
    .sm-user-ui .sm-lightbox-v2-sidebar {
    background-color: #000000; /* or #000, #8B008B, etc */
    }

    https://www.savoirferret.com
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins

    @savoirferret21 said:

    @Hikin' Mike said:
    Looks like they changed it to:

    .sm-user-ui .sm-tooltip-v2,.sm-user-ui .sm-tooltip-v2::after {background: #000;}

    Awesome. That worked.

    However, I probably should have dug deeper before reporting this issue. It seems that all buttons/textareas/etc. are displaying white-on-white. See attached photos of the Share Photos and Commerce popups.

    This all became apparent after I changed my Lightbox background color to black. Obviously, not all elements followed suit. Text was always white and I was working to make the Lightbox readable. I used the following code

    .sm-user-ui .sm-lightbox-v2,
    .sm-user-ui .sm-lightbox-v2-navbar,
    .sm-user-ui .sm-lightbox-v2-sidebar {
    background-color: #000000; /* or #000, #8B008B, etc */
    }

    https://www.savoirferret.com

    Look at this: https://gallery.imagesinthebackcountry.com/Smugmug-customization/Change-Background-Color-in-SmugMug-Lightbox

  • savoirferret21savoirferret21 Registered Users Posts: 7 Big grins

    Thanks, Mike. That is a large feast of code. I will get to chomping on it shortly.

  • hadronhadron Registered Users Posts: 95 Big grins

    @Hikin' Mike said:

    @blouie said:
    As mentioned, my objective is to show captions but not show the Photo Details button. And I've tried the above mentioned code. However, probably other code is interfering. So here is the code I have now that perhaps is the interfering code:

    Remove all 3 and use this:

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

    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.

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins

    @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.

    It has to go in your theme's custom CSS section, not on your home page.

  • blouieblouie Registered Users Posts: 77 Big grins
    edited November 7, 2021

    @Hikin' Mike said:

    @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.

    It has to go in your theme's custom CSS section, not on your home page.

    I tried that, and it didn't work.

    I went to Entire Site > My Themes > wrench on the theme that is my active theme > Advanced > Custom CSS Edit > pasted in the code. And published. No change occurs on my Lightbox page,

Sign In or Register to comment.