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.
/*** 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;}
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???
@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.
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
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?
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}
@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?
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:
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?
@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.
@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.
@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 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??
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.
Comments
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.
If I'm not mistaken:
Entire Site > My Themes > wrench icon [your active theme] > Advanced > Custom CSS Edit
No.
Images in the Backcountry
My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
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.
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.
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
The 2nd DONE does not work (is not accepted).
Do you have a CSS to change the Profile DISPLAY NAME font and text size?
Don't know why Done not accepted.
I don't know the CSS for Profile stuff.
I figured it out...
.sm-user-ui .sm-page-widget-profile-v2-name {font-family: italic Georgia, serif; font-size: 22px; font-style:italic}
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?
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
Images in the Backcountry
My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
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):
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?
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.
/* Removes Fullscreen Button */ .sm-user-ui .user-ui-lightbox-fullscreen-button {display: none;}You can't.
Images in the Backcountry
My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
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...
** .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.
> 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!
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.
My Photography Blog.
My Popular Photos
- Photos of Edinburgh, Scottish Highlands and Islands, Fife.