updated: October 13th, 2006 / Ross Johnson / 10 Comments

Easy sIFR 3 setup

Even though it is supposed to be easy, I had to strugle slightly to get the sIFR3 release to function properly on this blog. It is a great package, but the documentation is a little sparce (which is no-problem, the forum support is top notch and it is a free and great product). Here is a quick but detailed run down of how to get sIFR3 installed on your site.

Step 1: Download the Package

First of course is to download the package, and unzip it. Once it is unzipped you will see a series of folders.

Step 2: Export your Font

Go into the flash folder, where you will see a document called sifr.fla (not to be consufed with sIFR.as). While the instructions tell you to edit the options.as, by default they should work on most hosting so I won’t go into detail about editing those. Open up sifr.fla in flash. Once it is open, you can double click on the white background (which is actually a font object) and change the text through the flash properties bar. Then goto file > export and save it as a .swf file (remember the name of cource!).

Step 3: Modify the Javascript

The demo has all javascript that looks for and alters the headings in the html file itself. We how-ever don’t want to gunk up our source files with exta javascript so we will simply add it to the sifr javascript file. If you open up the “js” folder you should see sifr.js – open it with your text editor of choice.

Scroll down to the bottom of the file, here we will paste in the following code…

sIFR.prefetch({
src: ‘sifr/verd.swf’,
highsrc: ‘sifr/verd.swf’
});

sIFR.compatMode = true;
sIFR.activate();

sIFR.replace({
selector: ‘h1’,
src: ‘sifr/verd.swf’,
highsrc: ‘sifr/verd.swf’,
css: {
‘.sIFR-root’ : { ‘color’: ‘#650500’ , ‘font-weight’: ‘bold’ },
‘a’: { ‘text-decoration’: ‘none’ },
‘a:link’: { ‘color’: ‘#650500’ },
‘a:hover’: { ‘color’: ‘#4F4F4F’ }
},
paddingTop: 20
});

sIFR.replace({
selector: ‘h2’,
src: ‘sifr/verd.swf’,
highsrc: ‘sifr/verd.swf’,
css: {
‘.sIFR-root’ : { ‘color’: ‘#650500’ },
‘a’: { ‘text-decoration’: ‘underline’ , ‘font-style’: ‘italic’},
‘a:link’: { ‘color’: ‘#650500’ },
‘a:hover’: { ‘color’: ‘#4F4F4F’ }
},
paddingTop: 0
});

Now to break down what this code does, and what you can edit/customize:

sIFR.prefetch({
src: ‘sifr/verd.swf’,
highsrc: ‘sifr/verd.swf’
});

sIFR.compatMode = true;
sIFR.activate();

This activates/initalizes sIFR , in the prefetch you will want to change verd.swf to the name of the flash file you exported in step #2. If you are using multiple fonts, you can add several prefetches with different file names.

sIFR.replace({
selector: ‘h1’,
src: ‘sifr/verd.swf’,
highsrc: ‘sifr/verd.swf’,
css: {
‘.sIFR-root’ : { ‘color’: ‘#650500’ , ‘font-weight’: ‘bold’ },
‘a’: { ‘text-decoration’: ‘none’ },
‘a:link’: { ‘color’: ‘#650500’ },
‘a:hover’: { ‘color’: ‘#4F4F4F’ }
},
paddingTop: 20
});

sIFR.replace({
selector: ‘h2’,
src: ‘sifr/verd.swf’,
highsrc: ‘sifr/verd.swf’,
css: {
‘.sIFR-root’ : { ‘color’: ‘#650500’ },
‘a’: { ‘text-decoration’: ‘underline’ , ‘font-style’: ‘italic’},
‘a:link’: { ‘color’: ‘#650500’ },
‘a:hover’: { ‘color’: ‘#4F4F4F’ }
},
paddingTop: 0
});

These lines are what will actually make the alterations to the headings. The parts you want to modify would be

selector This tells sIFR which heading/tag you want to alter (for example H1, H2, H3, etc)

src / highsrc This should point to the directory and filename of the exported flash file from step #2

css sIFR now supports css styling, which makes things easier for those of us who are framlier with css. .sIFR-root will change the default styling of the heading, however adding “a” styles will over-ride the .sIFR-root styling. Further
while sIFR now supports bold, and italic (through font-weight: bold , etc) it only supports one at a time. So if you want a bold-italic font you would have to export a specific one from flash. The paddingTop can be replaced for padding/Left/Right/Top/Bottom will ad padding around the heading.

Step #4 Modify the CSS file

If you open the css folder, you should see a “screen.css” file. Open it up in your prefered text editor / css editor, and take a look inside. Pay attention to the tags that are marked .sIFR-hasFlash. First go through and delete any that have a heading after them that you don’t plan on using sIFR on. (For example, if you don’t want sIFR to alter H4, then remove any .sIFR-hasFlash h4 blocks).

Step #5 Calculate the font sizing

They have come up with a pretty good method of specifying the font sizing for sIFR. It uses a combination of the line-height tag and the font-size tag through css files. Specify your font size in pt, and give the styling a line height of 1em. This ensures that it has the same value as the font size. For Example:

.sIFR-hasFlash h1 {
font-size: 28pt;
line-height: 1em;
}

Do the same for all headings that you want to stylize. Keep in mind that sIFR will render the text aproximately 5% larger in IE than most other browsers. So I recommend you look at your stats, see which browsers visit your site the most, and optimize for that browser.

Step 6: Edit your HTML file

Now it’s time to edit your HTML file, we need to add three items to get sIFR3 running: The CSS file, the Javascript File, and an initilization command. In between your <head> and </head> place the following:

<script type=”text/javascript” src=”js/sifr.js”></script>

<link href=”css/screen.css” type=”text/css” media=”screen” rel=”stylesheet” />

Then, right before your </body> tag at the bottom of the page put the following:

<script type=”text/javascript”>sIFR.initialize();</script>

Step 7: Upload your files

Now it is time to upload your files, make sure you use the proper directory structure that we setup. That means that…

Create a “css” folder from your webpage root directory, and upload the screen.css file into it.

Create a “js” folder from your webpage root directory, and upload the sifr.js file into it.

Create a “sifr” folder from your webpage root directory, and upload your .swf (exported flash document) files into it

Upload your modified html file, and go to your page!

From there you should be good to go!

Step 8: Debugging

If it doesn’t work, don’t fret. Most of the time it is a javascript issue, and we can easily track down the problem.

If you are using firefox, first download The Web Developers Tool Bar. Once that is downloaded and installed, go to your page again. On the very right hand side of the browser should be an icon that either looks like a talk bubble or a stop sign with an exclimation point. Click on that and it will give you information about the error and you can look into your sifr.js javascript file at the line it points too. Double check for misplaced or missing quotations, comma’s, etc…

If you are using Internet Explorer, goto tools > internet options > advanced, scroll down to browsing and unclick ‘Disable Script Debugging (Internet Explorer)’ and ‘Disable Script Debugging (Other)’. Click ‘Apply’ , hit ‘Ok’ and reload your page. It should give you an error stating which line of your script it is getting an error on. Once you have that line, you can reopen your sifr.js file and find the error. Again – double check for misplaced or missing quotations, comma’s, etc…

If you are having further problems, I suggest you check out these two great resources. November Born’s sIFR 3 page and TextDrive’s sIFR forum.

If you have any suggestions on how to improve this guide, let me know! I wrote it to help others, and am very open to suggestions…

10 thoughts Easy sIFR 3 setup

  1. Thanks for the article, perhaps you want to help out at the wiki [1]?

    The reason for the sparse documentation is that the code is still in alpha, and things are still changing a lot. There’ll be proper docs before the final release.

    [1]: http://wiki.novemberborn.net/sifr3

  2. Thanks for the comment Mark – I definitely plan to add to the wiki when I get a chance.

    I didn’t mean to say that there was anything wrong with the documentation – after all I would rather effort be put towards the project itself than the doc…

    I just had a little bit of trouble getting it running and though people might find a little supplement helpful.

    Cheers
    -Ross

    ross
  3. your fancy show off quotes mess up the code when its copied and pasted

    trevor
  4. Put your code in pre or code tags to make everybody’s life easier, and watch out for re-formatted quotation marks.

  5. Thanks mate – helped me a lot!

  6. your sifr download is the alpha version. would be great if you updated this and your tutorial to correspond with the latest version of sifr3, and to save people landing on this page from google wasting their time.

    nigel
  7. totally agree with nigel. this is a useless and obsolete resource

  8. Pingback: sifr

  9. sIFR working model, you can see here
    labs.ubpine.com
    http://labs.ubpine.com

  10. Pingback: today’s links on ma.gnolia | Folks Pants

Comments are closed.