By Lee Sykes

July 2006

How many times have you wanted to use a font other than the generic fonts that we are forced to use for web pages?

IMPORTANT NOTE: We currently recommend not using sIFR version 2 on your websites.

A security vulnerability has been discovered in versions 2 and 3. The latest versions of sIFR do not have the security vulnerability, but they are currently in beta and are implemented in a different way to sIFR v2 outlined in this tutorial.

We strongly recommend you disable siFR from running on your website.

You can read further information here: http://novemberborn.net/sifr3
(scroll down to revision 278 security update)

This video tutorial (54 mins) demonstrates a technique which allows you to use any font you require for your text headings.

The user does not need the font installed on their machine.

Some designers use the technique of using images for their headings just so that they can incorporate different fonts into their designs. The problem with this is that you need to create a new image for every single title that you wish to create. This is a chore and defeats the object of using a dynamic content management system such as DotNetNuke.

Welcome to sIFR (Scalable Inman Flash Replacement). sIFR has been around for a while now, but there are minimal DotNetNuke sites implementing this technique. Using sIFR can give your website the extra design edge and help you to move away from the generic DotNetNuke designs that you tend to see.

sIFR - How it Works

sIFR works by swapping your text element with a Flash file. A piece of Javascript is used which scans the page for any text within a tag or class name. The text is then replaced with a flash file. The technique only uses one flash file for each font type. The text is placed within this flash font file and is then displayed on the page. If you only use one font for all of your headers, you will just use one flash file which will be duplicated across your page.

The real beauty of this is that:

• You can select, copy, and paste the flash header text
• If a browser does not have Flash or Javascript installed, the original text font is displayed
• When printing the page, the original text font is displayed
• Compatible with screen readers
• Search engine friendly
• Browser compatible
• Small file size

Cons:

• There is a brief pause before the flash headers are displayed

The quick sIFR Guidelines for use

• sIFR should only be used for headings / display type
• Do not use it on paragraphs of text
• It is recommend not to replace more than approx 10 blocks of text per page

Otherwise your page will take forever to load!

DotNetNuke Tutorial

In these 7 video tutorials (54 mins) we walk you through, step by step, how to integrate sIFR with DotNetNuke skins. We demonstrate how to incorporate sIFR into the Free Simple Red Leaf CSS skin. You can see an example of the sIFR skin in action here:
http://skins.dnncreative.com/sifr/Home/tabid/68/Default.aspx

Introduction Video

The videos cover:

Video 1 - Introduction and demonstration

• Introduction, explanation of sIFR
• Demonstration of other non-DotNetNuke sites using sIFR
• Demonstration of DotNetNuke skin using sIFR
• Demonstration that sIFR also works with print stylesheets

Time Length: 3min 40secs

Video 2 - Creating a sIFR Flash font file

• Downloading the sIFR code
• Introduction to Flash Font files
• Downloading free fonts to use as flash font files within DotNetNuke skins
• How to create a flash font file ready for sIFR

Time Length: 7min 10secs

Video 3 - Setting up sIFR with DotNetNuke

• Downloading the Simple Red Leaf Skin
• Setting up the folder structure
• Opening in Visual Web Developer Express [LINK]
• Demonstrating Simple Red Leaf skin without sIFR
• Making changes to the Head class and h1 to h6 styles
• Incorporating sIFR elements into the DNN skin
• Copying across the flash font file
• Setting the print.css file to disable sIFR whenever printing out a web page
• Viewing the sIFR code and explanation of the stylesheets used
• The sIFR-screen stylesheet
• Using decoy CSS styles to create the size area to be replaced with flash text
• The integration problems with DotNetNuke
• CSS stylesheets and media types
• Removing the javascript CSS stylesheet function from the Simple Red Leaf skin

Time Length: 11min 27secs

Video 4 - Importing stylesheets and specifying media types

• Explanation of the various CSS stylesheets that are needed with sIFR
• Using the @import and @media methods for importing further CSS stylesheets
• Media types and problems with Internet Explorer
• Adding the sIFR-screen.css code to the DotNetNuke CSS skin code
• How to add the print.css file details with the correct media details to the skin.css file
• How to link the iehacks.css file just to IE/Win 5.x

Time Length: 9min 2secs

Video 5 - Adding the javascript and using replace statements

• Outline of all @import and @media code used in the skin.css file
• Adding the sIFR javascript code to the default.aspx file
• Uploading the sIFR javascript files to the DotNetNuke installation
• Adding replace statements to the DotNetNuke skin
• Explanation of the various elements you can style for the Flash text
• How to group together the flash replace statements to reduce the code

Time Length: 10min 27secs

Note: View the Addendum below for video 5 if you are using DotNetNuke v 4.3.x

Video 6 - Viewing and testing the sIFR DotNetNuke skin

• Packaging the sIFR enabled skin for installation to DotNetNuke
• Viewing the sIFR enabled skin
• Testing the print preview (print.css file)
• Testing in IE 5.x / Win (iehacks.css file)

Time Length: 2min 41secs

Video 7 - Tuning the fonts - Setting the correct size for the Flash fonts

• Tuning the fonts
• How to change the sizing of the flash text to match the standard text of the DotNetNuke skin
• Setting the sizing details for the head class and h1 to h6 tags
• Viewing the sIFR skin with tuned fonts
• Tips for tuning fonts
• Increasing the flash font size to match the original font size
• Final tuning of fonts

Time Length: 9min 32secs

Total Time Length: 53min 59secs

Further Information:

Visit this page for a full description of sIFR along with best practice guidelines and to download the sIFR code: http://www.mikeindustries.com/sifr/

sIFR wiki documentation

sIFR support forum

sIFR Current Versions:

sIFR 2.0.2 is available from: http://www.mikeindustries.com/sifr/
and is recommended for using with live critical websites

sIFR 3.x (Alpha) is available from: http://novemberborn.net/sifr3/using-svn-beta-info
and is recommended in a localhost test environment to experiment with the new flash techniques that are currently being explored.

Download fonts:

My Fonts

Free section from My Fonts

Adobe Flash

Trial Version of Flash

Example websites implementing sIFR

http://skins.dnncreative.com/sifr/Home/tabid/68/Default.aspx

http://ipod411.com/

http://flashability.hotmc.com/

Getting started with the DotNetNuke tutorial:

Download the Simple Red Leaf CSS skin and install the skin

You may also find it useful following the How to create a pure CSS skin tutorial

The font used in the video tutorial is the ‘hemi head 426’ font and is available for free download from:
http://www.myfonts.com/fonts/larabie/hemi-head-426/

Note: View the Addendum below for video 5 if you are using DotNetNuke v 4.3.x

If you are using DotNetNuke 4.3+ you need to follow these additional points to setup sIFR with DotNetNuke.

Please watch the videos 1 to 4 first.

The points below are for Video 5

We need to change the method for adding the sIFR Javascript code to the default.aspx file.

The default.aspx file has changed in DNN 4.3.x which doesn’t allow the calling of Javascript using the method that was previously used in DotNetNuke. DNN 4.3.x now implements a different method which we will outline below.

Follow all of the steps in Video 5, except the step where we add the Javascript code to the default.aspx file.

Instead, go to your DotNetNuke installation files and open the Default.aspx.vb file.
(You can open this using Notepad if you do not have Visual Studio)

Inside the #Region "Private Methods"
You will see comments:
Underneath the ' META generator comment at line 212, you will see the following line of code:

This calls the Javascript code for DotNetNuke which was originally placed directly in the default.aspx file. We need to copy this method to call up the two Javascript files for using sIFR with DotNetNuke.

Underneath this line enter the following two lines of code:

And save the file.

There is an example Default.aspx.vb file included with the downloads.

Now continue video 5 and upload the Javscript files to the js folder in your DotNetNuke installation.