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!
In any diet you need to cut the fat in order to see results. After recently starting a new diet, I’ve realized that I’m no longer eating for taste, but eating for fuel. This means giving up the “fluff” that might taste great, but that also does nothing for my figure.
Mobile sites are generally designed for the on-the-go user. With this user-type in mind, mobile sites can become overly paired down to just the basic details that a user might need, such as directions, a phone number, and social media links. Yes, a mobile user may most-likely be on-the-go, but I think the mobile audience is shifting. When I’m away from work, I use my phone as my primary method of surfing the web, meaning I’m not just using it on-the-go. It’s the main way I access the internet and I’m now expecting more than the most basic functionality from a mobile site.
