Today Word How To Customize Blogger's Official Lightbox

Blogger past times default added the Lightbox characteristic to add together to a greater extent than interactivity to images nosotros unremarkably upload inward our post, amongst their lightbox its much to a greater extent than easier to thought images past times using the arrow keys in addition to fifty-fifty the background is darker for getting to a greater extent than focus on the images instead of text added inward that post. But till at in i lawsuit nosotros produce non convey whatever alternative to customize the overall looks of lightbox past times changing its background color, changing the bar color containing all the images small-scale thumbnails in addition to much more.

For those of you lot who convey chosen to locomote the Blogger's Lightbox View instead of custom jquery lightbox for displaying pictures when clicking on them at in i lawsuit convey the alternative to alter its way inward a whole dissimilar way past times but using few line's of CSS code. You volition endure able to alter the dark color of the screen, the edge or shadow of the images in addition to the color of the thumbnails background. It agency nosotros tin sack customize the Blogger Lightbox only on our taste. After adding our CSS code, the entire hold back of the lightbox 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 closed button. Now but follow the given pace past times pace tutorial amongst images in addition to demo :

DEMO

How to Customize Blogger's Official Lightbox

Step 1. Login to your blogger draw organization human relationship > Dashboard > Template > Edit HTML

Step 2. Click anywhere within the code in addition to notice the next code ( locomote Ctrl + F ) :

 ]]></b:skin>

Step 3. Just higher upwards ]]></b:skin> add together next CSS :

    /* Background or Overlay*/

    .CSS_LIGHTBOX_BG_MASK {
    background-color: #000000 !important;
    background-image: url(background-image-url) !important;
    opacity: 0.8 !important;
    filter: alpha(opacity=90) !important;
    }


    /* Images Border in addition to Shadow */

    .CSS_LIGHTBOX_SCALED_IMAGE_IMG {
    outline: 0px corporation #fff !important;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0px 0px 5px #ffffff;
    -moz-box-shadow: 0px 0px 5px #ffffff;
    box-shadow: 0px 0px 5px #ffffff;
    }


    /* Close Button */

    .CSS_LIGHTBOX_BTN_CLOSE {
    background-image: url(button-image-url) !important;
    }


    /* Thumbnails Bar */

    .CSS_LIGHTBOX_FILMSTRIP {
    background-color: #000000 !important;
    }


    /* Index Info (number of images) */

    .CSS_LIGHTBOX_INDEX_INFO {
    color: #898989 !important;
    }

Step 4. Configuration of CSS:

- Replace background-image-url amongst the URL of the paradigm for background.
- Replace button-image-url  amongst the URL of the paradigm for closed button.
  For instance : background-image: url(https://www.image.com/image.jpg) !important;

  Related post: How to become paradigm URL

  Note : If you lot desire locomote default value for closed push in addition to therefore take away the CSS :

                 /* Close Button */

                 .CSS_LIGHTBOX_BTN_CLOSE {
                 background-image: url(button-image-url) !important;
                  }

- Adjust the value 0.8 ( from 0 to 1 ) to alter the transparency (Opacity) of background.

- Replace the value #xxxxxx to alter the color of item chemical constituent inward item department (Color Codes).

• For instance : Say if you lot desire to alter the background color of  Thumbnails bar to #ffffff, in addition to therefore alter the value #000000 to #ffffff under  /* Thumbnails Bar */ within background-color :
  
       /* Thumbnails Bar */
  
      .CSS_LIGHTBOX_FILMSTRIP {
      background-color: #ffffff !important;
      }


• Or Say if you lot desire alter the Text color of Index Info in addition to therefore alter the value #898989 amongst whatever other tell #dddddd nether /* Index Info (number of images) */ within color :
  
      /* Index Info (number of images) */
  
      .CSS_LIGHTBOX_INDEX_INFO {
      color: #dddddd !important;
      }

- Adjust the value 5  to alter the radius of paradigm (all iii values should endure same).

Note: Make certain your blogger lightbox is enabled - Settings > Posts, comments in addition to sharing > Showcase images amongst Lightbox


Step 5. Click Save template.

Great !

Refresh your weblog in addition to click on whatever paradigm to run across your ain customized blogger lightbox. For whatever issues related to higher upwards tutorial comment below. Stay Updated, Browse ! :)