When styling sIFR 3, When should I use JavaScript/CSS/Flash?

Question

I'm using sifr for the first time today. I have it up and running; however, I need some help. Rather than explain, I'll show you the code below:

<div id="pullquote">“Fantastic property, facilities and location. We
      couldn’t have asked for more!” <em>Mr &amp; Mrs. Smith</em></div>

So far, so good. I have then styled that in the same document in case flash/JavaScript is disabled. No problem.

sIFR.replace(journal, {
  selector: 'div#pullquote',
  wmode: 'transparent',
  css: [
    '.sIFR-root { text-align: center; color: #be7705; font-size: 30px; background-color:#fdefd4; }',
    'em { font-style: normal; color: #1d5d69; font-size: 26px; }']
});

That's what is included in my JavaScript file. Am I correct in styling the element like this? I got slightly confused with the selector, then using a second selector within js-css. Once again, there is also sifr.css. What should be included in this document? Should I be styling the element here?

I suppose my question is: What should be included, and what styling should be done in sifr-config.js and what styling should be done in sifr.css?

Thank you :)

Answer 1

In the CSS for the HTML page (sifr.css) you can add a style to hide the elements that sIFR will replace before does so, and you can do some tuning of the text so the text size maps better to the Flash font.

The selector parameter for sIFR.replace() is used to select the elements you wish to replace by sIFR.

The css parameter contains the CSS used inside the Flash movie. At this point, all CSS selectors are relative to the element you replaced, so if you replace an h1#foo, then you select em rather than h1#foo em. This is the only place you can style the text inside the Flash movie, aside from font size, which, if not specified here, is derived from the font size of the replaced element.

Answer 2

That's great! Thanks for the help Mark :) I found it hard reading through the wiki, your post has made it much more clear for myself! I didn't understand the need of re-styling before it is replaced untill your above post, nor supplying css to flash. Thanks again.

It appears I dont have enough 'reputation' to vote up your comment, or to reply to you direct.