Incorporating sIFR (Scalable Inman Flash Replacement) with DotNetNuke skins

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

View video 1 for an introduction to sIFR and DotNetNuke (2.9MB)

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

You need to Subscribe as a member of DNN Creative Magazine and Login to download this video tutorial.

Addendum for DotNetNuke 4.3+

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:

' META Refresh
' META description
' META keywords
' META copyright
' META generator

Underneath the ' META generator comment at line 212, you will see the following line of code:

Page.ClientScript.RegisterClientScriptInclude("dnncore", ResolveUrl("~/js/dnncore.js"))

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:

Page.ClientScript.RegisterClientScriptInclude("sifr", ResolveUrl("~/js/sifr.js"))
Page.ClientScript.RegisterClientScriptInclude("sifr-addons", ResolveUrl("~/js/sifr-addons.js"))

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.