Ten Textpattern Tips, #9: Use rvm_css to Speed Up your CSS

admin-ajax

In my previous article, I showed you a neat way to decouple the Textpattern CMS cascading style sheets (CSS) from the database and make them load faster. That process involved using an external editor to maintain your CSS – something that you may prefer not to do. There is another way to externalize the CSS without resorting to a text editor each time you want to make changes.

This alternative method includes a plugin called rvm_css by Ruud van Melick. After the plugin is enabled, there’s a one-off process to follow to set up the stylesheet directory, repoint the pages to the new stylesheet location and then you’re home free. After that, whenever changes are made to the stylesheet(s) inside the administration interface, your external stylesheets will be updated to reflect these changes.

To begin, log in to your Textpattern website and go to Admin -> Plugins. In another browser tab or window, view the plugin code. It’ll look something like this (trimmed for brevity):

# rvm_css v1.0
# Static CSS caching
#
# License: GNU GPLv2 or later
#
# Ruud van Melick
# http://vanmelick.com/
# ......................................................................
# This is a plugin for Textpattern - http://textpattern.com/
# To install: textpattern > admin > plugins
# Paste the following text into the 'Install plugin' box:
# ......................................................................
YToxMDp7czo3OiJ2ZXJzaW9uIjtzOjM6IjEuMCI7czo2OiJhdXRob3IiO3M6MTU6IlJ1dWQg
dmFuIE1lbGljayI7czoxMDoiYXV0aG9yX3VyaSI7czoyMToiaHR0cDovL3Zhbm1lbGljay5j
[...]
PSdydm1fY3NzX2RpciciKTsKfQoiO3M6MzoibWQ1IjtzOjMyOiI3MWVkNmZjMmEwYjFkMzE5
MWRiYWM4N2QyZmUwOWVmNSI7fQ==

Highlight all the text (not just the trimmed version above), then copy it to your clipboard. Go back to your Textpattern administration interface and paste the text into the Install plugin box. Click Upload, then Install to confirm. When the plugin is installed, locate it in the list and under the Active header, click No. This will then toggle to Yes, indicating the plugin is activated.

Using FTP or a file manager, make a directory in your Textpattern root that will house your styles. I recommend calling it something useful like ‘css’ or ‘styles’. After you’ve made this directory, go to Admin -> Preferences -> Advanced and find Style directory in the list: it should be the second item down, give or take. Make sure this directory matches the name of the one you just made.

To create the CSS file(s), simply visit the Presentation -> Styles tab and save each one; you need make no changes to each style, the action of saving the style will create the file in the css directory. Subsequent saved edits to any or all of the styles will update the files.

The final step in the process is to switch tag references from to <txp:rvm_css />. In each of your pages, check for this line:

<txp:css format="link" media="" />

…and replace it with

<txp:rvm_css format="link" media="" />

Both <txp:css /> and <txp:rvm_css /> share the same options, so you need not change any of them.

And that’s it – you’re done. You’ve just externalized your CSS without a beautifully simple but effective plugin. Make yourself a tasty beverage, you’ve earned it.

Looking for quality Textpattern Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , , , , , , , , , , , | Posted under Textpattern | RSS 2.0

Author Spotlight

Pete Cooper

Pete Cooper

Pete Cooper has been using Textpattern since 2005. Textpattern is his preferred CMS weapon of choice. Its logical and flexible approach to content management makes Pete happy, as does its lightweight core and helpful user community. Pete's website - petecooper.org - runs on top of Textpattern and chronicles his day-to-day experiences from his home near the Atlantic in north Cornwall, United Kingdom.

Leave a Reply

Your email address will not be published. Required fields are marked *


5 × = 25

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>