How do I get colors to work in sIFR 3 r436?

Question

I've got a demo page up here; you can view source to see what I'm trying to do.

As you can see, everything about it seems to be working except for colors. I'm trying to set the color to blue (#0000ff), but it stays as black. I created a custom SWF file for my font, embedding four different variations of a single font in order to accommodate for different styles per these instructions (because this particular font family stores regular, bold, italic, and bold italic as four disjoint font names).

For posterity I'll paste some of the source code from that demo page I linked to here:

<style type="text/css">
h1.sifr {
 color: #0000ff;
 font-family: 'Myriad Pro';
 font-size: 1.75em;
 margin-bottom: 0;
}
</style>
<script type="text/javascript">
var myriad_pro = {src: 'myriad_pro.swf'};
sIFR.activate(myriad_pro);
sIFR.replace(myriad_pro, {
 selector: 'h1.sifr',
 css: {
  '.sIFR-root': {'color': '#0000ff', 'font-family' : 'Myriad Pro'},
  'em': {'color': '#0000ff', 'font-family' : 'Myriad Pro Italic' , 'font-style' : 'plain'},
  'strong': {'color': '#0000ff', 'font-family' : 'Myriad Pro Bold' , 'font-weight' : 'normal'},
  'em strong, strong em': {'color': '#0000ff', 'font-family' : 'Myriad Pro Bold Italic' , 'font-style' : 'plain', 'font-weight' : 'normal'}}
 }
);
</script>

What did I forget? How do I get colors working?

Answer 1

I got it working here. The only difference is that my sifr text is inclosed in links, and it changes color on mouse hover.

My script looks like this:

 <script language="javascript" type="text/javascript">
        //sIFR.useStyleCheck = true;
        var eurostile = {
            src: '/images/eurostile.swf'};
        sIFR.activate(eurostile);
        sIFR.replace(eurostile , {selector: "div#mainNav li", wmode: "transparent", 
        css: [
             'a { text-decoration: none; color: #666666; }'
            ,'a:link { color: #666666; }'
            ,'a:hover { color: #00299b; }'
        ]});
        sIFR.replace(eurostile , {selector: "div.menuHeadingText", wmode: "transparent"
        ,css: [
            '.sIFR-root { color: #FFFFFF; }',
            'a { text-decoration: none; color: #FFFFFF; }'
            ,'a:link { color: #FFFFFF; }'
            ,'a:hover { color: #FF5A00; }'
        ]});

        sIFR.replace(eurostile , {selector: "h2.boxHeading", wmode: "transparent"
        ,css: [
            '.sIFR-root { color: #666666; }'
        ]});

Hope it helps.

/Klaus

Answer 2

You might need to uppercase the color values, and shouldn't it be font-style: normal rather than plain?

Answer 3

Ok, sorry guys. It turns out I was just over-thinking this way too much. In the end I ended up re-exporting my SWF file (I think I might have done it somewhat improperly the first time) and dumbing down my JavaScript significantly. I still included an embedded copy of all "four" fonts in the Flash file--I set the main dynamic text box to Myriad Pro/Regular, and then I created 3 more dynamic text boxes (with no text in them) set to Bold, Italic, and Bold Italic respectively. Then I made sure to click "Character Embedding" on all of them and ensure the characters I wanted were included.

Finally my JavaScript ended up looking like this:

<script type="text/javascript">
var myriad_pro = {src: 'myriad_pro.swf'};
sIFR.activate(myriad_pro);
sIFR.replace(myriad_pro, {
    selector: 'h1.sifr',
    css: {
        '.sIFR-root': {'color': '#0000ff'}
    }
});
</script>

I didn't have to change the fonts or anything, but I did still have to make sure all four got included in the Flash file. Looking back it seems a bit odd that it did work when I said font-family: "Myriad Pro Italic", etc., since that isn't technically the font name. But for whatever reason that caused the conflict with the colors, so when I just referred to it as plain old "Myriad Pro" and let it figure out the italicizing and bolding, then it all worked. And @Mark - the lowercase/uppercase color hex codes don't matter. However it does have to be the full 6-digit hex code (i.e. #00f won't work).