How to Customize Blogger's Official Lightbox using CSS

Blogger 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. Well earlier when there was no option to configure this lightbox we found an easy script to disable that thing up but the blogger officially provided us a way to turn this lightbox on and off by navigating to blogger –> settings –> other.

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. But we found an easy way to customize the overall looks of lightbox by just using few line's of CSS code. So check below how its done. so for demo you can see below image how its background color is modified to white and opacity is also changed.

1. Open Blogger –> Template –> Edit HTML.
2. Now press Ctrl + F and search for ]]></b:skin> tag and add below right code above it.

   /* Background Color */
   .CSS_LIGHTBOX_BG_MASK{background-color:#fff!important;background-image:url(image-url-address)!important;filter:alpha(opacity=90)!important;opacity:0.8!important}

   /* Images Border */
   .CSS_LIGHTBOX_SCALED_IMAGE_IMG{-moz-border-radius:10px;-moz-box-shadow:0 0 5px #000;-webkit-border-radius:10px;-webkit-box-shadow:0 0 5px #000;border-radius:10px;box-shadow:0 0 5px #000;outline:0 solid #fff!important}

   /* Close Button */
   .CSS_LIGHTBOX_BTN_CLOSE{background:url(image-url-address) no-repeat!important;height:24px!important;width:24px!important}

   /* Thumbnails Bar Color */
   .CSS_LIGHTBOX_FILMSTRIP{background-color:#eaeaea!important}

   /* Text Color */
   .CSS_LIGHTBOX_ATTRIBUTION_INFO,.CSS_LIGHTBOX_ATTRIBUTION_LINK{color:#000!important}

   /* Index Info (number of images) */
   .CSS_LIGHTBOX_INDEX_INFO{color:#555!important}

3. Now I have mentioned what code changes what so if you have pretty good knowledge then you can add your own styles and change it further.
4. So that's it now just click on Save Template and refresh your blog and click on any image and see the new Lightbox Design.

Hope this clears all your lightbox customizing doubts and adds a new creative way in your blogging career, well a big thanks to helplogger for adding this creative tut on their website, if you find any difficulties do comment I would surely help you out.