editing the "

leftwaveleftwave Member
in Help edited August 2008
first, thanks to brett and kris for all of their help and patience with me as i've slowly figured out the magic that is foxycart.

i'm currently stuck trying to modify the graphic of the "<< continue shipping" button on the cart page. you can see it by clicking the "add to bag" button on this page:
http://leftwave.com/indevelopment/goodiessuburban/products/butterfly.html

i'm using firebug to edit the CSS of the cart, but this "<< continue shipping" button doesn't show up in the frame. how do i change it??
Comments
  • flinx777flinx777 Member
    edited August 2008
    Hey Stacie,

    To change the "Continue Shopping" button, what I did was to create a stylesheet that overrides the Foxy Cart default button CSS value. The ID in the stylesheet that controls the value for that button is: #fc_tb_closeWindowButtonBot. So what I did was create a separate stylesheet (named foxycart.css ... name yours whatever you want) and then I put the stylesheet after the foxycart files that are in the head tags. For the #fc_tb_closeWindowButtonBot CSS value, I put the following:
    #fc_tb_closeWindowButtonBot {
    background-image:url(http://gpc.my619.com/assets/images/foxycart/cart-continue-shopping.jpg);
    }
    

    As you can see, I uploaded a file to replace the default "Continue Shopping" button with button I designed. You can see a live example here:

    http://gpc.my619.com/solar-forced-air-heaters.html

    Hope that helps!
  • brettbrett FoxyCart Team
    Thanks Kris for helping.
    I'll add a quick note about why this item is more difficult to style:
    The "continue shopping" and "x" links are NOT in the cart iframe, but rather in your site. So you need to override them in a different place.

    As you mentioned, Stacie, they're not in the iframe. They're styled by
    <link rel="stylesheet" href="https://internal1.foxycart.com/files/foxybox.css"; type="text/css" media="screen" charset="utf-8" />
    
    on your actual page (and not your cart template), so you'll need to override them in the right place.

    This question comes up a lot, as it's kind of weird how they're split out.
  • thanks kris & brett. this idea makes sense to me, but i must not be implementing it properly because the old button keeps coming up. i must be putting this in the wrong spot:

    #fc_tb_closeWindowButtonBot {
    background-image:url(http://www.goodiessuburban.com/images/cart/cart-continue.gif);
    }

    i'm putting it in a new CSS file that i link to from my cart template page after the other CSS files. i re-cached the html page and updated the template, but the new image won't show up. what am i doing wrong? step-by-step instructions would reeeally help :)
  • brettbrett FoxyCart Team
    Yeah, it's in the wrong place.
    You have it in your cart template (in goodiessuburban/foxycart2.css), but it needs to be in your main page template (styles.css).

    It's hard to explain, but once you get it, hopefully it'll make a lot of sense. The CSS from the cart template can't style things outside of the cart page itself. To understand what _is_ and what _isn't_ the cart template, right click on the cart and say "This Frame -> Open Frame in New Tab" (in Firefox).

    That'll show the cart template, all by itself. Notice that the "continue shopping" and the "x" are _not_ in the template, so they can't be styled by CSS on that page. (Those links are generated dynamically by javascript, and are part of the main, parent page.)

    Make more sense now?
  • Hi Brett,

    Sorry for the slow reply. I haven't had a chance to work on this.

    I totally get what you're saying about the "x" and the "continue shopping" being outside of the cart template.

    However, I pasted the following CSS into my styles.css file and it's still loading the old "continue shopping" button... even after I cleared my cache.

    #fc_tb_closeWindowButtonBot {
    background-image:url(http://www.goodiessuburban.com/images/cart/cart-continue.gif);
    }

    WHAT'S GOING ON?
  • brettbrett FoxyCart Team
    The issue is that you're calling your styles.css _before_ you're calling the theme.foxybox.css file.

    Some solutions would be:
    - Call the theme.foxybox.css before your styles.css
    - Make your declarations more _specific_, like body #my_id, which will override the #my_id by specificity
    - Make your declarations !important, which should override it.

    That should fix your problem.
  • ARRRGGGHHHH!!!!!!!

    i just rearranged my styles.css like you explained brett and i re-uploaded and re-cached my cart template and now not only does the new image not load, but all of the pretty color changes that i made on the grey buttons somehow are gone!! what now?!
  • brettbrett FoxyCart Team
    Move them back ;)

    For real though, I think we're getting you confused. There are TWO separate things you're dealing with.

    1. The "X" and "Continue Shopping" links. These are handled NOT on the cart template, but on your regular site template. When I mentioned to call your own styles.css _after_ the theme.foxybox.css, that's what we're talking about.

    2. The CART: You had this working, but you switched the order so now your own CSS is _before_ the FoxyCart default CSS. So now your CSS comes before the default CSS, so yours is being overridden.

    So...

    You need to call the FoxyCart "default" CSS _before_ your own custom CSS. If you're calling something at example.foxycart.com (yourdomain.foxycart.com, etc.), that needs to come BEFORE any of your own CSS.

    Does that make sense? You still have your own CSS being called before the FoxyCart CSS, which is the root of your problem.
  • brett! i consider myself a fairly intelligent and logical person, but i just don't understand what the heck you're talking about.

    i've somehow ended up with 6 different CSS stylesheets getting called in my checkout template, and another 2 more in my cart template. i can't keep straight what's what. i know you don't formally offer phone support, but if there's any way you can call me and i can seriously pay you for your time, i would love to sort this out once and for all and actually want to use foxycart for my other projects. please don't have me want to look into paypal "add to cart" buttons. my # is 808-927-1443

    if that's just not possible, then can you please describe step by step by step how to proceed. oh, you can skip the step where i get my pretty colors back. i rearranged the CSS calls and that is working again. yay!
  • brettbrett FoxyCart Team
    Haha, this is definitely one of the more tricky things with the CSS. Don't go back to PayPal buttons ;)

    Ok, let's re-examine this. I promise it's not as tricky as I might be making it sound.

    You have this:
    <link href="../styles.css" rel="stylesheet" type="text/css">
    <!-- BEGIN FOXYCART FILES -->
    <script src="https://example.foxycart.com/files/foxycart_includes.js"; type="text/javascript" charset="utf-8"></script>
    
    <link rel="stylesheet" href="https://example.foxycart.com/files/foxybox.css"; type="text/css" media="screen" charset="utf-8" />
    <link rel="stylesheet" href="https://example.foxycart.com/themes/standard/theme.foxybox.css"; type="text/css" media="screen" charset="utf-8" />
    <!-- END FOXYCART FILES -->
    

    You need this:
    <!-- BEGIN FOXYCART FILES -->
    <script src="https://example.foxycart.com/files/foxycart_includes.js"; type="text/javascript" charset="utf-8"></script>
    
    <link rel="stylesheet" href="https://example.foxycart.com/files/foxybox.css"; type="text/css" media="screen" charset="utf-8" />
    <link rel="stylesheet" href="https://example.foxycart.com/themes/standard/theme.foxybox.css"; type="text/css" media="screen" charset="utf-8" />
    <!-- END FOXYCART FILES -->
    <link href="../styles.css" rel="stylesheet" type="text/css">
    

    That's it! (Replace "example" with your own subdomain though.) See how your own styles.css is coming before? It needs to come after. When all other things are equal, if you say:
    p {
    font-size:11px;
    }
    p {
    font-size:18px;
    }
    
    the second declaration will be applied, because it comes later. All you need to do is reverse the order that you're calling your CSS in and you should be fine.

    Right? If that's not the issue let me know.

    (As far as phone support goes: I'd rather put the solution here on the forum so others can benefit from it, but if you're still having issues with this we can discuss further.)
  • oh wow brett, i feel like SUCH an idiot!! not only was i putting the CSS in the wrong order, but i was in the wrong file all together. DUR!!! now i've got it all sorted out:
    http://leftwave.com/indevelopment/goodiessuburban/products/butterfly.html

    and yes, good point about the phone support... if infact there is someone who is as idiotic as me (sorry!)

    as i'm sure you guessed, i have a new question. since it's on a totally new subject now, i will create a new post to help with any future idiots like me :)

    thanks again for your patience with me!!!
  • brettbrett FoxyCart Team
    Haha no problem ;)
    I know how far you've come with your CSS skills in the past few months and I'm amazed! So I'm happy to help clarify things for you.
  • Everything I know, I owe to you :)
    Thanks again!!!
Sign In or Register to comment.