How To Customize Blogger's Lightbox
For those of you lot who convey chosen to role the Blogger's Lightbox View for displaying pictures when clicking on them, you lot convey the selection to modify its agency inwards a whole dissimilar way. You volition live on 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 laissez passer on the sack customize the Blogger Lightbox solely on our taste.
Demo
Take a await at the screenshots below:
After adding our CSS code, the entire await of the modal window volition live on 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 create is to overwrite the default styles in addition to modify them alongside ours.
How to Change the Blogger's Lightbox Background in addition to Style
Step 1. Go to Template, click on the Edit HTML push clitoris (also click on the Proceed push clitoris if needed)
Step 2. Click anywhere within the code expanse in addition to search using CTRL + F the next tag:
Note:
- The text inwards light-green explains to which business office the code belongs to in addition to it doesn't require to live on modified
For example, the component below / * Background Color * / can modify the background color or fifty-fifty the LightBox background color alongside an epitome - for this, modify this job yesteryear replacing the ruby-red text alongside the url address of your image:
- To modify the icon for the unopen button, you lot convey to supersede the text inwards ruby-red from /* Close Button */ with the URL of your image. (you tin laissez passer on the sack host epitome 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, supersede the #555555 value from /* Index Info (number of images) */
- We tin laissez passer on the sack too modify the await of the edge some our pictures similar nosotros tin laissez passer on the sack brand them to a greater extent than round, add together a shadow, etc... precisely recall this is CSS3 in addition to older versions of Internet Explorer volition non exhibit whatever changes.
Step 4. Click on Save Template in addition to you're done!
Take a await at the screenshots below:
Before:
After:
After adding our CSS code, the entire await of the modal window volition live on 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 create is to overwrite the default styles in addition to modify them alongside ours.
How to Change the Blogger's Lightbox Background in addition to Style
Step 1. Go to Template, click on the Edit HTML push clitoris (also click on the Proceed push clitoris if needed)
Step 2. Click anywhere within the code expanse in addition to search using CTRL + F the next tag:
Step 3. Just higher upward the tag, add together the next code:
Note:
- The text inwards light-green explains to which business office the code belongs to in addition to it doesn't require to live on modified
For example, the component below / * Background Color * / can modify the background color or fifty-fifty the LightBox background color alongside an epitome - for this, modify this job yesteryear replacing the ruby-red text alongside 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 drib dead to a greater extent than transparent.
- To modify the icon for the unopen button, you lot convey to supersede the text inwards ruby-red from /* Close Button */ with the URL of your image. (you tin laissez passer on the sack host epitome 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, supersede the #555555 value from /* Index Info (number of images) */
- We tin laissez passer on the sack too modify the await of the edge some our pictures similar nosotros tin laissez passer on the sack brand them to a greater extent than round, add together a shadow, etc... precisely recall this is CSS3 in addition to older versions of Internet Explorer volition non exhibit whatever changes.
Step 4. Click on Save Template in addition to you're done!
