Foxy Forum Status

We're no longer responding to questions via our forum, but we will keep it up for historical reasons. If you can't find the answer you're looking for, please visit our knowledge base or contact us. If there's enough interest in the future, we may bring the forum back.

Changing ColorBox Opacity? (v0.7.0)

pixelchutespixelchutes Member
in Bugs & Feature Requests edited September 2010
Is there currently a way to override/change the default 85% opacity for ColorBox when using foxycart.complete.js?

See 'opacity' config option:

I cannot seem to find a way to pass custom ColorBox options (similar to colorbox_width and colorbox_height variables) into the FoxyCart hosted version, or to establish ColorBox callbacks such as 'onComplete', etc.

Is our only option to host ColorBox ourselves or am I perhaps missing something obvious? I'm guessing that the answer is NOT to use ColorBox callbacks, but rather to use new "preprocess", "process", and "postprocess" methods:

If that is the case, then I cannot see a way to change "ColorBox Opacity" as it stands today without self-hosting :(

It would be nice if we were able to set our own ColorBox config (JSON) and have it merged, as necessary.

Any other suggestions?
  • brettbrett FoxyCart Team
    @pixelchutes, You shouldn't have to self-host anything. Take a look at the foxycart.complete.js and how it adds Colorbox support in the process() function. If you want to tweak that you can just use the foxycart.js (not the .complete.js) and set your own process() function.

    Does that make sense, or am I missing you?
  • Thanks, Brett. That definitely makes sense.
  • brettbrett FoxyCart Team
    Fwiw, I put the overridable configuration array on my todo list to explore. That could be an elegant and flexible solution.
  • Awesome news, brett! Love that idea :)

    If I recall correctly, foxycart.js did not originally contain the sitedomain and storedomain vars, which is one of the main reasons I stuck with foxycart.complete.js from the start, but it seems those have made it into both files. Sweet! I think both suggestions have their own benefits and definitely think supporting extending the base colorbox config when using foxycart.complete.js would be a nice-to-have feature.
  • brettbrett FoxyCart Team
    If I recall correctly, foxycart.js did not originally contain the sitedomain and storedomain vars, which is one of the main reasons I stuck with foxycart.complete.js from the start, but it seems those have made it into both files. Sweet!
    Yeah, with the move to the CDN we did some super fun hotness on those. Glad you noticed ;)
  • I would like to change the bottom image of the colorbox to 'continue shopping' text with an arrow.
    How/Where would I do that?
  • jaushmanjaushman Member
    edited September 2010

    We found the easiest way to do this was by uploading our own cart template and including a CSS file that gave instructions on how to change certain elements. I'm assuming you're calling foxycart.complete.js for your cart.

    The cart template we use is:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    <html xmlns="">;
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    	<link rel="stylesheet" href="/static/stylesheets/foxy_cart.css" type="text/css" media="screen" charset="utf-8"/>
    <div id="container2">

    I'll spare you the entire foxy_cart.css included above, but here are the lines we use to override the continue shopping, cart update, and cart checkout:
    .fc_cart_update, #continue_shopping, .fc_cart_notice {display: block; float: left; padding: 7px 13px; line-height: 14px;}
    .fc_cart_update {background: url(/static/images/icon_update-cart.gif) left center no-repeat;}
    #continue_shopping {background: url(/static/images/icon_continue-shopping.gif) left center no-repeat;}
    .fc_cart_checkout {display: block; float: left; width: 99px; height: 28px; font-size: 0; text-indent: -40000px; background: url(/static/images/btn_checkout.gif) top left no-repeat;}
    .fc_cart_checkout:hover {background-position: bottom left;}

    After that, tell Foxy where the template is, and cache it. Hope that helps.

    You can see the working example of this cart at
  • Yes, I am calling the foxycart.complete.js
    and already have my own CSS added and caching the template.

    Could I just delete the foxycart.complete.js
    update my CSS and re-cache?
  • Sorry for the confusion. In my haste I gave you some information from v060.

    On our site we include a css file we call theme.foxybox.css. That is a file we keep local that doesn't get put in the cart template. I updated styles for the cboxClose div like this:
    #cboxClose {
        display: block;
        padding: 0 12px;
        font-size: 0.9em;
        line-height: 24px;
        color: #c02e1b !important;
        left: 25px; bottom: 15px;
        background: url(/static/images/icon_continue-shopping.gif) left top no-repeat;
        height: 15px;
        width: 120px;
    #cboxClose:hover { background-position: left bottom; }

    That's how I replaced the background image for the button in v070 and gave it a hover state.
  • ok, I tried earlier to add the code to my CSS file to override it with !important - but it did not work (re-cached the template too)
    I'll try again without the !important and let you know.
  • For clarification...don't add that CSS to your cart template. You need to include it in the CSS for your site. Including it in the cart template CSS will not override the FoxyCart styles.
  • ooohh - noted.
  • lukeluke FoxyCart Team
    Thanks jaushman :)
Sign In or Register to comment.