sifr two colours

Question

i'm using sifr for headings, and want to highlight certain words using a different colour.

i thought this could be achieved using sifr 3 and its support for tags such as em, and found a tutorial confirming such here: http://justcoded.com/article/two-colors-sifr3/

though, am encountering an error whereby the text within the em tag is not visible and the heading is spaced as though it was not there at all.

html:

<h1>Normal Style Here <em>Emphasised here</em> Yet Not here!</h2>

sifr-config.js

sIFR.replace(foundrygridnik, {
  selector: 'h1', wmode: 'transparent', forceSingleLine: true,
  css: ['.sIFR-root {color: #acd037; }',
    'em {color: #ffffff; }']
});

Answer 1

Try this, just have a replace call for each situation:

enter code heresIFR.replace(test, { selector: 'p', css: '.sIFR-root { letter-spacing: .3; leading: 0; background-color: #e6e6e6; color: #79868e; font-size: 15px; text-align: justify; text-indent: 20px; }' }); sIFR.replace(test, { selector: 'h4', css: '.sIFR-root { background-color: #e6e6e6; color: #79868e; font-size: 14px; text-align: right; }' });