I'm trying to style a couple of instances of sIFR text in a site I'm working on, and I don't quite understand the technique recommended in the styling documentation.
It says that: "When specified for the .sIFR-root class and given a px unit, this determines the actual font size sIFR uses to render the Flash movie", but then warns you off of doing this as it will make the text unscalable.
It then says that "When specified for other selectors, use the % unit to make the font size relative to the main font size," but I don't know what "other selectors" they're referring to there. It says that styling must be specified in the sifr-config.js file, but the only place in that file I can see where you can enter your own CSS is the .sIFR-root class. Here's the code that calls each instance of sIFR:
sIFR.replace(inkburrow, {
selector: '#sidebar h3', css: '.sIFR-root { background-color: #F7F8F2; color: #222222; font-size: 24px; }' });
(in this instance, the specific font, colours, etc. are those I'm using). So I'm not sure where other than in the .sIFR-root class they want you to put a relative font-size. Putting any unit other than pixels in the .sIFR-root class doesn't work - I tried it. And giving any kind of font styling to the selector being replaced (in this case #sidebar h3) in the site's regular style sheet has no effect - tried that too.
As you can see, currently I'm doing it the way they warned against: setting a px size in .sIFR-root. But I'd rather be able to use a relative size if possible - I just can't figure out where I'm supposed to put it!