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!
Related Posts
Check out some more great tutorials and articles that you might like
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )NGP August 5th
Hey there:
Great tut! Been looking for a good one on how to use sifr for awhile now. Keep up the good work!
( )Jordan August 5th
Thanks for the tutorial! sIFR is something I’ve never been able to do right, until now!
( )Jeffrey Way August 5th
Everyone – I’d love to hear your thoughts on whether to use siFR or not. Personally, I’m right on the border – though I tend to stray away from it..for usability reasons.
-Editor
( )Tom August 5th
Great tutorial! Thanks for covering this.
I just implemented sIFR 2.0.6 on my site – http://smallandsimplethings.org. It wasn’t too bad but I like the new css-type selectors in the js. That will make it a little easier for designers to implement. Also new, using css to set hover colors, also making it just a little more user friendly.
Keep it coming!
( )Rick August 5th
If you use other JavaScript libraries like jQuery or MooTools, be aware that these libraries don’t always play nice with siFR.
( )Dan August 5th
Heh, this came at a good time. Thanks
( )PR Agency August 5th
Thanks for this excellent tutorial. I always used to wonder how some people have such great looking headings in their web pages and if I could also achieve it somehow. Now I can, thanks to you!
( )Richard, Peacock Carter August 5th
Nicely written: have been thinking about using sIFR for a while, but this may tempt me to actually use it!
( )Jitendra Vyas August 5th
this is the best tutorial to use SIFR so far.
( )Adrian | Rubiqube August 5th
sIFR = Nice for headings, very bad for links.
( )Jaswinder Virdee August 5th
Yeah excellent timing, this will come in handy soon
( )losted August 5th
Thanks for sharing.
But it would be nice if sIFR could handle gradient…
( )Sumesh August 5th
Awesome tutorial. Stumbled.
( )Jason August 5th
Awesome tut! I was just about to implement this too. Kudos.
( )Moeed August 5th
Nice tutorial, but I think ‘implanting’ sounds a bit comical, maybe the word you were looking for was “implementing” ?
( )Shane August 5th
A great tutorial – I’ve been toying with the idea of using sifr for a while.
What makes this tutorial stand out is the detailed coverage of doing the whole thing in flash, with lots of nice screenshots to help us folk along.
Bookmarked.
( )Jonathan August 5th
I’ve also been toying with the idea of using sifr for awhile and would love too, but the usability aspect stops me from incorporating it into anything even when I know I should, but don’t.
( )antipix August 5th
i was already running sifr3beta on my wordpress site…
but i didn’t succeed to make it work with sifr javascript file gzipped and minified, if someone has and idea ^^
( )James August 5th
SIFR looks good – it’s been around for a while and I’m surprised at myself for not having a go.
On a non-sifr note: This guy at work has come up with a really fancy way of using custom fonts. It uses JavaScript to map vector images of the fonts or something like that (completely degradable/unobtrusive) – very advanced! … I didn’t really understand it! – Sorry I can’t explain it, I’ll try and ask him next time I see him.
( )Paul August 5th
I didn’t read the whole tutorial, but I think the introduction can be improved with a couple of clarifications;
One of the primary advantages of sIFR is font embedding. One can use a variety of custom fonts that are usually not available by default in browsers. For a designer this can be invaluable in getting a production site as close to a photoshop mockup as possible. Though not recommended for large bodies of text (this will create noticable lag), it is very handy for headers, straplines and menu items.
Secondly, if javascript is disabled or the browser lacks flash support (such as mobile devices), the text rendered by sIFR *will* display as regular text, but without the desired font. This is definately one of sIFR’s gerat features that make it very flexible, negating worry about accessibility issues.
Apologies if you may have made these points clear already, but other than that good tutorial.
( )Erika August 5th
I think that one has to be careful with their choice of using sIFR, for several reasons beyond usability. It just doesn’t seem like reliable technology to me. I’m in love with the idea of having more creative control over the fonts that I can use, but the liability is too great when it comes to a client’s project.
Either way, this tutorial was a great resource, as I use sIFR on my personal websites… but I wouldn’t be able to use it on a client.
( )Daz August 5th
I wasted nearly a whole day at work on Monday figuring out sIFR! This is a really well written tutorial, cheers.
I just found an alternative to sIFR called Facelift that uses Javascript and PHP to create images. It seems very straight forward, but dunno how Wordpress-friendly it would be. http://facelift.mawhorter.net/
( )j-man August 5th
sIFR is nice for static headlines and such, but as mentioned a couple times above, i’d advise against using it for links due to usability issues (no right click). Also some of the styling implications can make it a bit tricky to integrate well with certain designs.
Personally, i’ve experimented with it on my own site (well, at least a development/sandbox version), and found that I wasn’t completely satisfied with the results in my particular application. But it all depends on the specific situation and the amount of usability degradation that you’re willing to tolerate.
At the very least it’s probably the best workaround available when it comes to customizing your typography
( )United Voices August 5th
Great tips. I’ve been looking for a good one on how to use sIFR for awhile now. sIFR looks quite impressive and it has been here for quite some time. I’m surprised at myself for not having a go.
Keep up the good work!
Cheers.
( )Tony August 5th
This is an alternative, much easier to implement.
It is similar to sIFR but uses JavaScript + PHP rather than Flash.
http://facelift.mawhorter.net/
Enjoy!
( )Andrew August 5th
Jeffrey – I’d suggest staying clear of sifr, it’s a complete pain in the neck. If you are to use it, only use it for content headings.
( )begs August 5th
I dont’t know, what usability problems people fear here.
If Javascript is turned off, sIFR doesn’t work and you see your pages like before – Without graphical headers, but the good old ones…
Nice tutorial though!
( )Mark Wubben August 6th
Great tutorial! Some notes though
1) When you export the Flash movie, only use the regular, bold and italic font styles if you’re really going to use them. Otherwise the Flash movie unnecessarily becomes a lot larger.
2) You should specify `line-height: 1em` in the `.sIFR-active h2` class. Doesn’t really matter if you use `px` for the font size, but it’s good practice.
3) `line-height` inside the Flash movie is controlled using the `leading` CSS property for `.sIFR-root`.
4) You need to style `.sIFR-root` to specify background color and font color for the general text. In your example you replaced a link, so this does not apply.
Regarding MooTools / jQuery and sIFR: they should play just fine together as long as you keep them separate. Don’t activate sIFR from the “on document ready” event for example.
@losted, regarding gradients: sIFR 3 supports the Flash 8 text filters, so that may be a way to achieve gradients.
@antipix, the sIFR 3 JavaScript has already been minified. Doing it again will likely break stuff, since it’s using something called conditional compilation in IE.
( )Brent March 16th
3) `line-height` inside the Flash movie is controlled using the `leading` CSS property for `.sIFR-root`.
can you give an example of that? How would you set the leading? it’s not a normal css property…
( )Joefrey Mahusay August 6th
Nice tut. As i know this is the first tut about sIFR. Thanks for sharing.
( )Gilles August 6th
Hey,
nice tutorial
one small thing though; WordPress has deprecated the ’stylesheet_directory’ parameter for the bloginfo(); template tag. Using ‘template_directory’ is the new way, and is just the same usage, you won’t have to change anything else, simply search and replace ’stylesheet_directory’ width ‘template_directory’.
Nice work though
( )Jake August 6th
@losted it is possible to add gradients to sIFR using some slightly modified trickery that was published at web designer wall.
sIFR is nice, but on slower/older pc’s it can cause problems (it’s load is quite demanding).
( )Marin August 6th
Nice tuto there but I think you just miss one thing.
When dealing when internationalization, you might encounter foreign/accentuated characters.
In order to get those characters displayed correctly in your sIFR, you need to embed the extended charsets ( see pic: http://nettuts.s3.amazonaws.com/033_ImplementSifr/font-fla.png , right to the anti-alias settings you should have an “Embed” button).
Pick the charset you need (mostly Latin I & Latin Extended for Européan charsets).
Also note that the swf generated will be a bit heavier to download.
( )haRacz August 6th
Alternative ?
( )Facelift Image Replacement -> http://facelift.mawhorter.net/
Adam August 6th
So after integrating sIFR3 onto a website, can search engines still read the content? Due to flash i thought i’d ask.
( )JamesS August 6th
The differences between IE6 and IE7 you mention at the beginning of your article are caused by Microsoft’s ClearType being on or off. IE6 is perfectly capable of displaying ClearType text, but it has to enabled system-wide on the actual OS. (Right-click desktop > properties > appearance > effects > font smoothing…)
ClearType was introduced in Windows XP, but is turned off by default… Even MS admits that this was a mistake. In IE7, the browser overrides the user’s OS settings and switches it on, while Windows Vista has it turned on by default… Anyway, a bit off-topic, but it’s enough for me to avoid sifr because of the speed/performance issues you mentioned.
( )Connor August 6th
Nice tuturial…although personally I usually don’t use it that much.
( )acms August 6th
Nice, thanks for sharing.
( )Patrick August 6th
Why use sIFR with a web-safe typeface like Tahoma? Isn’t the real point of this technology to integrate type families that aren’t traditionally web safe?
( )antipix August 6th
@ Mark Wubben
Thanks for your answer, really happy to see one person that understands what I said ^^
( )In fact, I try to implement sifr in a site that aggregates, minifies and gzips on-the-fly all my javascript before sending them (because i got a very cheap hosting). As you said, the minify step breaks sifr in Internet Explorer (it strips the conditionnal comments…).
I’ll find a way to make all that stuff work later but thanks again for your answer.
Alex August 6th
For those asking about search engines reading the text, there will be no issues there. The search engine would “see” the non-sifr’d version of the text, since it’s implemented using Javascript.
Same goes for users who don’t have JS turned on. The only real concern with sifr is the file size of a swf with a larger number of glyphs embedded in it. Try to only embed what you need. On the up side, though, the swf will get cached, along with the js file, so each of them will only get downloaded once.
( )Miglen August 6th
Verry usefull! I’ll leave a trackback later.
( )mattems August 6th
This is great! Typography is great!
sIFR can make the web beautiful and Philo made it a much more pleasent learning experience.
thanks!!
( )Taylor Satula August 6th
Nice but use sparringly
( )insic August 6th
this one is cool but there are downsides which are disappointing.
( )insic August 6th
and i think maybe FLIR is better coz it uses PHP. it omits the sIFR flash issue downside.
( )firman August 7th
A great tutorial as always…thank you
( )Hayes Potter August 8th
I did everything in this tutorial, and it is not working. I installed flash player 9, and checked to see if it was in my firefox 3 install and it was. I’m dead sure that I did everything the tutorial said, please help.
( )haRacz August 12th
@Insic – in sIFR u can copy text and in FIRL u cant.
( )And that’s why i’m thinking sIFR is better.
Jim Cook August 20th
Not seeing it sized correctly in FF3. Font size declarations for H1 in CSS have no effect. Would reset.css be affecting how it is displayed? Oddly, works fine in IE6.
( )Fouad Masoud August 21st
hey gr8 tut here. quick Qs though.
how can i apply a style to the h2 directly without having an a inside it? and how can i remove/change the back ground color of the swf?
( )Fouad Masoud August 21st
oh and another one how can i activate multi fonts for different tags say h4?
( )Josh August 31st
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.
( )Derek September 7th
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.
( )James Pearson September 8th
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
( )Jordan Payne September 20th
very helpful, thanks!
( )Valentino Aluigi October 3rd
Damn!
( )James, you’r right!
Someone should fix this!
I stumbled on the same error.
Lance October 6th
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.
( )David October 14th
sIFR has been around for a lonnnnnng time. Amazed most of you are just now finding out about it. Where have you been??
( )Easily Amused October 24th
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” />
S November 11th
Thanks for the Copy/Paste of the Sifr3 wiki.
( )dazao December 2nd
great!
It’s posible to be a transparent background?
Somebody knows?
( )Michelle December 3rd
Great tutorial! You helped me out of a tight spot.
( )Sam December 10th
@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.
( )procopy December 11th
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?
( )procopy December 11th
Nevermind, got it…
( )Brent March 16th
what was the problem with what you had?
( )Alex Wolfe December 13th
Thanks Philo, Good article. It was brief and to the point.
( )WP Cult December 15th
That’s a great tutorial!
( )sean December 26th
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?
( )sean December 26th
Damn everthing I wrapped in code tags was deleted
( )Jorix January 7th
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’
};
Matt January 18th
@ 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.
( )typowork January 20th
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
( )Jose January 30th
It’s good to point out that sIFR only works from a web server and not locally. This is due to Flash restrictions.
( )Widodo February 3rd
I use old version SIFR on http://aplikasihape.com . Old SIFR more faster than newest version sifr.
( )Harsha M V February 12th
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
( )Bob March 4th
this simply does not work
( )Chris Porter March 9th
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?
( )negs April 2nd
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.
( )Jaspal Singh May 30th
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.
( )Peter June 2nd
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.
( )wpdigger June 3rd
Keep up the good work! Thanks for the tutorial…
( )internetFluent June 15th
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
suvi June 17th
hello
if i do not want background color then what i do. kindly adivce.
( )Jerome July 9th
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.
( )Mark July 13th
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 ?
Mark July 13th
OK, nevermind, I already found the answer
( )Removing bold and italic font style
Marcel July 22nd
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.
( )Philip Wallage August 21st
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.
Richard Acquaye August 27th
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
( )Simon September 29th
Sounds like the tutorial is good from the feedback. However, sifr should be banned. A good tutorial on a hateful technology.
( )Sara September 30th
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!
( )neel October 7th
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.
( )Dan October 27th
Anyone know of way to get this working locally? Some flash setting? ..its annoying to have to run on a server and not locally..
?
( )Umar November 17th
Hi,
Great How-to, I am testing it, now its working on my site.
Thanks
( )