Add The word "Close" to the Lightbox - Aaron Meyers

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';"


Powered by SmugMug Log In