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.

Template Not Reading CSS

in Help edited May 2013
Hey all,

I'm in the process of redesigning my website and went to update the checkout and receipt templates and for some reason it's not reading the CSS.

To see what I mean, here's the URL for my checkout template:

However, after I cache it I'm getting this:

A similar problem is happening with the receipt template.

Original version:

Foxycart version:

What's going on?

  • Also let it be known that I'm using version 1.1 of the store.
  • fc_adamfc_adam FoxyCart Team

    It looks like the missing stylesheets are the ones you've left as .less stylesheets. If you convert those over to .css stylesheets our caching set up will cache them as expected. AutoMagiCache doesn't currently look for stylesheets apart from .css
  • Adam,

    Thanks for this advice. However, there are still some problems with the caching.

    I followed your advice and used Chris Perdocki's web developer tool to find the css that the browser was reading and copied and pasted that into a css file called checkout.css

    On my server the page renders fine, exactly as expected:

    However, when I go through the foxycart checkout process it only displays about halfway. It looks as though some of the css is being blocked.

    You can see here:

    Not sure why this is happening. Please edu-mah-cate.


  • brettbrett FoxyCart Team
    Hi @JonathanBechtel

    It definitely looks like your CSS isn't doing what you want it to do, which I think is because the page you're caching (checkout_template.html) is referencing the FoxyCart css with the ^^ placeholder in it. So when you're developing (ie. what we're seeing when we load that URL right now) isn't loading in the FoxyCart CSS at all.

    Try replacing that ^^store_domain^^ with your FoxyCart domain, and then make sure the CSS works as intended that way.

    Does that make sense?
  • brett,

    thanks for this response. however, I made those changes and it still doesn't seem to be working. here's what i have in my header right now:

    <title>Health Kismet Checkout Page</title>

    <!-- Le Meta Information -->
    <meta name="description" content="Checkout page for the Health Kismet online store">
    <meta name="keywords" content="Incredible Greens, Health Kismet, Health Kismet purchase page, secure checkout, health kismet secure data">
    <meta name="author" content="Jonathan Bechtel">
    <meta name="robots" content="noindex, nofollow">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">

    <!-- Le CSS -->
    <link rel="stylesheet" href=""; type="text/css" media="screen" charset="utf-8">
    <link rel="stylesheet" type="text/css" href="../css/app.css">
    <link rel="stylesheet" type="text/css" href="../css/foundation.min.css">
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../css/checkout.css">

    <!--Google Analytics Code-->
    <script type="text/javascript">
    var _gaq = _gaq || [];
    (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

    <!--Foxycart checkout code -->
    <script type="text/javascript" charset="utf-8">
    var shippingCountries = ["CA", "US"];
    var newCountries = [];
    for (var c = 0; c < shippingCountries.length; c++) {
    for (var i = 0; i < FC.locations.config.locations.length; i++) {
    if (FC.locations.config.locations[ i ].cc2 == shippingCountries[c]) {
    newCountries.push(FC.locations.config.countries[ i ]);
    FC.locations.config.countries = newCountries;

    <script type="text/javascript" charset="utf-8">
    if ( == -1 && typeof(fc_json.custom_fields) != "undefined") {
    if (fc_json.custom_fields.length > 0) {
    window.location.hash = fc_json.custom_fields.replace( /\&/g, '&' );

    <script type="text/javascript" charset="utf-8">
    function ga_tracker() {
    if (typeof(fc_json.custom_fields) != "undefined" && jQuery('#fc_payment_method_paypal').attr("checked") == true) {
    // setTimeout('return true;', 250); // TODO
    FC.checkout.overload('validateAndSubmit', 'ga_tracker', null);

    FWIW, the foxycart code shows up just fine, it's the other css that isn't displaying. any other advice?
  • fc_adamfc_adam FoxyCart Team

    So all of your CSS is indeed caching - but it's the images that aren't loading.

    I believe it's because you have a relative path within your image links, like "/css/../img/". Try changing that to remove the relative path (in that case it would be "/img/" and you should see it start working once you recache.

    We'll look on our side at the caching to see why it wasn't supporting that path.
  • Adam,

    I apologize for taking so long to follow up with this, but I wanted to let you know that I finally got around to making these changes and they thank you, sir!

    Muchos gracias.
  • fc_adamfc_adam FoxyCart Team

    Awesome - thanks for following up.
Sign In or Register to comment.