How To Customize Icon Lightbox Inward Blogger

Recently, nosotros showed you lot how to disable icon Lightbox, but nosotros haven’t talked virtually a agency to customize icon Lightbox inwards blogger. Since, blogger is a flexible platform nosotros tin override the existing Lightbox Stylesheet to customize in addition to arrive hold off similar to your site. This gives you lot plenty liberty to modify the agency of the Lightbox according to your desired needs. In this article, nosotros volition present you lot How to customize Image Lightbox inwards Blogger.

Before nosotros commence working amongst our tutorial, nosotros convey assembled ii screenshots below demonstrating that how your Lightbox would seem earlier in addition to afterward applying the customization. It would sure hold off to a greater extent than elegant in addition to polished.

Before:

After:

The real root matter you lot postulate to create is to login into your Google Account in addition to become to Blogger ›› Template ›› Edit HTML. Now inside the template coding search for the ]]></b:skin> tag in addition to merely to a higher house it glue the next slice of stylesheet coding. (Note: In the next CSS, nosotros convey added comments to tending you lot lay that how you lot tin customize unlike aspects of your Lightbox similar text color, background color, closed push in addition to 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 enterprise #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 enterprise #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 past times pressing the orangish “Save Template” push located correct at the exceed of your screen. Now you lot convey successfully customized your icon Lightbox amongst merely elementary CSS technique.

We promise this tutorial may convey helped you lot inwards learning How to customize an icon calorie-free box inwards blogger. Do allow us know if you lot are already using this technique? At MyBloggerLab, nosotros convey disabled Lightbox because it interferes piece a someone is reading a long tutorial. However, those who convey wallpapers or portfolio sites tin role it Freely. If you lot similar this article, in addition to hence portion it amongst your friends on Facebook, Twitter in addition to Google+.