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, 2017

    Seems like this doesn't work on iPads or mobile phones it just doesn't close the lightbox view

  • henrys-medienservice

    on September 13, 2016

    self answered
    go to entire site content block css and drag it to the block paste the code done

  • henrys-medienservice

    on September 13, 2016

    can anyone here tell me where to put the code in?? THX Henry

  • DazzlingPhotoBooth

    on January 4, 2016

    Darn, 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, 2013

    can you tell me where i put this code? thanks.

Powered by SmugMug Owner Log In