====== Customizing the FoxyBox (Thickbox) ======

===== Changing the overlay color or opacity =====

== v0.3.2+ ==
The page overlay is controlled by //two// different CSS declarations; one for Mac Firefox, and another for all other browsers. In order to change the color or opacity of the overlay, you'll need to override both declarations.
<code css>
.fc_tb_overlayMacFFBGHack {
  background: url(https://www.foxycart.com/v/0.3.1/images/macFFBgHack.png) repeat;
}
.fc_tb_overlayBG {
  background-color:#000;
  filter:alpha(opacity=75);
  -moz-opacity: 0.75;
  opacity: 0.75;
}
</code>
So if you wanted it to be 90% opaque and a white overlay instead of black, you'd change it to:
<code css>
.fc_tb_overlayMacFFBGHack {
  background: url(http://YOURDOMAIN.TLD/path/to/override/macFFBgHack.png) repeat;
}
.fc_tb_overlayBG {
  background-color:#fff;
  filter:alpha(opacity=90);
  -moz-opacity: 0.90;
  opacity: 0.90;
}
</code>
The ''macFFBgHack.png'' is simply an alpha transparent PNG image, but you'll need to [[http://www.ehow.com/how_2034277_make-png-photoshop.html|create your own]] if you want to change it from the default (75% opaque, black).

This CSS needs to //override// the default CSS files that you're loading directly from FoxyCart, so make sure it comes //after// the ''foxybox.css'' file in your HTML. You can put it inline or in your own stylesheets. If you aren't using our template caching, you'll need to [[..:getting_started:templates#doing_it_manually|manually cache the image]] so it's secure.