Dynamic CSS with TVs
From MODx Wiki
Contents |
Diagnosis
So say you're designing a page, but you want to be able to dynamically include different CSS files depending on where you are in the site. A great example of this is when you have subsections to the site that may have different headers that need different CSS styling. So how do you go about doing this in MODx? This tutorial will show you how.
First Steps: Creating the TV
First off, make sure you have a template already created for your main site. (This tutorial's template will be called "Public".)
Now go to Manage Resources, then click on the Template Variables tab, and click the link to create a New Template Variable. Let's name the new TV customCSS. Give it a caption called "Custom CSS File", and a description that says, "ID number of a custom CSS file to use."
Make the input type be Number, and make sure to make the default value be @INHERIT. What this does is make sure that the children of each page inherit the custom CSS of the parent. This helps you dynamically change entire subsections with only one value!
Next, make sure that in the Template Access Box, your template is checked. This will allow you to access this TV in that template. Also, this is crucial - make sure that All Document Groups (Public) is checked in the Access Permissions box, so that every document group can have access to change the TV (unless, of course, you aren't using the selected template in certain document groups).
Step 2: Editing the Template
Now go to your Template code and edit it. Find the HEAD tag near where your other CSS link tags are, and paste this line:
[(site_url)] makes sure that it prefixes the href tag with the right URL. The block [~[*customCSS*]~] is a compound variable that does two things:
- The [*customCSS*] variable is parsed, which is given a value based upon that document's assigned TV value. So if I went to a subsection and changed that variable to 4, it would be parsed here as 4.
- That parsed value (let's say 4) is then parsed again into the [~~] tag. This tells the template to find the document with that number (here [~4~]) and create a URL based upon its location. So basically, we're creating a dynamic way to load URLs.
Once you're done with that, save the template and move on.
Step 3: Creating Your CSS Documents in MODx
The Structure
Now, there are different ways of doing this. What you're going to be doing is putting CSS files into MODx as documents, so where you put them is really up to you. However, I recommend creating a _css document folder in your root of the site that will obviously be distinguished as a folder containing CSS files.
I also recommend having that directory and its subdirectories parallel the directory structure of the rest of the site. This will make it easier for you later on, if your site gets big.
For example, if I've got a document in About/Team/George.html, and I want a specific CSS file for just that, it'd be a good idea to create a virtual directory structure in MODx that goes like _css/About/Team/George.css. This makes it much easier to quickly find CSS files, and it also allows you to restrict access to certain CSS files based upon their parallel access to the documents.
The Settings
So anyway, go create your CSS file wherever you want. Now you're creating a document -- remember this -- so you need to set some specific options so that MODx will recognize it as a CSS document, not a HTML one.
In Document Settings -> General, make sure that the file has an alias, and that it uses the (blank) template. Also, make sure that the "Show in Menu" box is unchecked. These settings are crucial for the css to work!
Next, in Document Settings -> Page Settings, uncheck Rich Text?, Log Visits, and Searchable. In the Content Type select box, select text/css. And make sure that the document is published.
Then save and continue on!
Step 4: Specifying Custom CSS
Okay, so say you just created your CSS file, with ID 92. Now go to the document you want to use the customCSS (note, you can use CSS files on more than one document!) and edit it.
Scroll down to the Template Variables box, and find the Custom CSS File row. Set it to 92. (It will default at @INHERIT, which is what you normally want.) This will make sure that this document and all of its children use the custom CSS file.
And You're Done! Congratulations!
Categories: Tips | CSS | Template Variables | HOWTO
