How To Implement sIFR3 Into Your Website
I noticed some requests on how-to implement sIFR3 into your website – or in combination with WordPress. In this tutorial i will demonstrate where to download sIFR3 and how to install it onto your website or in this case, a WordPress theme.
What Is sIFR3?
sIFR3 is a combination of JavaScript and flash, which allows you to dynamically view text using flash. This can improve you website look dramatically, because you are sure that it will look the same in every browser and that its much smoother looking than basic HTML text. If you take a look at a <h2> title in IE6, you will notice the pixels and that its not very smooth looking. In IE7 they changed this, so all the text should look smooth and nice. But that’s not anything near what sIFR3 can do for you. The image below will show the difference when sIFR3 is turned on and when its turned off.
As you can see, sIFR3 allows you to display a more detailed rendered text. However, there are a few minor points about sIFR3.
- Website visitors must have flash installed and enabled.
- Titles will not work on many mobile devices such as PDAs and mobile phones.
- Your website can become a bit slower.
So know you know what sIFR3 is and what it can do, lets get started with the rest of the tutorial.
Step 1 – Downloading sIFR3
sIFR3 is developed by Mark Wubben; you can find the latest version at his website. In this tutorial i will be using the latest version, which can be found at the nightlies directory.
The zip file will contain flash, JavaScript and CSS files. Also a live demo is included, the files you need are:
- css/sIFR-print.css
- css/sIFR-screen.css
- js/sifr.js
- js/sifr-config.js
- flash/sifr.fla
Step 2 – Editing sifr.fla
Before we can upload everything, we first need to set up our flash file.
A .fla file is included as you can see in step 1. If you don’t have Flash, Adobe offers free product trials, also for Flash CS3, which can be downloaded here at Adobe.
After you’ve downloaded & installed Flash, open sifr.fla
You’ll begin with simply a white box. This is because the file is divided into layers.
In order to change the font family of the sIFR3 you are going to use on you website, you have to double click in the white box, if the box still is white, double click again and the text will show “Bold Italic Normal”
Now click the text line and you should go into the text edit mode. The default font is Verdana.
You can use the font chooser to pick your desired font, in this tutorial I chose Tahoma.
Please note that you do not need to change any other options, font size, color and other text styling options can be changed using the JavaScript included in sIFR3.
Now that’s done, we need to compile it to a .swf in order to display flash on your website.
So lets compile a .swf file, shall we? To do this go to File->Export->Export Movie
A new window will pop up, in this window you can give the file a name and chose a directory where to export it. Make sure the format displays Flash Movie, I’m naming the file “sifr.swf”. Click Save.
Again, a new window will pop up, the default settings should work good.
Click OK, and you will see a progress bar while the swf file is being compiled.
Step 3 – Uploading sIFR3
In order to make sIFR3 work, you need to upload the needed files (displayed in Step 1) to your WordPress directory. To keep things organized i will suggest that you upload the files to wp-content/themes/default
Please note that you can use any other theme you prefer.
You should upload the files in the same directories as the theme, so the CSS files will go into wp-content/themes/default/css , you can do the same with the JavaScript files and flash files. When you’re through, the file structure should look like this:
- wp-content/themes/default/css/sIFR-print.css
- wp-content/themes/default/css/sIFR-screen.css
- wp-content/themes/default/js/sifr.js
- wp-content/themes/default/js/sifr-config.js
- wp-content/themes/default/flash/sifr.swf
Don’t forget: you need to upload sifr.swf and not sifr.fla.
Step 4 – Installing sIFR3
Now that all files are uploaded, we can install sIFR3 into our WordPress theme.
First we need to include the JavaScript and the CSS files. We are going to do this between the <head> </head> tags, so lets open wp-content/themes/default/header.php . This file contains the header of the complete template, now we are going to add these lines just before:
<?php wp_head(); ?> </head>
First let’s include the CSS files by using the <link> tag:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/css/sIFR-print.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/css/sIFR-screen.css" type="text/css" media="print" />
We don’t use the complete url to a file in a template file. WordPress has predefined tags, such as <?php bloginfo(’stylesheet_directory’); ?> which will automatically return the theme directory, in this case http://www.nettuts.com/wp-content/themes/default
As you can see it does not return the link with a / at the end! So make sure that you don’t forget to type it.
Now we still have to include the JavaScript using the <script> tags. We can use the same method by using the predefined tags:
<script src="<?php bloginfo('stylesheet_directory'); ?>/js/sifr.js" type="text/javascript"></script>
<script src="<?php bloginfo('stylesheet_directory'); ?>/js/sifr-config.js" type="text/javascript"></script>
Now we include the CSS and the JavaScript, which together looks like:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/css/sIFR-print.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/css/sIFR-screen.css" type="text/css" media="print" />
<script src="<?php bloginfo('stylesheet_directory'); ?>/js/sifr.js" type="text/javascript"></script>
<script src="<?php bloginfo('stylesheet_directory'); ?>/js/sifr-config.js" type="text/javascript"></script>
<?php wp_head(); ?>
</head>
When you load the page, you will find that nothing has happened… this is correct!
Step 5 – Configuring sIFR3
Before sIFR3 will replace defined text with flash, it needs to be configured.
The configuration takes place in the sifr-config.js file, so let’s open that file. (the file is empty)
What we are going to do first is define the font name and the link to the flash file.
var tahoma = {
src: 'wp-content/themes/default/flash/sifr.swf'
};
Here, we are defining a variable that links to our flash file. Now this doesn’t do anything yet. First we need to activate it by typing the activate command.
sIFR.activate(tahoma);
Now that sIFR3 has been installed and a font has been activated we need to define what text it should be replaced with flash text. To do this, we use the replace command in sIFR3.
sIFR.replace(tahoma, {
selector: 'h2'
});
What we did is tell sIFR3 to replace all text between h2 tags.
But you can replace it with anything you want, for example: p, b, i, pre etc….
Although it’s not advised to replace all text on your website with sIFR3 because this will slow your website down.
Now save the sIFR-config.js file and refresh your WordPress page. You will see that the titles have been replaced with flash.
As you can see, the title looks much more clear and sharp than the default html titles.
Plus, you are now sure that it looks the same in every browser. Using sIFR3 can truly give your website a unique look, because you can specify any font you like.
Step 6 – Styling sIFR3
Now that sIFR3 is working, we still need to style it.
The styling takes place in the sifr-config.js file and the sIFR-screen.css
Personally, i think the text size is a bit large. In order to change that, we need to add some CSS to sIFR-screen.css, so lets open that. Again, to keep things organized, we will start styling after the designated line:
/*---- Header styling ---*/
Now, if you know the basics of CSS you know that you can style h1, h2, h3, etc. by simply typing it. For those who are new to CSS, this is how:
h2{
//styling code
}
To make sure that it only applies to the sIFR3 text, we will add the sIFR-active class in front of the h2. We will try to make the text a bit smaller by using font-size, and lets try 14 pixels.
.sIFR-active h2{
visibility: hidden;
font-size: 14px;
}
When you save it, you will notice that the font size has been reduced.
As you can see, we also changed the visibility to hidden because we want to make sure the normal (not flash text) is hidden.
Other things you can style using this method is line-height & font-family, to name a few.
Things that will not work using this method are the text color and background! This needs to be done in the sifr-config.js file, so lets save sIFR-screen.css and open sifr-config.js
When the files is open, you can start adding some new lines after the selector.
We want to style the text, so lets call in the CSS function.
sIFR.replace(tahoma, {
selector: 'h2'
,css: [ ]
});
Don’t forget the “,” or the CSS will not apply! Or sIFR3 might stop working!
So lets add some color, remember that the WordPress titles are links? So we have to add some hover and link colors.
sIFR.replace(tahoma, {
selector: 'h2'
,css: [
'a { color: #333333; }'
,'a:link { color: #333333; }'
,'a:hover { color: #0066CC; }'
]
});
This looks like normal CSS, only that the style commands are between ‘ ‘ and a “,” has to be added after each command, except for the last.
One important thing is that you have to write the color codes completely! So if you want white text:
'a { color: #FFF; }' <- WRONG!
'a { color: #FFFFFF; }' <- GOOD
Link
Mouse Over
sifr-config.js
var tahoma = {
src: 'wp-content/themes/default/flash/sifr.swf'
};
sIFR.activate(tahoma);
sIFR.replace(tahoma, {
selector: 'h2'
,css: [
'a { color: #333333; }'
,'a:link { color: #333333; }'
,'a:hover { color: #0066CC; }'
]
});
That's the end of this tutorial. If you enjoyed this article, please Digg and/or StumbleUpon it!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Philo Hermans
Premium Members
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription. Join Now
Related Posts
Premium Membership
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription
Breezi Comming Soon page - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Other Plus Sites ...
aetuts+ audiotuts+ vectortuts+ tuts+ phototuts+ cgtuts+ nettuts+ psdtuts+ activetuts+Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
oh and another one how can i activate multi fonts for different tags say h4?
Good tutorial.
Those who don’t have the expensive programme that is Flash may be interested in using http://www.sifrgenerator.com/ — it’s a web-based way of creating an example.swf font file.
sIFR is better than FLIR for one reason, background. If I have my text on a gradient it will not work properly, and sIFR allows for transparency, so winner! I have used it many times and I like sIFR for the most part.
I’m sure no one has completed this tutorial end to end… because a great big error in it just cost me an hour
Where your defining the style sheet links for sIFR, your linking the Screen on with media type Print and vice versa, meaning it will display nothing when its working (assuming your screen is print media and hiding the flash)
James
very helpful, thanks!
Damn!
James, you’r right!
Someone should fix this!
I stumbled on the same error.
Anyone else having issues with Firefox 3? The sifr text loads correctly the first time the page is displayed, but if you refresh the page, the sifr box expands to the full width of the browser window. I haven’t found a solution yet.
Strange stuff with firefox3.
I’m using sifr version 3, revision 436.
open sifr.js and change this.fitExactly=false; to this.fitExactly=true;
this seems to fix the issue but i’m not sure what the consequences are.
On another note firefox doesn’t seem to be listening to the font size.
sIFR has been around for a lonnnnnng time. Amazed most of you are just now finding out about it. Where have you been??
Sorry I hate to be this guy, but James is right on the money. In Step 4 – Installing sIFR3 you need to switch the screen and print media types.
<link rel=”stylesheet” href=”/css/sIFR-print.css” type=”text/css” media=”screen” />
<link rel=”stylesheet” href=”/css/sIFR-screen.css” type=”text/css” media=”print” />
to
<link rel=”stylesheet” href=”/css/sIFR-print.css” type=”text/css” media=”print” />
<link rel=”stylesheet” href=”/css/sIFR-screen.css” type=”text/css” media=”screen” />
Thanks for the Copy/Paste of the Sifr3 wiki.
great!
It’s posible to be a transparent background?
Somebody knows?
Great tutorial! You helped me out of a tight spot.
@dazao
Yes, transparent backgrounds are supported. In sifr-config.js, add:
wmode: ‘transparent’
in each sIFR.replace command where you want the background to be transparent. Keep an eye out for commas when you do this; you will generally need to insert one before or after this line depending on the order in which it appears in the command.
In situations where transparency is not supported, the background color specified in the CSS will be used. So it is still important to specify a background color.
So if I got this right, I can’t use the sIFR CSS, let alone my site’s css to style sIFR elements.
What bothers me most is I can’t properly apply color and background color. In this example I can see stuff applying to links, but what about general elements? This for example does not apply shit to my h1:
sIFR.replace(verdana, {
selector: ‘h1′
,wmode: ‘transparent’
,css: [ '{color: #CC0000; background-color: #000000;}' ]
});
What’s wrong with it?
Nevermind, got it…
what was the problem with what you had?
Thanks Philo, Good article. It was brief and to the point.
That’s a great tutorial!
I’m going nuts here – this is the fourth sifr integration with wordpress tutorial that I’ve tried and nothing is working.
This tutorial at least has got me to the point where in firebug I can see that something is happening but the final replacement isn’t happening.
Aftter going through this tutorial 3x to ensure I haven’t missed a step this is what I see in firebug for the element to be replaced – only the text shows on the page no flash text (checked in firefox, opera, and IE – also updated flash plugin)
delete this later
any tips?
Damn everthing I wrapped in code tags was deleted
Great tutorial but nevertheless it took me too long to get everything going, probably because I changed my permalinks settings in WP.
If text is being replaced by sIFR but doesn’t show as visible in WordPress, it might be usefull to check the path to the swf file in your sifr-config.js (Step 5 of the tutorial)
My permalinks structure: /%postname%/
Adding a forward slash solved my problem.
var tahoma = {
src: ‘/wp-content/themes/default/flash/sifr.swf’
};
@ Lance –
I also had the same issue in ff3 with the width. I gave the movie a set width in the css and that seemed to work. Still searching for the best solution here. Because it forces you to track down what the width is supposed to be each time.
hi!
thanks for the great tutorial.
i’ve just implemented sifr in a test-project,
but the line-height doesn’t work.
does anyone know, what could be the reason?
thanks
It’s good to point out that sIFR only works from a web server and not locally. This is due to Flash restrictions.
I use old version SIFR on http://aplikasihape.com . Old SIFR more faster than newest version sifr.
Great tutorial no doubt.. since its concentrating on wordpress am getting little confused.
i dont have so many files mentioned in the tutorial mostly the css files. I downloaded the latest release sifr3 r436 and only find these files are packed with it, if ucan help me on telling me what files to edit it would help me.
source: http://dev.novemberborn.net/sifr3/nightlies/?C=M;O=D
file: http://dev.novemberborn.net/sifr3/nightlies/sifr3-r436.zip
css\sifr.css
demo\all.css
demo\cochin.swf
demo\index.html
demo\index.xhtml
demo\rockwell.swf
flash\Options.as
flash\sIFR.as
flash\sifr.fla
flash\SifrStyleSheet.as
js\source\sifr.js
js\sifr-config.js
js\sifr-debug.js
js\sifr.js
Thanx in advance
this simply does not work
I’m having a problem…The sifr is displaying, but displaying verdana instead of the font I want (gotham). I exported it right using gotham, but in my report, it shows gotham bold, gotham, gotham, gotham, verdana….
Anyway of getting rid of that verdana?
Does anyone know how to make font-size work in percents in sifr? On this site: http://wiki.novemberborn.net/sifr3/Styling they say
“…use the % unit to make the font size relative to the main font size. This only works when specified in JavaScript”
but what do they mean when they say ’specified in javascript’… which javascript?
Any help is appreciated – I really want my text to scale as much as possible.
I’m trying to implement SIFR3 on one of my wordpress site, but the SIFR font background is coming white on Firefox and my blog background is of darker shade. I’m using the latest SIFR 3 release 436. Please help me somebody. Thanks in advance.
in the sifr-config.js file you can set the background-color of your sifr replaced text. after setting the selector you will find this rule:
css: [ '.sIFR-root { background-color:#FFFFFF; color:#333333; }' ]
here the background color is set to white, but ofcourse you can set it to any color you desire to perfectly fit your needs.
Keep up the good work! Thanks for the tutorial…
Nice tutorial ! I’ve been using sIFR in my projects for a while … but a few months ago I found Cufón (google it) and started using it instead.
!
siFR has it’s advantages but I don’t like Flash
hello
if i do not want background color then what i do. kindly adivce.
Hello, I’ve managed to get sIFR3 to work the way I want it to. But, whenever I try to use Firebug to inspect elements, as soon as I hover over the page, sIFR3 looks like it disables itself and reverts to the non-sIFR text. Is there a step involved, something in the sifr-config.js that i need to modify? Thank you.
Hi. Thanks for nice tutorial.
Maybe you know how to solve my problem:
size of .swf file sets to 900kb… When I was using sIFR 2.0.7 it was about 100kb, using the same font. How can I decrease size of swf file ?
OK, nevermind, I already found the answer
Removing bold and italic font style
Hi,
I got this problem: I implemented sIFR in a standard website following all the steps in this tutorial. Strange thing happens: the content is displayed twice!
Once in the normal font (defined in another css file) and once in the Perpetua font, defined in sIFR!
How can I get it right so only the sIFR font will be shown???
Thanks for the tutorial.
I’ve been struggeling with sIFR for a while now but im honestly not a 100% behind it yet. The idea/concept of sIFR is insane. We really need this.
On the flipside, i’ve been experience a lot of different bugs on different browsers. Some IE browsers won’t replace the H# tags, some FF have different font-sizes.
If you dont believe, install Multiple IE’s or use browsershots on the example page.
I hope they’ll improve this soon. I would love to use this.
Hey, I’ve followed every single step in this tutorial. I’ve been going over and over for about an hour and a half and it still isn’t working.
I’ve also checked and i have all the necessary files stated but still its not working! I really wanna learn this! :S
Sounds like the tutorial is good from the feedback. However, sifr should be banned. A good tutorial on a hateful technology.
Is there anyway to use sIFR with jQuery? I have a site where the sIFR was working fine but now it won’t load where jQuery is being used.
Thanks!
hi i want to use a icon as a background image for the i am facing problem as the background image is not displaying. Please let me know how i can add image to a sifr selector.
Anyone know of way to get this working locally? Some flash setting? ..its annoying to have to run on a server and not locally..
?
Hi,
Great How-to, I am testing it, now its working on my site.
Thanks
Great! Just what I was looking for.
does anybody knows how to make background transparent?
I found solution. Now it’s implemented on my portfolio.
Sorry for bother
This is my favorite method for this except that it is NOT EASY to implement. I’ve done this 3 times now and I’ve always had problems. It never JUST WORKED!
I wish they’d make this process simpler somehow. It seems like there are always missing steps in the process.
Overall, a great way to do it and the best I’ve tried/seen out of about 8 different kinds.
nice tutorials!! But i can not give the different font color, how it is going to possible???