Customizing the New Lightbox

14567810»

Comments

  • hadronhadron Big grins Registered Users Posts: 94 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 Austin, TexasRegistered 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 Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 5,311 Major grins

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

    Thanks.

    No.

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

    Don't know why Done not accepted.

    I don't know the CSS for Profile stuff.

  • hadronhadron Big grins Registered Users Posts: 94 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 Big grins Registered Users Posts: 94 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 Big grins Registered Users Posts: 94 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 Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 5,311 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 Austin, TexasRegistered 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 Big grins Registered Users Posts: 94 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 Austin, TexasRegistered 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 Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 5,311 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 Big grins Registered Users Posts: 94 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 Big grins Registered Users Posts: 94 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 Big grins Registered Users Posts: 94 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.

Sign In or Register to comment.