How to Customize Image Lightbox in Blogger

Socialize It →

Tweet

6

Advertisements

Recently, we showed you how to disable image Lightbox, but we haven’t talked about a way to customize image Lightbox in blogger. Since, blogger is a flexible platform we can override the existing Lightbox Stylesheet to customize and make it look similar to your site. This gives you enough freedom to change the style of the Lightbox according to your desired needs. In this article, we will show you How to customize Image Lightbox in Blogger.

Before we start working with our tutorial, we have assembled two screenshots below demonstrating that how your Lightbox would appear before and after applying the customization. It would certainly look more elegant and polished.

Before:

After:

The very first thing you need to do is to login into your Google Account and go to Blogger ›› Template ›› Edit HTML. Now within the template coding search for the ]]></b:skin> tag and just above it paste the following piece of stylesheet coding. (Note: In the following CSS, we have added comments to help you identify that how you can customize different aspects of your Lightbox like text color, background color, close button and etc).

/* MBL Blogger Lightbox
———————————————– */

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

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

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

/* Thumbnails Bar Color */
.CSS_LIGHTBOX_FILMSTRIP {
background-color: #eaeaea !important;
border-top:1px solid #d2d2d2!important;
}

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

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

Congratulations: Save the template by pressing the orange “Save Template” button located right at the top of your screen. Now you have successfully customized your image Lightbox with just simple CSS technique.

We hope this tutorial may have helped you in learning How to customize an image light box in blogger. Do let us know if you are already using this technique? At MyBloggerLab, we have disabled Lightbox because it interferes while a person is reading a long tutorial. However, those who have wallpapers or portfolio sites can use it Freely. If you like this article, then share it with your friends on Facebook, Twitter and Google+.

Advertisements

About the Editorial Team

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).