How To Customize Blogger's Lightbox

For those of you lot who convey chosen to purpose the Blogger's Lightbox View for displaying pictures when clicking on them, you lot convey the selection to modify its mode inwards a whole unlike way. You volition endure able to modify the dark color of the screen, the edge or shadow of the images in addition to the color of the thumbnails background. We tin customize the Blogger Lightbox exclusively on our taste.

Demo

Take a await at the screenshots below:

Before:

After:

After adding our CSS code, the entire await of the modal window volition endure changed: the background color, the bar showing the thumbnails, the edge of images, the text within it, transparency in addition to the unopen button.

All nosotros convey to produce is to overwrite the default styles in addition to modify them amongst ours.

How to Change the Blogger's Lightbox Background in addition to Style

Step 1. Go to Template, click on the Edit HTML push (also click on the Proceed push if needed)

Step 2. Click anywhere within the code expanse in addition to search using CTRL + F the next tag:

</head>

Step 3. Just higher upwards the </head> tag, add together the next code:

<style>
/* 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 corporation #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) no-repeat !important;
width: 24px !important;
height: 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: #555555 !important;
}
</style>

Note:
- The text inwards dark-green explains to which business office the code belongs to in addition to it doesn't take away to endure modified

For example, the division below / * Background Color * / can modify the background color or fifty-fifty the LightBox background color amongst an prototype - for this, modify this draw of piece of occupation past times replacing the ruby text amongst the url address of your image:

background-image: url(image-url) !important;

- Below is the opacity: if you lot add together a lower value ( 0.8 ) the background volition larn to a greater extent than transparent.

- To modify the icon for the unopen button, you lot convey to supervene upon the text inwards ruby from /* Close Button */ with the URL of your image. (you tin host prototype at tinypic or upload it into a blogger draft in addition to and then Copy the Link Location - read this tutorial for to a greater extent than info)
- To modify the text color of images, supervene upon the #555555 value from /* Index Info (number of images) */

- We tin likewise modify the await of the edge approximately our pictures similar nosotros tin brand them to a greater extent than round, add together a shadow, etc... only hollo upwards this is CSS3 in addition to older versions of Internet Explorer volition non present whatever changes.

Step 4. Click on Save Template in addition to you're done!

Share this post