Are you bored of the basic black color background when pictures are shown in the Lightbox ? Yaa, who wouldn't be, think how fun it would be to have a different design lightbox. In this tutorial i will show you how to customize the lightbox.
A lightbox in Blogger is a box that displays image when clicked in Picture viewer mode. The only option we have for it is to turn it on or off and that's not fair for general bloggers who don't know CSS to style it on their own. So we are writing this tutorial.
Here's a style applied,so that you can understand what we are talking about.
Overview
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. With small CSS codes we can give the lightbox a brand new look as never before. I am sure other Bloggers will ask you 'how you did this' and you will refer them to this tutorial. At last who don't want to customize the classic lightbox.A lightbox in Blogger is a box that displays image when clicked in Picture viewer mode. The only option we have for it is to turn it on or off and that's not fair for general bloggers who don't know CSS to style it on their own. So we are writing this tutorial.
Here's a style applied,so that you can understand what we are talking about.
Before
After
The tutorial
>Before starting with the tutorial read the 'Overview' section for extra information on this post.
-> We are going to work with Template's CSS, so you need to Backup your Template
First i will explain what we will have to do, then we will start creating new designs.
The light box is a div element and classed so it's easy to customize with CSS, but here we will simply change colors of backgrounds, and not only we will change the background but also add some cool looking gradient background with the help of CSS3
This CSS is for changing the background of lightbox.
-> We are going to work with Template's CSS, so you need to Backup your Template
First i will explain what we will have to do, then we will start creating new designs.
The light box is a div element and classed so it's easy to customize with CSS, but here we will simply change colors of backgrounds, and not only we will change the background but also add some cool looking gradient background with the help of CSS3
This CSS is for changing the background of lightbox.
.CSS_LIGHTBOX_BG_MASK
{
background-color:gainsboro !important;
}
Use the CSS :
So now come to the point, how to make changes on the light box ? We need to add CSS to customize the lightbox and for that you need to know how to add CSS to blogger blogs[click to know]
Here's the CSS
.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 */
}
Line 3,4 and 7 change the color values to the values you want. Here you get a list of CSS colors http://w3schools.com/cssref/css_colorsfull.asp
If you aren't sure what to do then just leave it, we have a couples of readymade design for your Lightbox.
DESIGN #1
1. Dark Light, it's dark but polished with a gradient effect from the middle and the filmstrip at bottom is customized. First take a look at the design before applying the CSS.
So here's it's CSS - How to Add CSS in Blogger ?
.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 */
}
DESIGN #2
Here's a screenshot of what you are going to see
So here's it's CSS - How to Add CSS in Blogger ?
.CSS_LIGHTBOX_BG_MASK {
background-color: rgba(31, 124, 35, 0.28) !important;
background-image: -webkit-radial-gradient(top,rgba(255, 255, 255, 0.77),rgba(203, 255, 234, 0.6) ,rgba(34, 146, 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(81, 151, 95, 0.79) !important;
background-image: -webkit-linear-gradient(rgba(86, 139, 86, 0.36),rgba(21, 128, 21, 0),rgba(18, 102, 38, 0));
background-image: -moz-linear-gradient(rgba(86, 139, 86, 0.36),rgba(21, 128, 21, 0),rgba(18, 102, 38, 0));
background-image: -ms-linear-gradient(rgba(86, 139, 86, 0.36),rgba(21, 128, 21, 0),rgba(18, 102, 38, 0));
}
A pretty long CSS, but the results it will give is outstanding and attractive.
DESIGN #3
3. Glass pane, this design is looks beautiful with the light blue color and looks much like a glass pane.
This is the CSS
.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 */
}
This is the best of all.. !
Now apply your favorite design on your blog lightbox and see how your users react with the extraordinary designs, I am sure they will ask you 'How did you do that ?' and will be surprised.
Don't forget to Subscribe to us, check the right sidebar you will Email Newsletter gadget, just enter your email address and subscribe.
If you want more designs you can contact me on my email or Google+.
