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 ordinarily upload inward our post, amongst their lightbox its much to a greater extent than easier to persuasion images past times using the arrow keys together with 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 directly nosotros create non bring whatever alternative to customize the overall looks of lightbox past times changing its background color, changing the bar color containing all the images modest thumbnails together with much more.

For those of y'all who bring chosen to purpose the Blogger's Lightbox View instead of custom jquery lightbox for displaying pictures when clicking on them directly bring the alternative to alter its mode inward a whole dissimilar way past times merely using few line's of CSS code. You volition live on able to alter the dark color of the screen, the edge or shadow of the images together with the color of the thumbnails background. It way nosotros tin customize the Blogger Lightbox solely on our taste. After adding our CSS code, the entire await of the lightbox window volition live on changed - the background color, the bar showing the thumbnails, the edge of images, the text within it, transparency together with the closed button. Now merely follow the given pace past times pace tutorial amongst images together with demo :

DEMO

How to Customize Blogger's Official Lightbox

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

Step 2. Click anywhere within the code together with abide by the next code ( purpose Ctrl + F ) :

]]></b:skin>

Step 3. Just inward a higher house ]]></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 together with Shadow */

    .CSS_LIGHTBOX_SCALED_IMAGE_IMG {
    outline: 0px enterprise #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 epitome for background.
- Replace button-image-url amongst the URL of the epitome for closed button.
For instance : background-image: url(https://www.image.com/image.jpg) !important;

Related post: How to perish epitome URL

Note : If y'all desire purpose default value for closed push clit thence 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 one ) to alter the transparency (Opacity) of background.

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

For instance : Say if y'all desire to alter the background color of Thumbnails bar to #ffffff, thence alter the value #000000 to #ffffff under /* Thumbnails Bar */ within background-color :

     /* Thumbnails Bar */

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

Or Say if y'all desire alter the Text color of Index Info thence 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 epitome (all iii values should live on same).

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

Step 5. Click Save template.

Great !

Refresh your spider web log together with click on whatever epitome to meet your ain customized blogger lightbox. For whatever issues related to inward a higher house tutorial comment below. Stay Updated, Browse ! :)