I've been working with the ModX Revolution manager, and was wondering if I can turn my CSS into ModX Resources rather than files. I'd also like to utilize Templates and their variables. Is that possible? What are the drawbacks of doing so? Are there any advantages (aside from the ones I think below)?
The reason I would prefer this is that I use several CSS pages with the @import statement to object orient my CSS a little bit better. If I could do this directly in ModX, it would save me uploads and syncing.
In previous versions of ModX (Evo and Revo), you used to have to go through tricks. Now with 2.2.2pl, it is possible with very few tricks. The information to do this is sparse and inaccurate any more. Here's how you do it:
Create a new Template. I named mine CSS Stylesheet. (Simple as that)
For the content, simply put [[*content]].
Create a new resource. Name it whatever you would like.
Add your alias. Make sure you do not add the .css at the end. ModX should do this for you.
Now, make sure your new page is published. You may also want to hide from menus.
Add your CSS code. No funny tricks... Just copy and paste it like you normally would.
Simply navigate directly to your new page as if it were an html document. Don't forget the .css instead of .html. If you see the CSS code, then you've succeeded.
This one is the tricky part. You won't be able to use the <link rel=></link>.
Simply go to your <head> element. Add the following code:
<style type="text/css">
@import url("");
</style>
Test the
Inside the url("");, just place the url to your new resource.
Aside from the saving the uploading and downloading, you can now edit your CSS using any of the ModX tools. Additionally there are a few other perks:
If you're like me, file names are useful, but often not descriptive enough. You can name them whatever you like! Its the alias that is important anyway.
Handy tool-tips based on the Description of the resource.
You may also utilize the Summary of the resource for other things. I place the important file comments in here, so that my CSS is smaller.
Template Variables! In previous versions of ModX, you couldn't have a Template for your CSS.
Chunks and Snippets, if you so desire. You have to write them as plain text, rather than HTML, but it's still useful if you are creative.
Your CSS is now shared between all of your Contexts if you like. This is due to the nature of the @import statement.
You can edit your CSS from any computer. You may even set up your front-end for the editing.
There's always trade-offs, and with this technique it is no different. A lot depends on how you have things set up for your site.
Your saving and editing is based on your server performance.
Your URL requests will be based even more on your ModX performance. For some, adding these extra resources could slow things down. Often, its not enough to worry about, but its worth mentioning.
It's now managed by the database, so its subject to database security. This can be good or bad. Even it is good, it probably will require extra set up from you.
Your Templates, Snippets and Plugins can break your CSS, if programmed incorrectly. This is something you really want to be careful with.
Each CSS request is treated as a separate request by ModX. The Template Variables and plugins do not apply to the web page you are viewing. They apply to the CSS content.
The whole process takes about 15 minutes. And ultimately, it's even faster to revert back if it doesn't work for you (just don't delete the raw files until you are sure). The added functionality is worth it to me.