2010-10-06 25 views
0

J'essaie d'utiliser sIFR 3. Je le fais fonctionner et peut faire un peu de style, comme le changement de la taille de la police. Mais si j'essaie de changer la couleur ou le poids, rien ne change. Je ne comprends pas ce que je fais qui permet à un style de travailler, et d'autres de ne pas le faire.sIFR 3 - ne peut pas style pour la couleur, le poids, etc

Mon html est:

<html> 
<head> 
<title>Test sifr</title> 
<link rel="stylesheet" href="sifr.css" type="text/css"> 
<script src="sifr.js" type="text/javascript"></script> 
<script src="sifr-config.js" type="text/javascript"></script> 
</head> 

<body> 
Starting...<br> 
<span class='testsifr'>Testing #2</span><br><br> 
Finished.<br> 
</body> 
</html> 

Mon sIFR-config.js est:

var gotham = { src: 'GothamMBLCond.swf' }; 

sIFR.activate(gotham); 

sIFR.replace(gotham, { 
    selector: 'span.testsifr' 
    ,css: [ 
    'span.testsifr{ color:#0000FF; font-weight:bold;}' 
    ] 
}); 

Mon sIFR.js est:

@media screen { 
    .sIFR-flash { 
    visibility: visible !important; 
    margin: 0; 
    padding: 0; 
    } 

    .sIFR-replaced, .sIFR-ignore { 
    visibility: visible !important; 
    } 

    .sIFR-alternate { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 0; 
    height: 0; 
    display: block; 
    overflow: hidden; 
    } 

    .sIFR-replaced div.sIFR-fixfocus { 
    margin: 0pt; 
    padding: 0pt; 
    overflow: auto; 
    letter-spacing: 0px; 
    float: none; 
    } 
} 

@media print { 
    .sIFR-flash { 
    display : none !important; 
    height  : 0; 
    width  : 0; 
    position : absolute; 
    overflow : hidden; 
    } 

    .sIFR-alternate { 
    visibility : visible !important; 
    display : block !important; 
    position : static !important; 
    left  : auto !important; 
    top  : auto !important; 
    width  : auto !important; 
    height  : auto !important; 
    } 
} 

/* 
Place CSS rules for to-be-replaced elements here. Prefix by .sIFR-active 
so they only apply if sIFR is active. Make sure to limit the CSS to the screen 
media type, in order not to have the printed text come out weird. 
*/ 
@media screen { 
    .sIFR-active span.testsifr { 
    font-family: Verdana; 
    visibility: hidden; 
    font-size:48px; 
    color:#0000FF; 
    font-weight:bold; 
    } 
} 

Comme je le dis, il rend bien , mais en noir, au lieu de bleu, et au poids régulier au lieu de gras. Je sais que je lui demande d'aller en bleu/gras à la fois dans les fichiers .js et les fichiers .css, mais j'ai essayé chaque endroit singulièrement, et obtenir les mêmes résultats. Mais je peux changer la taille de 48px à d'autres valeurs, et le changement de taille de police prend effet. Pourquoi mes changements de poids ne prendront-ils pas effet? & Des idées?

Tom

Répondre

1
var gotham = { src: 'GothamMBLCond.swf' }; 

sIFR.activate(gotham); 

sIFR.replace(gotham, { 
    selector: '.testsifr', 

    css: ['.sIFR-root {color: #0000FF; font-size: 16px; background-color: #CCCCCC; }', 
     'a { text-decoration: none; }', 
     'a:link { color: #000000; }', 
     'a:hover { color: #FF4B33; }', 
     'strong { font-weight: bold; color: #0000FF; }', 
     'em { font-style: italic; color: #0000FF; }', 
     'strong em { font-style: italic; font-weight: bold; color: #0000FF; }', 
    ], 

    forceWidth: true, fitExactly: false, 

    filters: { 
     DropShadow: { 
      knockout: false 
      ,distance: 2 
      ,color: '#333333' 
      ,strength: 2 
      ,alpha: .6 
      ,blurX: 3 
      ,blurY: 3 
     } 
    } 
}); 

Copiez le code ci-dessus, il vous donnera beaucoup d'options quoi faire;) De plus: Je presque jamais utiliser le fichier CSS, je crée habituellement un nouveau fichier CSS où je corriger manuellement les déplacements de l'objet flash, dans votre cas ce serait (par exemple)

.testsifr object { 
    padding: 0; margin: 0; line-height: 0; margin-top: -10px; 
}