sIFR
Ahhh…sIFR - also know as “Scalable Inman Flash Replacement”. I’m not going to go through and tell you the history and all that - there’s plenty of information on it out there for you to peruse at your leisure. Me, I’m a “get to the point” kinda gal - as you all know.
For a long time, people have wanted to move away from he “standard” fonts found in a particular browser, and use a nice font for headings, titles, and such on their sites. Usually, the way around this was to create said text as an image file, and plug it in on the site. But oh, how lovely would it be if this could be done dynamically, rather than creating an image for every single piece of text you wanted to replace?
I’ve done it before, using dynamic text replacement, which creates PNG images on-the-fly. This is a popular method for people who want to have this ability, but don’t have access to Flash. But I’ve noticed if you use it for a lot of different things (like a recent client who wanted EVERY link replaced, as well as headings and certain pieces of text) you’re gonna back things up like eating a pound of cheese on constipation day. (yes, as if we all have a “constipation day”. Mine’s on Friday. LOL)
Ahh, how I wanted to use sIFR. And now that I have my shiny new Mac with CS3, I can finally do it. So last week, I started to try it out for the first time. And I failed. Miserably.
No matter what I did, I couldn’t get the damned thing to work. The closest I ever got was not by using the wiki, but by using this tutorial. But still, I failed miserably. I just couldn’t get it to go.
I finally found a WordPress plugin that worked, but then the links wouldn’t. Turned out the plugin used sIFR 2.0 - which has a known bug for failing when using on links. (I will say, though, I found a useful tidbit of information that may help fix this - but I haven’t had the chance to try it and see. Apparently, sIFR works on the content of whatever you’re calling in. So if you have a link within a list, then you want to call in “li”, not “li a”. When I did that, I got my little hand cursor over the links, and the links worked again. BUT - like I said, I haven’t had a chance to try this for the WP plugin, so I don’t know if it’ll work.)
So, I was stuck.
Of course, I HAD to get it to work, and I finally did.
You can follow the Design Intellection tutorial. For the most part, that sucker is right on. The things that actually got me were the following two items:
- Put in a full path to the .swf file. I was using a relative path to the file, because I was inserting it into a theme design - so I needed something relative. But it didn’t work until I had a full path. Once I did that, it worked. I just need to remember to change it when I pass it on
- Don’t use the configurations used in the tutorial. Okay, I know them’s fightin’ words, but I’ll explain why I say this. This didn’t work FOR ME:
css: [
'.sIFR-root { MAIN CSS PROPERTIES }'
],
No matter what I did, when I formatted my styling in this manner, it refused to work. I looked at some older stuff on sIFR, and found that when I applied styling via the old method, I had no issues.
Don’t ask me why.
So when I changed the above to this:
css: {
'.sIFR-root': {
MAIN CSS PROPERTIES
}'
}
It was all good. So if you want a more particular example, say you wanted to replace a list item link in a menu.
sIFR.replace(avenir, {
selector: '#menu li',
css: {
'.sIFR-root': {
'text-transform': 'capitalize',
'font-size' : '18px'
},
'a:link': {
'color': '#CCCCCC'
},
'a:hover': {
'color': '#000000'
},
},
wmode: 'transparent'
}
);
Bam! All of your list items links now have the text replacement and the right color, and the links work. Notice that the styling is very much like CSS - with just slight differences. For the most part, you can apply any CSS styling in this method, and you’ll be all good.
Ahh, sweet sIFR. Oh, how I love thee.
Posted by admin
May 27th, 2008
