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.

problems with CSS customization to checkout template -- how to secure a CSS sheet?

imagoaimagoa Member
in General edited July 2012
Hi guys, another question. Previously, after watching the FC tutorial for "Advanced CSS Customization," I was able to successfully make a few simple changes that I wanted to the checkout template (font style, removing big checkout graphic, etc.).

However, when I had implemented these changes, I remember getting a message that the CSS stylesheet I was using to override the current FC CSS sheet was not secure (coming from my server). As a result, I would get a message every time I ran a test that the page was not secure, and would have to press a "load page anyway" button.

Now I've made some changes, and I can't even get that to happen. I believe I set things up the same exact way, but my CSS customizations are not taking effect. I also get no security error messages, either.

If I view the page source, the stylesheet shows up, but if I click it, I get an "SSL connection error."

So, I guess my first question is: any idea what I'm doing wrong?

And, secondly, how do I do this correctly so that I can upload my CSS sheet and have it show up as secure, with no security message for the user?

Thanks again, you guys have been unbelievably helpful!
Comments
  • imagoaimagoa Member
    Sorry, site can be seen here: https://imago-a.foxycart.com/checkout.php?ThisAction=customer_info&fcsid=9v460gvu9r71l3qvtcpusq2rr1

    Ignore some of the weird placement, I'm waiting to upload a more current CSS stylesheet until later today when (hopefully) I make all the FoxyCart stuff live.

    Thanks again!
  • lukeluke FoxyCart Team
    On the templates page in the FoxyCart admin, you'll need to add the URL of your full checkout template (which should have a link to your CSS file with it). Then you'll want to cache that page and save the template. That will rewrite all your css and javascript to host images from our server securely.

    Does that help?
  • imagoaimagoa Member
    Hi Luke, thanks for the response. However, as far as I can see, this is what I have done.

    I created a template page, with the custom CSS added at the bottom of the "head" section. I uploaded this to my server. I then cached this url in the FC template>checkout page. Then, I added the placeholders for the cart and checkout, and clicked "update template."

    Just went through all of these steps again, with same result.

    Am I missing something?
  • imagoaimagoa Member
    I was also just thinking that perhaps that last step of adding the placeholders and then updating the template again may have been causing an issue, so put the placeholders directly into my template page, recached and updated. No luck...
  • imagoaimagoa Member
    anyone?
  • sparkwebsparkweb Member, Integration Developer, FoxyShop, Order Desk
    It's better to just put the placeholders in your template and cache-then-save. So the problem is that you are re-caching and not seeing your CSS changes? It looks like it is pulling your style sheet. After re-caching, I would look at the source for the checkout page and see if your CSS changes are showing up there.
  • imagoaimagoa Member
    Hi Spark, thanks for the response! Yes, this is what I did. And as I noted above, the CSS stylesheet (http://imago-a.com/css/foxycart.css) does show up when I view source. However, if I click on it, I get an "SSL connection error."
  • imagoaimagoa Member
    Any thoughts what could be causing this?
  • sparkwebsparkweb Member, Integration Developer, FoxyShop, Order Desk
    edited July 2012
    I think you should put the full http before the link:
    <link rel="stylesheet" href="//www.imago-a.com/css/foxycart.css" type="text/css" media="screen" charset="utf-8" />
    

    I think the // start is confusing the cacher. Also, make sure you remove the FoxyCart includes (<!-- BEGIN FOXYCART FILES -->) and any jQuery includes.
  • imagoaimagoa Member
    Thanks, sparkweb, it was indeed the way the url was written. First I tried removing the "//" with no success, and then tried writing out the url in the style of "../css/foxycart.css", which finally worked.

    (fwiw, I tried with and without the FC includes, and neither seems to make any difference.)

    Really appreciate the help -- thanks again!
  • fc_adamfc_adam FoxyCart Team
    @imagoa,

    While it may not seem to make a difference, we generally suggest that you don't include the FoxyCart included files from the Sample Code section unless you specifically need them on your checkout (which you generally don't unless you're doing something advanced or super custom). They aren't actually needed for the cart, checkout or receipt templates.
Sign In or Register to comment.