Static CSS with Textpattern

Summary:

A simple setup for using static CSS files in Textpattern.

Textpattern has a built-in stylesheet editor. I suppose it must have seemed like a good idea at the time, but:

Serving CSS as a PHP script is many times slower than serving static files (so sayeth Ruud)
Editing CSS in a CSS-aware text editor is greatly preferable to Textpattern’s built-in editor
Even the official Textpattern CMS User Documentation disdains the Txp stylesheet editor

If you actually like using the Txp editor, you can gain the speed benefits of static CSS files by using Ruud’s plugin. If you’re set up with It’s All Text this may be the best of all worlds: high performance, preferred editor, and the elegance of the <txp:rvm_css /> tag for section-specific styles.

But Firefox isn’t my browser of choice, and it’s quite easy to bypass the Styles tab entirely for a no-plugin solution that is still reasonably elegant. Here’s my current method:

Create a directory for the CSS files and put it at the site root.
Create a base stylesheet for elements that are common across the site
Create a stylesheet for each section, using the section name as the file name
Put HTML <link /> tags into your page templates, one for the base stylesheet and another for the section stylesheet, using <txp:section /> so the tag works for all sections

For ipsedixit.net, the file structure includes:

web_root/
   css/
      base.css
      default.css
      info.css
      txp.css
   files/
   index.php
   ...

Note that “default.css” is for the default section, i.e. the home page.

I use the same page_top form to create the <head> element for every section. It includes:

<link rel="stylesheet" type="text/css" href="<txp:site_url />css/base.css" />
<link rel="stylesheet" type="text/css" href="<txp:site_url />css/<txp:section />.css" />

Not quite as slick as a single <txp:css format="link" /> tag, but that’s a small price to pay for the improved performance and ease of editing static CSS files. You do have to remember to FTP across your CSS changes to keep live and local sites in sync, but then you have to do that anyway for files and images, or for Ruud’s solution.

Variation: per-template CSS

If you have sections that share pages (templates), it might make better sense to have a CSS file for each page rather than each section. The <txp:yield /> tag, new in Textpattern version 4.2.0, allows you to do this with a setup very similar to that shown above. In this case you can name your CSS files whatever you like. Then in each page that has its own CSS file, call the <head> form using output_form’s container mode (changing “this_page_name” to the file name):

<txp:output_form form="page_top">this_page_name</txp:output_form>

Use yield instead of section in the page_top form:

<link rel="stylesheet" type="text/css" href="<txp:site_url />css/<txp:yield />.css" />

resulting in this HTML output:

<link rel="stylesheet" type="text/css" href="http://mysite.com/css/this_page_name.css" />

Posted 2008-01-30 (last modified 2017-02-18)