Add The word "Close" to the Lightbox
By default the Lightbox has a little "x" in the top right corner to close out of lightbox view. But some viewers may not know what the "x" means. If you'd like to add text to this, for example the word "close, add the following CSS:
/* Lightbox: Add the word "Close" next to the X */
.sm-user-ui .sm-lightbox-tools .sm-lightbox-close:after {
content: ' Close';
font-size: 18px;
padding-left: 5px;
top: -1px;
position: relative;
}
/* Move the close button to the left so the word "Close" will fit */
.sm-user-ui .sm-lightbox-tools .sm-lightbox-close {
left: -20px;
position: relative;
}
/* Leave some room around the "Close" area */
.sm-user-ui .sm-lightbox .sm-lightbox-tools {
padding: 5px;
}
/* Set the color of the "X" */
.sm-user-ui .sm-lightbox-tools .sm-fonticon-XCross2 {
/* color: #fff !important; */
}
/* Set the properties for the entire close box */
/* If you want to change the color of the "Close" text, uncomment out the color and set your color */
.sm-user-ui .sm-lightbox-tools .sm-lightbox-close {
/* background-color: red !important; */
border: 1px solid #fff;
/* color: #fff; */
font-size: 14px;
opacity: 1.0;
}
If you would like to use your own wording, just change it the text in: "content: ' Close';"
Laslo Kis
on February 20, 2017Seems like this doesn't work on iPads or mobile phones it just doesn't close the lightbox view
henrys-medienservice
on September 13, 2016self answered
go to entire site content block css and drag it to the block paste the code done
henrys-medienservice
on September 13, 2016hi,
can anyone here tell me where to put the code in?? THX Henry
DazzlingPhotoBooth
on January 4, 2016Darn, does not work for me on smugmug pro. Adding this in the CSS content box for all galleries. Only thing I am getting to work is gallery description font to change and color of it.
?
Mel Jones Photography
on February 1, 2014@eshavell, just add the code in a CSS Content Block via customise. This can be on 'Entire Site' if you want it site-wide, or 'Just This Gallery' if you only want it on the one gallery.
eshavell
on December 16, 2013can you tell me where i put this code? thanks.