With my newly launched blog site (do you like it?) I decided to play around a bit with sIFR. For those of you who've never heard of sIFR, it dynamically replaces common text on a web page with a replacement Flash movie that acts like normal text. You can select it, apply styles to it and most importantly you can use fonts not typically available to a web designer.

Obvious examples on this page are the use of Viner Hand ITC on the page header and some of the block headers.

Wanting to use the 'latest and greatest code', I opted for sIFR 3. My first stop was to see what kind of integration with Drupal was available, which led me to Dynamic Rendering.

From the Dynamic Rendering project page:

"This module provides an easy, user-friendly administrative interface for quickly implementing rendering rules for various technologies depending on Cascading Style Sheets (CSS) and/or Javascript (JS) on any Drupal site without requiring any adjustments to the site's theme."

Sounds great.

At the time of this writing, sIFR3 as a plugin is relatively new for DR. The documentation leaves a bit to be desired (some of it still references files not available in sIFR3, such as 'sIFR-print.css'). The readme that ships with the module is different from the one provided on the project page, so initially I missed a step with plugin installation, but that was easily remedied by moving the proper files to the appropriate directories.

After everything was set up I created my font, uploaded it to the admin page for DR, and set up a few rules. It took a little tweaking to get the proper spacing between elements but once it was set up everything looked great.

That is, until I came back to the site a few hours later. The first time accessing the site you'll get a white screen. Sometimes it will hang on the un-sIFR'd text for short while before blanking the screen for good. After a few quick page refreshes you'll get the page as it's supposed to look. Weird.

What appears to be happening is that there is a a conflict with Drupal Javascript behavior in the sifr.inc file that ships with DR, yet after applying the patch for the issue, I was still seeing the same problem.

After playing around a while more, I decided to go the direct route and just use sIFR as if I were applying it to any other non-Drupal site. Installation is fairly straightforward: you point page.tpl.php to the supplied .css and .js files, add the following code (altered to meet your needs) to the provided .js file:

var newfont = {
src: 'http://files.googlepages.com/Dynasty.swf'
};

sIFR.activate(newfont);

sIFR.replace(newfont, {
   selector: '.post-title',
   wmode: 'transparent',
   css: ['.sIFR-root: { color: #333333; 
   background-color: #f3f3f3 ;}',
   'a { text-decoration: none; }',
   'a:link { color: #0000FF; }',
   'a:hover { text-decoration: underline; }']
});

...and you're off. You probably need to do some tweaking to your CSS to get everything positioned right, but it's incredibly easy to install and gives your site a slightly different look than most other sites out there.

Here's some links on the subject:

• http://wiki.novemberborn.net/sifr3/How+to+use
• http://wiki.novemberborn.net/sifr3/Styling
• http://infodotnet.blogspot.com/2008/08/complete-setting-sifr3-for-blogspot.html
• http://drupal.org/project/render
• http://www.mikeindustries.com/blog/sifr/