How to make the "imageDataContainer" background-color transparent?

I would like to know too... subscribing

put this in your yourmodule_preprocess_page function:

$scripts['setting'][2]['lightbox2']['box_color'] = "transparent";

I tried to add this to my template.php file but it caused an error as the function is already declared in the lightbox2 module. Please can someone tell me how to implement this correctly?

function lightbox2_preprocess_page() {
$scripts['setting'][2]['lightbox2']['box_color'] = "transparent";
  }

I'm not sure how to get sroque's suggestion working... by the time you hit preprocess_page, the scripts block (which includes the box_color setting) is already rendered.

However, I got it working by simply setting the background color to transparent using JS:

$('#outerImageContainer').css('background-color','transparent');

Put that somewhere that executes on document ready, ie using $( function(){ ... } );

I hid the #imageDataContainer by setting "height: 0" on it, and "display: none" on #imageData.

Once that was all done, I was able to provide a nice transparent PNG background for my lightframe.

at last!

I inserted

$('#bottomNavClose').css('background-color','transparent');

into line 397 of lightbox.js and now works great.

thanks brian_c

It would be better if you put that somewhere into your own JS code (ie somewhere in your theme directory), instead of modifying the lightbox code. Otherwise your modification will get wiped out if anyone ever updates the lightbox module.

You basically want this code somewhere:

$(function(){
  $('#bottomNavClose').css('background-color','transparent');
});

You could either put that into one of your theme's JS files (ideally), or you could put it in an inline <script> block inside a template file.

What is the purpose of having element styles in the first place? I would have thought the css file would be the only thing controlling the style of it. And a css file (or any file) can be generated dynamically and overridden later for people who want 'transparent' backgrounds...

I love how lightbox lets me send in links (I use it for image source and author links) to be added into the box. But transparency seems a bit hard to get right now. I suppose I could simply hack the module and remove the packaging script so drush up doesn't kill my changes... oh well.

Not really possible until #592232: Make JS output of lightbox2 module themeable is put in place.

thanks brian_c this became very necessary in the new release of lightbox2 in which my core hack no longer works.

Don't forget that you can add !important to your stylesheet to override element styles.
Try:

#bottomNavClose {
  background-color: transparent !important;
}