Ever since I discovered the "
CSS as document" method, and
solved problems with IE, I have totally dropped the "old" one (with static CSS files in the assets/templates/ folder). You had read about "
server side css", well MODx is the only CMS who has it bundled
!
I had posted a while ago a tutorial in french about this method. After several request, here is a english translation :
Pre-requisites :
Using the CSS as MODx document method implies that you have friendly URLs enabled and that "Use friendly aliases" and "Use friendly alias path" is set to true ( See Administration > System Configuration > Friendly urls settings).
1. In the manager, create a folder to store your stylesheets, not required but it’s cleaner. For the sake of this tutorial, this folder will be named "css".
2. In this folder, create a new document (Content > New Document), and in "Uses template" select "(blank)" and go to
Page settings > Content type, select "text/css"
3. Insert your CSS there, or better yet use the power of chunk to build modular CSS, insert chunks containing your styles (for instance I often use a "layout" chunk, an "inline" styles chunk, etc...).
4. Edit the document’s alias, appending .css at the end, it will override the default .html extension (not necessary, it will work without this).
5. Edit your template :
Usually, a template will include a call to the stylesheet with the "link method", e.g :
<link rel="stylesheet" href="assets/templates/default/site.css" type="text/css" media="screen" />
We are going to use the alternate @import rule (for some reason, the link method doesn’t work with IE when using the CSS as MODx document method). We’ll also use the stylesheet’s alias and NOT the [~xx~] syntax where xx is the stylesheet’s ID (again, for some reason doesn’t work with IE).
<style type="text/css">
@import url('css/my_style_sheet.css'); /* or whatever css_folder_name/my_style_sheet.css */
</style>.
6. Edit your .htaccess : To ensure IE compatibility, you have to edit your .htaccess, uncommenting the following lines :
BrowserMatch "MSIE" brokenvary=1
BrowserMatch "Mozilla/4.[0-9]{2}" brokenvary=1
BrowserMatch "Opera" !brokenvary
SetEnvIf brokenvary 1 force-no-vary
You’re set !
You no longer have to use static stylesheets
Your CSS can include chunks and even snippets (wanna randomize a background image for instance, now it should be easy... but other things could be imagined... it’s up to coders to come up with snippet which can be used in the context of CSS). I didn’t test template variables,
but since document are parsed no matter what their document type is, should work also -> Edit :
TVs won’t work with CSS. See
Susan’s explanation below
Thanks to Susan Ottwell for the @import rule instead of good old [~id~] thing.
Thanks to Eastbind for the .htaccess.
Thanks to all who helped me solve the IE problems !
MODX Staff
☆ A M B ☆
