Shopsite INCLUDE for CSS Needs <style> Opener?

[jontaco]

I have created a Shopsite INCLUDE for my CSS styles, just the way that Shopsite has instructed me.

The INCLUDE points to an external file in the shopsite-data/templates/includes directory.

However, I have discovered that I am still required to surround my styles with a closer and opener, even though it is external:

<style type="text/css">
CSS goes here
</style>

Doesn't this defeat the whole purpose of creating an external stylesheet? Shouldn't the Style opener and closer only be necessary for styles created in the header?

Thanks

[Jim]

The files in the shopsite-data/templates/includes directory will actually be added to the html of the page and not as an external reference. (the shopsite-data/templates/includes directory is in a password protected area so it can't be view from the web)

If you want to have external references you need to put the file in your store's output directory where the .html file are located.
ShopSite 10sp2 added a template area called "Publish files" under Merchandising > Custom Templates > Includes. Files put in this location will be "published" to a publish directory under your store's output directory. You can then use the external reference to those files in your templates.

[Kennedy]

I believe what jontaco was referring to is that when you do it the way shopsite wants it done, it puts your entire css file contents into the source of your pages. I want my style sheets to remain where they are, safely stored on my server not available to anyone who views my page source.

[BFChris]

Yes, the way Shopsite does it puts the entire content of the CSS styles on the page.

Jim's workaround resolves that issue and includes the CSS in an external file as is more "common."

Of course, even in an external stylesheet, a smart web surfer can still see the full contents of your CSS file. The more practical reason to use an external stylesheet is that it keeps common material in one place. Hence a web browser can cache it and not have to reload the information for every page visited. This makes pages smaller and faster to load.

[Jim]

A "publish" files directory was added to the templates area of ShopSite in version 10 sp1 and it allows using an html <link ...> type access to css and javascript files. Prior to that version it was only possible to included the css, which contained ShopSite template tags, in the template directly or the template tags would not be evaluated. If your css did not include ShopSite template tags you could also have manually placed a css file in your store's output directory and used the html <link ..> to reference it. With the addition of the "publish" template file it is now possible to inlcude ShopSite template tags in the css and still be able to reference the file through the html <link ...>. To do this add the css file to the Merchandising > Custom Templates > Includes >Publish area. Then when the store is published the file will be evaluated for ShopSite template tags and a copy will be placed in the store's output directory, in a folder called "publish". You can then link to the file in your html/template instead of having the code actually included in the page source. The link would be something like <link type="text/css" rel="stylesheet" href="http://mydomain.com/publish/flex-build.css">

[Kennedy]

Thank you much Jim, that was exactly what I was looking for.