Guest Post: How To Use MODX For CSS On-The-Fly

Often a new client will come to me with a website already in MODX, but they need to make some “minor” adjustments. If you’ve ever had a request like this, you might find it helpful to collect all the CSS into MODX Resources. What are the benefits of doing this?

1. Gone are the days of navigating to a static file in File Browser. To edit CSS – just select it in the Resource Tree!
2. Control access to CSS, or certain parts of it, with Permissions and Template Variables.
3. Make changes quickly & easily within MODX Manager.

Let me show you an example…

Client wants to change the colors on his site, which consists of an About Section and five distinct Divisions – each with a different color scheme and CSS file. Some of the Division colors show up in “about.css” because we see them in the menus. To update a color for one Division, I would need to edit property values in 12 declarations spread over 2 or 3 static stylesheets!

6 colors x 12 locations x 6 files x Client changing his mind = A LOT of manual editing. The site was developed in MODX, but the original developer didn’t have to change CSS property values at the Client’s whim, apparently.

Content Types and Template Variables To The Rescue

This works equally well in MODX Evo or Revo, but I’ll refer to Revo workflow here. I’m also assuming you know how to make MODX templates.

1. Make a Template for “CSS Only”.

@charset "UTF-8";
/* Title: [[++site_name]] [[*pagetitle]] CSS document */
[[*content]]

Break it down:
@charset » character set encoding. See: http://www.w3.org/International/questions/qa-css-charset.en.php Title…» Writes a title for the document with the site name and pagetitle placeholders (optional).
[[*content]] » We’re going to write our style declarations in the Resource Content area.

2. Create Resources using the CSS Template.
3. !Important: in Page Settings » Content Type drop-down menu, choose “CSS”.
4. Copy & Paste existing stylesheets (if any) into the new Resources’ Content area.
5. Change links in HTML header to reference Resource IDs. For example:

<link href="[[~aboutID]]" rel="stylesheet" type="text/css">
<link href="[[~divisionID]]" rel="stylesheet" type="text/css">

Now the site should work as it did before with static CSS docs. If you have FURLs turned on, you can add semantic aliases for each CSS Resource. The next step is to Find & Replace all hex values in the Resources with Template Variables, for example: [[*color1]] or [[*blue]]. This is the most tedious part, but I would’ve had to do this for each revision – which, as it happened was over 10 times! Now I only have to do it once.

Result: change hex values once in the TVs and all instances of that color in the stylesheet changes as well.

To take it a step further, add @CHUNK binding to the TVs so editing at the Chunk level propagates to ALL stylesheets. You could do this for any CSS property – border-radius for example.

One more step: Client wants to play with colors. No problem! A dash of Form Customization and Client gets to edit TVs in the CSS Resources but nothing else. I’ve been toying around with the idea of adding a color picker in the Manager somewhere, but that’s another post.

Author

Sepia River uses MODX to make custom web solutions accessible to small business. He also gets wrestled into doing Marketing stuff, Photography and other Content Creation. He wears pajamas and slippers a lot, and likes talking in funny voices. » Blog » Twitter