Here’s a quick tip about one of the great built in features with MODx. Let’s say that you have a few pages that need some different code in the header of a site. Maybe it is some custom CSS or Javascript. With MODx’s powerful output filters, you can do some pretty cool stuff that will make your like much easier.
Let’s say that you have a part in your template that looks like this:
1 2 3 4 5 6 7 8 | <!DOCTYPE HTML>
<html lang='en'>
<head>
<title>[[*pagetitle]] | [[++site_url]]</title>
<meta charset="utf-8">
<base href="[[++site_url]]" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
</head> |
This is a super basic HTML5 head area. There’s definitely some more meta tags we’d want in there, and I’m including the google hosted jQuery, but this will work for now. Anyway, we want to put in some CSS code in there that only gets applied on certain pages. Here’s one way to do that pretty simply:
First, let’s add that style block to your template.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!DOCTYPE HTML>
<html lang='en'>
<head>
<title>[[*pagetitle]] | [[++site_url]]</title>
<meta charset="utf-8">
<base href="[[++site_url]]" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<style type='text/css'>
[[*Inline Style]]
</style>
</head> |
Now we can add a Template Variable named “Inline Style” to the system. I like to use textareas for these kinds of things so that you have a little bit more room to type in your new CSS rules. Don’t forget to allow this template to access this Template Variable.
Each page using this template will now be able to have some custom CSS injected into the head, through the use of this Template Variable. Now, let’s say that you want to have a default bit of CSS in there to start with. Well, you can do that with the Output Filter “default”. It looks like this:
8 9 10 11 12 | <style type='text/css'>
[[*Inline Style:default=`body { background-color: #f00; }` ]]
</style> |
So now each page will have this CSS by default, and you can override that default CSS by putting something into the Template Variable. Pretty cool, eh?
There are a ton of different output filters, so you can do things like addition, check for value, basic if/else logic, convert strings to dates, and more! Check out the docs, and have fun with your MODx coding!
