Documentation You are here: start » v » 0.6.0 » design » foxybox

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.

.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;
}

So if you wanted it to be 90% opaque and a white overlay instead of black, you'd change it to:

.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;
}

The macFFBgHack.png is simply an alpha transparent PNG image, but you'll need to 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 manually cache the image so it's secure.

Site Tools