Need help in Customization of blogger by default official lightbox to make it more interactive and stylish by adding few line of CSS to changing the background color, the bar showing the thumbnails, the border of images, the text within it, transparency, the close button and so more. Just follow the step by step tutorial with images and demo.

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 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.

How to Customize Blogger's Official Lightbox
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 :


adding css to custommize blogger official lightbox


How to Customize Blogger's Official Lightbox



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


how to edit blog template


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 ! :)
Love it? Don't forget to Subscribe
  • JaiperStudio
    JaiperStudio
    6 May 2017 at 03:21
    Hi.
    How can I add a caption on the lightbox or the tittle that shows on the lightbox?
    Thank you in advance.
    Saurabh Jarial
    Saurabh Jarial
    10 May 2017 at 07:49
    Sorry Almighty, you cannot show captions in blogger's official lightbox because they have not added this feature yet but you can try Fancybox and ImageLightbox :)
  • Fritz Jörn (Fritz@Joern.De)
    Fritz Jörn ([email protected])
    28 December 2019 at 13:17
    Videos in my blog are absolutely boring, unattractive, and look all alike, see for example https://blogabissl.blogspot.com/2019/12/eggs-benedict.html . A shame! How do I show an individual picture instead, showing the viewer what to expect and making her click the show arrow? (I have no idea what a lightbox or no lightbox does, I always show the 1970s gray ugly blogger camera …)
    Saurabh Jarial
    Saurabh Jarial
    6 January 2020 at 18:54
    Noting to be shamed! We are not born expert. We learn each day and I am happy to see that at least your are trying :)
    Jquery based Lightbox with navigation disabled can be helpful for you. I have already created a post on it. Jquery Lightboxes
  • UFO Matrix
    UFO Matrix
    26 November 2022 at 19:50
    Hey thanks for this! Is it possible to add a download image button next to the close button?