Customizing the New Lightbox

14567810»

Comments

  • hadronhadron Registered Users Posts: 95 Big grins

    Hikin'Mike and LeftQuark,
    I see basically what blouie is seeing. First of all, there NO CSS section I can find under Themes. Please post the exact sequence of steps to get to the place to enter the below CSS.

    I have tried placing CSS in several places, ONLY the Photo Details button disappears, no matter what section I have CSS in.

    Here is my simple, complete CSS :

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

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

    With the above CSS, a partial Caption (followed by ... ) appears on top of the photo. This happens even without any CSS.
    I want the FULL LONG caption to appear BELOW the photo. I have seen several SM websites where the full caption always appears below the photo.

    Is the above supposed to show the FULL LONG caption show BELOW the photo???

    Thanks.

  • blouieblouie Registered Users Posts: 77 Big grins

    @hadron said:
    exact sequence of steps to get to the place to enter the below CSS

    If I'm not mistaken:

    Entire Site > My Themes > wrench icon [your active theme] > Advanced > Custom CSS Edit

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

    @hadron said:
    Is the above supposed to show the FULL LONG caption show BELOW the photo???

    Thanks.

    No.

  • hadronhadron Registered Users Posts: 95 Big grins
    edited November 8, 2021

    @Hikin' Mike said:

    @hadron said:
    Is the above supposed to show the FULL LONG caption show BELOW the photo???

    Thanks.

    No.

    OK, So is there a way to show the full caption under the photo? There must be, because I see SM site which have the full caption below the photo.

    As to the Photo Details button... When you remove that button and click on the Caption inside the photo, you still get the full Photo Details display on the left side. I'm not sure that is what people want. That is why I want to remove the caption inside the photo, and rather have it below the photo ALL THE TIME.

  • hadronhadron Registered Users Posts: 95 Big grins

    @blouie said:

    @hadron said:
    exact sequence of steps to get to the place to enter the below CSS

    If I'm not mistaken:

    Entire Site > My Themes > wrench icon [your active theme] > Advanced > Custom CSS Edit

    I found the wrench (thanks) and inserted LeftQark's CSS, I can click done, but it won't the 2nd DONE to save things a get out of the Create Theme box.

  • blouieblouie Registered Users Posts: 77 Big grins

    I don't think you should be in a Create Theme box? You already have an active theme, right?

    Try this way:

    Entire Site > Theme > wrench icon on Active Theme > Advanced > Custom CSS Edit > [paste code] > Done > Done > Done (near top to the right of Preview) > Publish Now

  • hadronhadron Registered Users Posts: 95 Big grins

    @blouie said:

    Entire Site > Theme > wrench icon on Active Theme > Advanced > Custom CSS Edit > [paste code] > Done >** Done** > Done (near top to the right of Preview) > Publish Now

    The 2nd DONE does not work (is not accepted).

    Do you have a CSS to change the Profile DISPLAY NAME font and text size?

  • blouieblouie Registered Users Posts: 77 Big grins

    Don't know why Done not accepted.

    I don't know the CSS for Profile stuff.

  • hadronhadron Registered Users Posts: 95 Big grins

    @hadron said:

    @blouie said:

    Entire Site > Theme > wrench icon on Active Theme > Advanced > Custom CSS Edit > [paste code] > Done >** Done** > Done (near top to the right of Preview) > Publish Now

    The 2nd DONE does not work (is not accepted).

    Do you have a CSS to change the Profile DISPLAY NAME font and text size?

    I figured it out...
    .sm-user-ui .sm-page-widget-profile-v2-name {font-family: italic Georgia, serif; font-size: 22px; font-style:italic}

  • hadronhadron Registered Users Posts: 95 Big grins
    edited November 9, 2021

    @leftquark said:
    8. Move the "Title" and "Buy" buttons 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-

    So I used your CSS code #8 & #9 on page 1 of this thread. It works to move the captions below the photo, but shrinks the photo significantly and the Captions go across the full screen.

    Is there a way to keep the photo large, and just move the captions centered under the photo?

  • hadronhadron Registered Users Posts: 95 Big grins

    @Hikin' Mike said:

    @blouie said:
    Also, how can I remove the "Full Screen" button?

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

    Can this CSS be used to eliminate the INFO (i) button? What is the Data-elem-id= for the Info button?

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

    @hadron said:
    Can this CSS be used to eliminate the INFO (i) button? What is the Data-elem-id= for the Info button?

    I gave you the Details Button earlier: https://dgrin.com/discussion/comment/2120594/#Comment_2120594

  • blouieblouie Registered Users Posts: 77 Big grins

    The question that remains for me is which of these to disable as probable conflicts with the CSS to show caption and hide 'Photo Details' button (putting aside the issue that my code in the CSS content blocks is not displaying correctly in Developer and in these posts):

    @blouie said:
    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;}

  • hadronhadron Registered Users Posts: 95 Big grins

    I tried to hide the Fullscreen button with the following CSS, but it does not work for me:
    .sm-user-ui .sm-lightbox-v2 .user-ui-lightbox_fullscreen_button {display: none;}
    Please help.

    Also, I would like to force the lightbox photo to be full screen at all times.
    Is there a way to do that?

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

    @hadron said:
    force the lightbox photo to be full screen at all times.

    Why would you want to to do that? I'm pretty sure it would be taken as rude by many visitors, since it takes over a user's entire screen (other open windows, desktop, and taskbar) without the user requesting that.

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited November 17, 2021

    @hadron said:
    I tried to hide the Fullscreen button with the following CSS, but it does not work for me:
    .sm-user-ui .sm-lightbox-v2 .user-ui-lightbox_fullscreen_button {display: none;}
    Please help.

    /* Removes Fullscreen Button */
    .sm-user-ui .user-ui-lightbox-fullscreen-button {display: none;}
    

    @hadron said:
    Also, I would like to force the lightbox photo to be full screen at all times.
    Is there a way to do that?

    You can't.

  • hadronhadron Registered Users Posts: 95 Big grins

    @Hikin' Mike said:

    /* Removes Fullscreen Button */
    .sm-user-ui .user-ui-lightbox-fullscreen-button {display: none;}
    

    @hadron said:
    Also, I would like to force the lightbox photo to be full screen at all times.
    Is there a way to do that?

    You can't.

    Putting your no fullscreen button CSS code into my site, displays all my photos full screen (like when you push F11 in Windows). Just what I wanted...

  • hadronhadron Registered Users Posts: 95 Big grins

    ** .sm-user-loggedin.sm-user-owner** is used to see if the owner is logged in. Is there code which can be used to see if a Guest is logged in?

  • hadronhadron Registered Users Posts: 95 Big grins

    @hadron said:
    ** .sm-user-loggedin.sm-user-owner** is used to see if the owner is logged in. Is there code which can be used to see if a Guest is logged in?

    I answered my own question.

  • funk_shuifunk_shui Registered Users Posts: 12 Big grins
    FROM LEFTQUARK'S INITIAL CUSTOMIZATIONS

    > 4. Change the Sidebar to be a (non-draggable) overlay:/*
    4. Render the sidebar as a (non draggable) overlay on desktop &
    tablet landscape viewports.

    Note: Looks best on images with minimal text, EXIF, and/or map
    sidebar content.
    */
    @media screen and (min-width: 961px) {
    .sm-user-ui .sm-lightbox-v2 {
    grid-template-areas: "leftnav content rightnav";
    grid-template-columns: 60px auto 60px;
    }

    .sm-user-ui .sm-lightbox-v2-sidebar {
    position: absolute;
    left: 80px;
    top: 20px;
    max-height: calc(100vh - 40px);
    border: 1px solid gray;
    }

    .sm-user-ui .sm-lightbox-v2-sidebar-content {
    padding: 24px;
    }
    }

    I REALLY like this overlay, but it seems every time I try to implement it, it removes the entire product catalog/shopping cart from being seen in the lightbox when I click the cart icon. I erased all lightbox customizations and only kept this one, and it still makes buying the photo inaccessible. Anyone else have this problem? Or a suggestion??

    Thank you!
  • Tom FosterTom Foster Registered Users Posts: 289 Major grins
    edited December 22, 2023

    Updated version of Hikin' Mike's previously posted CSS to Change Lightbox Colour, works properly as of December 2023 - Mike's code has a few bits missing in it because of Smugmug updates, etc.
    The code here will give a dark lightbox (useful if you want Lightbox dark but theme 'Primary' colour something else) but can easily be adjusted to change the lightbox to any other colour.

Sign In or Register to comment.