2
votes

https://friends-with-you.myshopify.com/

I'm trying to develop my first shopify theme. I'm trying to load a stylesheet which is hosted on another server, but the CSS is not loading. If I copy and paste that CSS directly into a file in the shopify theme, it works.

 <link type="text/css" rel="stylesheet" href="http://fwy.pagodabox.com/magic/themes/fwy/fwy.css" />

What am I doing wrong at the above URL, and why isn't the css loading?

thanks!

4

4 Answers

10
votes

Can you load your CSS file over both http and https? If so, change your tag to look like this:

<link type="text/css" rel="stylesheet" href="//fwy.pagodabox.com/magic/themes/fwy/fwy.css" />

That way whether a user visits using http://yourstore.com or https://yourstore.com, they'll get the stylesheet served using the protocol they're on (and you won't get any mixed content warnings).

A little more background: http://paulirish.com/2010/the-protocol-relative-url/

Under IE7 and IE8, using this in a <link> tag will result in your content being fetched twice.

7
votes

Change your link tag to use a secure URL:

<link type="text/css" rel="stylesheet" href="https://fwy.pagodabox.com/magic/themes/fwy/fwy.css" />
                                                 ^

The URL you're using now works fine on its own, but since you're browsing to the Shopify store over SSL, many web browsers are going to be hesitant to load the CSS over an unsecured connection.

I just checked and pagodabox serves the CSS file just fine over SSL.

0
votes

In normal HTML documents one can load stylesheets from anywhere, as long as they exist and you're able to load them by typing the URL in (which I can).

I see the page as two navigation bars with a logo on the left hand side. There are hover states with transitions to a colour background on each item. Although, when I loaded the page, Chrome warned me not to load supposedly insecure content. Before this is loaded I just see text in Times New Roman. I think this is you problem.

I use themes with WordPress and style-sheets come with them (mostly). I don't see why you couldn't just put the style-sheet in with the rest of the theme.

Overall, the answer is yes (normally) but in this case browsers may regard it as un-safe and therefore not load it.

0
votes

Yes you can! But it is faster to host the stylesheet on your server/where the other files reside. If you plan to include a stylesheet from elsewhere, you could run into problems of that server being down/busy and hence your theme will not display as required. As @Blieque mentioned, some browsers may question external content causing unnecessary warning popups to a user/user-agent.