Remove the white background-color from the fancybox-inner div

Question

Is there a way to remove the white background-color from the fancybox-inner div?

heres what i was trying..

$(".fancybox").fancybox({padding : 0, background: 'none'});

Answer 1

You can change it via an inline CSS declaration.

After you linked to the fancybox css file add this:

   .fancybox-skin {
      background-color: #ff0000; /* or whatever */
    }

The default values for that selector are:

.fancybox-skin {
    background: none repeat scroll 0 0 #F9F9F9;
    border-radius: 4px 4px 4px 4px;
    color: #444444;
    margin: 0;
    padding: 0;
    position: relative;
    text-shadow: none;
}

eventually, you can change the background-color within your script using the beforeShow callback option like:

$(".fancybox").fancybox({
 beforeShow: function(){
  $(".fancybox-skin").css("backgroundColor","transparent");
 }
});

NOTICE that I used transparent if you want to remove it (none is not a valid value in this case)