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.

CSS not "taking"

leftwaveleftwave Member
in Bugs & Feature Requests edited October 2009
first off a huge thank you to brett for being so patient with my learning process with foxycart. my persistance has paid off and i finally understand the customization process enough to have taken on a new project!

here it is:

click on the "add to bag" button to get to the checkout page. my problem is as follows....

i have used my own css file called foxystyles.css to change the look of the checkout page. for some reason, even though i've changed the css to make certain changes to the checkout page, they are just not showing up. the changes are as follows:

1. on step 1, the "continue" button has a blank hover state
2. on step 2, the dashed line positioning for "use a different shipping address" will not move
3. on step 4, the positioning of everything is totally messed up despite me fixing this in the css

so my question is: are these things somehow uneditable, or do i just not know how to properly edit them???

  • Your styles are being applied, but there are other things at play. If you havent already, get the Firebug extension for Firefox, it gives you the ability to focus on one element and see whats being applied.

    1) A background-position of right -20px is being applied on hover too. Your image is there, just 20px up. (This is being applied from the default FoxyCart styles, as they have combined the two states of the image into one image)

    2) Add a "border:none;" or possibly "border:none !important;" to "#fc_use_different_address"

    3) What exactly isnt lined up properly? I can see that the two dotted lines aren't great there. The dotted line above the "confirm my order" button is caused by its padding being overwritten to be 0. The border through the save my credit cart bit seems to be caused by the float left to "#fc_checkout_container span.fc_input_checkbox_text".

    Like I said, Firebug is a life saver when it comes to debugging css, and building websites in general :)
  • hi bjbk,

    thanks for your tips. actually, i've tried using firebug, but much prefer this:
    it pretty much does the same thing.

    so, i'm able to see my css edits in realtime using stylizer (or firebug), yet when i upload them they still don't seem to show up in my browser!! help!

    thanks again,
  • Are you updating your checkout template after you upload any changes?
  • yup! i've tried re-caching and re-updating my checkout template, clearing the image cache, clearing my browser cache and doing hard refreshes on my browser.... still no changes!
  • Are you seeing the changes you are making to your css on your website? (eg are you updating the file here:, can you see those updates there?)
  • yup, they are there :)
    ...which is why i'm so confused!
  • bjbkbjbk Member
    edited October 2009
    You might have to get brett to take a look at this one. Seems to be not updating the css in the automagicached checkout template. Have you tried editing your other style sheet to see if that updates?
  • brettbrett FoxyCart Team
    Hi Stacy.
    Great work as always. I'd never heard of Stylizer. Looks really interesting. I always use the live CSS editing (by hand) with the Web Developer Toolbar, and pair it with Firebug. Anyway.

    1) In your styles I don't think you actually have anything to override the default styles:
    #fc_checkout_container a.fc_link_nav:hover, #fc_cart_container a.fc_link_nav:hover, #fc_receipt_links a.fc_link_nav:hover {
    background-position:right -20px;
    You don't have any :hover state in your stylesheet, so there's no reason it wouldn't behave as it is (moving the bg image 20px up and out of sight).

    2) Same thing here. I'm not seeing anything for #fc_use_different_address anywhere?
    Try something like this in your CSS just to see it have an effect:
    #fc_checkout_container #fc_use_different_address {
    border:2px solid blue !important;
      margin-top:300px !important;
      padding-top:30px !important;

    3) What CSS should be fixing it? Let us know the CSS that _should_ be working and we'll be able to help figure out why it isn't (hopefully ;)
  • Brett, if you compare the styles from the checkout page and those from the original file, there are css styles missing.
  • brettbrett FoxyCart Team
    I didn't see any when I looked. Specifically, there were no :hover declarations in the original file that had any background positioning. There are now, but the checkout template hasn't been recached.

    That said, there are some issues with the Shadowbox code that's been cached. Stacy, could you remove all the shadowbox CSS and JS calls on your checkout template that you're caching? I'm not sure it'll help with the CSS, but it'll prevent the js errors.

    Let us know how if that helps.
  • YES!!!!! Great suggestion Brett. I don't know why that worked, but it did :)
    Checkout is styled perfectly now and the CSS has "taken".
  • PS: definitely check out Stylizer, it is SO awesome
  • brettbrett FoxyCart Team
    Are you using Stylizer on Mac or Windows? Just curious. Definitely looks interesting.
Sign In or Register to comment.