The Foxy forums are on the move!

We're in the process of moving our forums over to a new system, and so these forums are now read-only.
If you have a question about your store in the meantime, please don't hesitate to reach out to us via email.

Colorbox CSS issues

sccr410sccr410 Member
in Bugs & Feature Requests edited March 2011

Since ColorBox is already used for the FoxyCart experience, we decided to use it also for the product image galleries and not add more JS/CSS just to use another image viewer. However, when you use it in this fashion we have found that the "close" link is right on top of the next/prev arrows.

I know this isn't necessarily a FoxyCart issue but we are using the ColorBox CSS provided by FoxyCart so thought maybe you could check it out.
  • Note: I removed our CSS file leaving just the Colorbox CSS and the issue still remained.
  • Using the CSS file from Colorbox's demo website ( everything appears as it should. So, from what I can tell, there is something you guys do in your custom colorbox CSS file to break things.
  • lancelance Member, Community Support Member
    @sccr410 -

    It seems that not everything is working as it should now that you have replaced the FoxyCart CSS file with the colorpowered CSS. It is fine when you view the mosaics in them modal box, but the cart does not display correctly.

    The FoxyCart CSS is intended to display the cart properly. If you need to use the modal box for another purpose, as well, you'll need to finesse some of the CSS. The FoxyCart CSS doesn't "break things," per se; rather, it was written for a purpose, and it achieves that purpose. The issue you are running up against now, though, is that you need to use the Colorbox for a secondary purpose, so you will need to do some customization work to move elements around via CSS overrides.

    If you need specific help, please feel free to post again.

    Hope that helps,
  • brettbrett FoxyCart Team
    I may be late to the party here, but I want to clarify that you definitely don't have to use the style1_fc CSS for Colorbox. That's only very slightly modified to have a "<< Continue Shopping" link at the bottom left instead of the "X" image at the bottom right. That's it though.

    I don't know that there's an easy way to apply two separate Colorbox themes on the same page, but you should be able to use any other Colorbox theme (which it looks like you're doing now) just fine.

    Also worth noting is that you can just change the URL to the Colorbox CSS on our CDN. We have all the 5 default Colorbox themes on there for you to use.
  • oskayoskay Member
    I'm even later to the party here-- just upgrading our templates to the current version. I've also come up against the "close" label on top of the navigation errors.

    Rather than changing the colorbox CSS-- (a pain to do so for all of the different colorbox themes, right?) --would it be possible to add a "continue shopping" link directly in the cart template?

    The little "x" to close the modal cart window in the corner isn't obtrusive, and from a GUI design perspective, I'd say that there is arguably some merit to leaving it there. It's faster for the brain to just click the little "x" to add the next item than to read and evaluate choices like "update," "checkout," and "return to shopping." This is similar to the Firefox save password options: Remember, Never for this site, not now and "x" (don't bug me!).
  • fc_adamfc_adam FoxyCart Team
    edited July 2011
    @oskay, ordinarily, you can just call parent.function() from within the iFrame to action javascript goodness in the parent. Unfortunately (and probably fortunately at the same time), you can't invoke javascript in a parent when the iFrame is on a different domain, so unfortunately that's not possible at this point.

    That said though, you can set it up so that you can style the close button differently between the FC cart modal, and a normal colorbox usage on the same page. Essentially, you just need to set up the close button to be unique on the two different approaches, and then get specific in your styles to match. This is what you'll be looking at:

    Above your FoxyCart includes, paste this:
    <script type="text/javascript" charset="utf-8">
    var colorbox_close = "<span id="fc_close"><< Continue Shopping</span>";

    And in any of your colorbox calls, you add the parameter for close like this:
    $("a[rel='example1']").colorbox({close:"<span id="my_close">Close</span>"});

    Then in your foxycart.css, instead of adding style to
    you'd style
    #cboxClose #fc_close
    #cboxClose #my_close
  • Is it possible to have two different popup in the same page using colorbox. among them one popup will not disable the parent screen. i.e click in the parent window without closing the colorbox popup window. and another popup which will disable the parent screen.

    if possible please suggest me with code.
  • bashabibashabi Member
    How can work on parent screen with colorbox popup at the same time?

    I am new to colorbox and jquery

    can some one help me with the coding of colorbox setup which will allow working on parent screen without closing the colorbox popup.

    my coding for colorbox popup is

    $.colorbox({ width: '900px', opacity:'0', height: '90%', iframe: true, open: true, overlayClose: false, escKey: false, href: '/e4/communication/send-communication.aspx?communicationtemplateid=' + id + '&applicationid=' + appids.slice(0, 19).toString() + '&istb=1&TB_iframe=true' });

    Please help
  • fc_adamfc_adam FoxyCart Team

    Sorry I missed your previous post on this! Even with an opacity of 0, the overlay is actually still present and preventing you from interacting with the parent page. You'd need to set the overlay element to display:none when the colorbox instance is opened that you want to allow interaction with the parent page for. You'd need to make that conditional though - as you still want to prevent it for the other page. To do that, I'd suggest making use of the open and close events for colorbox, and showing/hiding the overlay within those functions.
  • bashabibashabi Member
    Hi Adam

    Thanks for your reply.
    I have set the overlay settings to display none. Now I can click on the parent page. but when I click on parent page the colorbox closes automatically. Is there any way to prevent it. cause I actually want to play a youtube video on the colorbox popup and want to allow the user to work in main screen while watching the video. for this it would be best if the user can move the colorbox window beside the main page and continue work on main page.

    ( I could do that with simple java-script popup . But I have been asked to look at another developers code. and he used colorbox . changing it will require a huge change in the system and we can't afford that )

    Sorry to bother ... but I am new with Colorbox and Jquery. Will appreciate you help very much
  • fc_adamfc_adam FoxyCart Team

    Are you sure the overlay is set to display:none? I just tested it myself and was able to interact with the parent page when it was.

    Which FoxyCart store is this for? If you let us know which store we can perhaps have a closer look for you.
  • bashabibashabi Member
    #cboxOverlay{position: relative; width:100%; height:100%; display: none !important;}

    This is my CSS code. I can Now I can click on parent screen which I was not able to do before.
    But the problem is the when I click on any link in the parent window the colorbox closes. I want to prevent the closing of colorbox unless some click on close button on it. And I want to make it movable around the screen perhaps make it minimizable.

    i have tried to make the colorbox draggable but been unsuccessful.

    colorbox stops working with this draggable function.

    This is not for any foxy cart store. Its for a online recruitment portal
  • fc_adamfc_adam FoxyCart Team

    Ah ok - these forums are primarily for support of FoxyCart users - we just happen to also use colorbox for our modal cart set up.

    To answer your question, the modal window is disappearing because you're loading a whole new page by clicking a link. To maintain the modal across different pages, you'd need to load the new page using ajax instead of loading a whole new page. Unfortunately we probably won't be much help for you here - perhaps try posting through the support areas for Colorbox or on a site like
Sign In or Register to comment.