Support » Plugin: WP jQuery Lightbox » Overlay opacity

Viewing 4 replies - 1 through 4 (of 4 total)
  • same problem to solve it without touching the plugin files?

    This should work, it’s in use on my dev website: Just cut and paste into your custom CSS file.

    /******************* BASIC LIGHTBOX SETTINGS ********************/
    /* Overlay sets the color and opacity of background behind the image. */
    #overlay {
    background-color: #fff !important;
    opacity: .95 !important; /* You can also add an opacity effect by setting the opacity anywhere from .1 to 1 */
    /* Set the color for the animated background behind the image which results in an 8px border. */
    #outerImageContainer {
    background-color: rgba(0, 0, 0, .1) !important; /* Use 'rgba(0, 0, 0, .0)' if you don't want a border, otherwise use any rgba or #color. */

    I just realized that my code won’t give you the same look if your #overlay is “stuck” at 1.

    Go to you plugin folder and open wp-jquery-lightbox then styles. Open lightbox.css and go to line 115 or search the page for #overlay. Check the code, it should be:

    	position: absolute;
    	top: 0;
    	left: 0;
    	z-index: 10090;
    	width: 100%;
    	height: 500px;
    	background-color: #000;
    	-moz-opacity: 0.6;
    	opacity: 0.6;
    	display: none;

    Make sure your default is what’s above. Then add the code I provided in last post to your custom CSS file. If you have to make a change, make sure you make the same change in lightbox.min.css file.

    Thank you Chris.
    However, your solution doesn’t work for me even though the #overlay CSS is at 0.6.

    The plugin javascript is adding some inline styles (that I couldn’t override via CSS) that is setting opacity to 1… :-/

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Overlay opacity’ is closed to new replies.