Our thoughts and experiements

Dang, you blog so good!

sIFR is how we made our headlines look so smashing

Posted by:

Like the fonts our headlines are in?

headlines_using_sifr

We accomplished this with a small piece of opensource JavaScript and Adobe Flash software called sIFR or Scalable Inman Flash Replacement. Come on, I’ll show you how to do this in 15 minutes or less.

This is a quick start tutorial and will accomplish two things:

  • Replacement of your site’s <h1> tags, if you have any
  • Replacement of a CSS class named “replace-me” which we will create on a page

Things you will need for this tutorial:

  • A simple text editor (I use Dreamweaver CS3 – you can use anything)
  • Adobe Flash (I use Flash CS3 Professional)
  • A font you like (I like to look on daFont.com – they are free:)

Lets get started

Step #1: Download and unzip the latest version of the sIFR project here. This tutorial uses sIFR-2.0.7
Step #2: Fire up Adobe Flash and open sifr.fla (it is in the .zip file you just downloaded in step #1) If your version of Flash will not open up the sifr.fla file (Usually cs4 users) then you can download a compatible version here
Step #3: Double click on the stage.
sifr_step_3

Step #4: Select the Dynamic Text box on the stage.
sifr_step_3b

Step #5: Change the font to one you like. Don’t worry about the font size as sIFR takes care of that for you. The font color will be defined later on in the implementation process.
sifr_step_3c

Step #6: We are now done with Flash, so save the file as the name of the font you used and publish it (eg: swatch_it.fla). This helps when you have multiple fonts on a page.

Step #7: Open up your text editor and follow along. It is pretty easy to just cut and paste:)

Step #8: Open customize_me.as and change line 14 to your reflect your domain name. You just need your domain name here. It does not matter where you will be using sIFR on your site. Make sure you have one with www. and one without. Then save and close it.

example:

allowedDomains = new Array("*","www.toddsantoro.com","toddsantoro.com");

Step #9: Open up your site’s stylesheet (Hint: its a .css file)

Step #10: Add these lines to your sites stylesheet:

example:

.replace-me { font-size: 18px;  display: none !important; }
h1 { display:none !important; }

OR

.replace-me { font-size: 18px; height:75px; width:250px; padding-left:25px; }
h1 { display:none !important; font-size: 22px; }

The class replace-me will trigger sIFR to replace the text with a Flash movie that has your special font. For those people that do not have flash installed, they will see normal text. By adding attributes to the class you can achieve different results, be creative:) As for the <h1> tag… everywhere a <h1> tag is on your site, sIFR will replace it with a Flash movie.

Step #11: Now we bring everything together. Open up your header.php page if you have one. If not; open up the page you want to have sIFR replace your text on. I usually work with WordPress and it has a header.php file that is included on every page of my site.

Add these lines to the <head></head> of your page:

Step #12: Add this line somewhere in the <body></body> of your page:

This is the text I wanted to replace.  Yippie!

Step #13: Open up footer.php if you have one or continue working with the file you were just working with in Step #12. Add these lines just before the ending </body> tag:

Be sure to set your font and link colors in the code above. Also make sure your paths to stuff are correct. You can also combine these like this:

Notice that I simply added a comma to separate the two CSS elements I wanted to replace. This method would also render the same font colors on both <h1> tags and the replace-me class.

Step #14: You are done!  Upload all of your files to your server and check out your work.  If you have problems… I would first make sure all of the paths to the sIFR stuff are correct and that you have uploaded all of the sIFR files.

I will try to help troubleshoot if you post your comments below.

Cheers!