same problem here.how to solve it without touching the plugin files?
This should work, it’s in use on my dev website: http://site01.profoliolive.com/wp-gallery/ 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:
#overlay{
position: absolute;
top: 0;
left: 0;
z-index: 10090;
width: 100%;
height: 500px;
background-color: #000;
filter:alpha(opacity=60);
-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… :-/
