How to Customize Blogger's Official Lightbox

Blogger by default added the Lightbox feature to add more interactivity to images we normally upload in our post, with their lightbox its mu...

Blogger by default added the Lightbox feature to add more interactivity to images we normally upload in our post, with their lightbox its much more easier to view images by using the arrow keys and even the background is darker for getting more focus on the images instead of text added in that post. But till now we do not have any option to customize the overall looks of lightbox by changing its background color, changing the bar color containing all the images small thumbnails and much more.

For those of you who have chosen to use the Blogger's Lightbox View instead of custom jquery lightbox for displaying pictures when clicking on them now have the option to change its style in a whole different way by just using few line's of CSS code. You will be able to change the black color of the screen, the border or shadow of the images and the color of the thumbnails background. It means we can customize the Blogger Lightbox entirely on our taste. After adding our CSS code, the entire look of the lightbox window will be changed - the background color, the bar showing the thumbnails, the border of images, the text within it, transparency and the close button. Now just follow the given step by step tutorial with images and demo :

DEMO

How to Customize Blogger's Official Lightbox

Step 1. Login to your blogger account > Dashboard > Template > Edit HTML

Step 2. Click anywhere inside the code and find the following code ( use Ctrl + F ) :

 ]]></b:skin>

Step 3. Just above ]]></b:skin> add following CSS :

    /* Background or Overlay*/

    .CSS_LIGHTBOX_BG_MASK {
    background-color: #000000 !important;
    background-image: url(background-image-url) !important;
    opacity: 0.8 !important;
    filter: alpha(opacity=90) !important;
    }


    /* Images Border and Shadow */

    .CSS_LIGHTBOX_SCALED_IMAGE_IMG {
    outline: 0px solid #fff !important;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0px 0px 5px #ffffff;
    -moz-box-shadow: 0px 0px 5px #ffffff;
    box-shadow: 0px 0px 5px #ffffff;
    }


    /* Close Button */

    .CSS_LIGHTBOX_BTN_CLOSE {
    background-image: url(button-image-url) !important;
    }


    /* Thumbnails Bar */

    .CSS_LIGHTBOX_FILMSTRIP {
    background-color: #000000 !important;
    }


    /* Index Info (number of images) */

    .CSS_LIGHTBOX_INDEX_INFO {
    color: #898989 !important;
    }

Step 4. Configuration of CSS:

- Replace background-image-url with the URL of the image for background.
- Replace button-image-url  with the URL of the image for close button.
  For example : background-image: url(https://www.image.com/image.jpg) !important;

  Related post: How to get image URL

  Note : If you want use default value for close button then remove the CSS :

                 /* Close Button */

                 .CSS_LIGHTBOX_BTN_CLOSE {
                 background-image: url(button-image-url) !important;
                  }

- Adjust the value 0.8 ( from 0 to 1 ) to change the transparency (Opacity) of background.

- Replace the value #xxxxxx to change the color of particular element in particular section (Color Codes).

• For example : Say if you want to change the background color of  Thumbnails bar to #ffffff, then change the value #000000 to #ffffff under  /* Thumbnails Bar */ inside background-color :
  
       /* Thumbnails Bar */
  
      .CSS_LIGHTBOX_FILMSTRIP {
      background-color: #ffffff !important;
      }


• Or Say if you want change the Text color of Index Info then change the value #898989 with any other say #dddddd under /* Index Info (number of images) */ inside color :
  
      /* Index Info (number of images) */
  
      .CSS_LIGHTBOX_INDEX_INFO {
      color: #dddddd !important;
      }

- Adjust the value 5  to change the radius of image (all 3 values should be same).

Note: Make sure your blogger lightbox is enabled - Settings > Posts, comments and sharing > Showcase images with Lightbox


Step 5. Click Save template.

Great !

Refresh your blog and click on any image to see your own customized blogger lightbox. For any issues related to above tutorial comment below. Stay Updated, Browse Howbloggerz ! :)