CSSEdit Override Generator for Drupal Stylesheets

If you are familiar with Drupal and the way it outputs stylesheets, you’ll understand how this works. As a precaution to force web browsers to load a fresh version of the stylesheet(s) every time, Drupal appends each stylesheet link with a variable. This forces web browsers to think that it’s a new stylesheet every time, thus it never loads an older cached version. Here’s an example:

http://bloqhead.com/staging//somestylesheet.css?a

This is all well and good and can be extremely handy when heavily styling a Drupal template. It prevents you from having to force your browser cache to empty on every refresh.

The Problem

The problem I ran into is that stylesheet overrides in CSSEdit can not be appended with a wildcard. So in order to keep my overrides intact while styling on my local machine, I would have to add an override for each and every stylesheet URL including it’s random-generated variable.

What The Hell is an Override?

In CSSEdit a stylesheet override is a way for the user to apply their style changes to a live webpage on the fly. It speeds up stylesheet deployment and development rapidly and has become an absolute must have in my daily design tool set. With CSSEdit you can open your CSS file in one window, and open a separate Preview window. The Preview window is very open-ended: You can either set your local stylesheet to override a stylesheet on a live webpage, or you can make it override a stylesheet on a local file. The advantage to this is that every time you make a style change, the changes are reflected on the webpage you are previewing. There is no need to refresh or save your CSS file. The Preview window updates as you type new CSS declarations. I can’t even count how many hours this feature has saved me.

This is what an override looks like in a CSS file edited via CSSEdit:

/* @override http://bloqhead.com/staging//style.css */

This is a proprietary comment that will tell CSSEdit to override the stylesheets listed within the override comment.

The Solution

I discovered that Drupal’s method for appending stylesheet links is simple and only appends a single character from A-Z, a-z or 0-9. This is most helpful because if it generated a random set of characters every time, there would be no way for me to even attempt this. So in my spare time I developed a simple web form that will allow users to generate all of the overrides required to avoid the pitfall I encountered. It took me about an hour to create and has already proven itself useful. Behold!

Daryn’s fancy CSSEdit Override Creator for Drupal!

There you have it. Simple.