How to Customize Blogger's Official Lightbox

2 comments
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 ! :)

2 comments:

  1. Hi.
    How can I add a caption on the lightbox or the tittle that shows on the lightbox?
    Thank you in advance.

    ReplyDelete
    Replies
    1. 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 :)

      Delete

Every comment is appreciated but keep in mind that comments are moderated and may take some time to appear. All spam comments will be deleted, including mentioning your blog unless necessary. Thanks for understanding!

Request Post