Customize backgrounds colors of Lightbox in blogger with Css

Hey Friends Today i will teach you how to customize light box background color in blogger with Css.This is very helpful post for photography bloggers.

What is light box?

Whenever you are opening any image in blogger then it opens in lightbox and it default color is black but in this post I will teach you how to edit lightbox background.

There's no other customization for the lightbox other than turning it on or off, but believe me as a web designer it's not impossible for me to customize it.

1. Go to your Blogger dashboard
2. Now Click On Template Tab.
3. Now Click On Edit HTML Buton.
4. Find  ]]></b:skin>
5. Paste Any of Below Css Code Above It.

Style 1

To Add this style paste below css code there.

.CSS_LIGHTBOX_BG_MASK
{
background-color:gainsboro !important;
background-image:-webkit-radial-gradient(center,rgba(255, 255, 255, 0.83),rgba(63, 65, 63, 0.76),rgba(0, 0, 0, 0.87)) !important;
background-image:-moz-radial-gradient(center,rgba(255, 255, 255, 0.83),rgba(63, 65, 63, 0.76),rgba(0, 0, 0, 0.87)) !important;
}
.CSS_LIGHTBOX_FILMSTRIP {
background-color: rgba(0, 0, 0, 0.411) !important; /* The bottom bar */
}

Style 2

To Add this style paste below css code there.

.CSS_LIGHTBOX_BG_MASK
{
background-color:gainsboro !important;
background-image:-webkit-radial-gradient(center,rgba(255, 255, 255, 0.83),rgba(63, 65, 63, 0.76),rgba(0, 0, 0, 0.87)) !important;
}
.CSS_LIGHTBOX_FILMSTRIP {
background-color: #F0F8FF !important; /* The bottom bar */
}

Style 3

To Add this style paste below css code there.

.CSS_LIGHTBOX_BG_MASK {
background-color: rgba(14, 97, 143, 0.28) !important;
background-image: -webkit-radial-gradient(top,rgba(221, 235, 255, 0.77),rgba(207, 230, 255, 0.6) ,rgba(83, 83, 83, 0.42)) !important;
background-image: -moz-radial-gradient(top,rgba(255, 255, 255, 0.77),rgba(203, 255, 234, 0.6) ,rgba(34, 146, 83, 0.42)) !important;
background-image: -ms-radial-gradient(top,rgba(255, 255, 255, 0.77),rgba(203, 255, 234, 0.6) ,rgba(34, 146, 83, 0.42)) !important;
}
.CSS_LIGHTBOX_FILMSTRIP {
background-color: rgba(101, 122, 231, 0.43) !important;
background-position: 10px 0px;
background-size: 115px 60px;
background-image: -webkit-linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent);
background-image: -moz-linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent);
background-image: -ms-linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent);
-webkit-transition:all 0.6s ease-in-out;
-moz-transition:all 0.6s ease-in-out;
-o-transition:all 0.6s ease-in-out;
-ms-transition:all 0.6s ease-in-out;
transition:all 0.6s ease-in-out;
}
.CSS_LIGHTBOX_FILMSTRIP:hover {
background-color: #7081DA !important;
}
.CSS_LIGHTBOX_FILMSTRIP {
background-color: #A04343; /* The bottom bar */
}

All Credits Go To Deepak Kamat (Author Of Our Blog)

Comment if You Like This Post