/***************************************************************************** It is adviced to place the sIFR JavaScript calls in this file, keeping it separate from the `sifr.js` file. That way, you can easily swap the `sifr.js` file for a new version, while keeping the configuration. You must load this file *after* loading `sifr.js`. That said, you're of course free to merge the JavaScript files. Just make sure the copyright statement in `sifr.js` is kept intact. *****************************************************************************/ // Make an object pointing to the location of the Flash movie on your web server. // Try using the font name as the variable name, makes it easy to remember which // object you're using. var gothammedium = {src: 'sifr/gotham.swf' }; var bodoniitalic = {src: 'sifr/bodoni_italic.swf' }; // Now you can set some configuration settings. // See also . // One setting you probably want to use is `sIFR.useStyleCheck`. Before you do that, // read . // sIFR.useStyleCheck = true; // Next, activate sIFR: sIFR.activate(gothammedium, bodoniitalic); // be red. Read more about styling at . sIFR.replace(gothammedium, { selector: '.innerheader h1' ,wmode: 'transparent' ,css: { '.sIFR-root': { 'background-color': '#fbdadb', 'leading': '-5', 'letter-spacing': '0', color: '#fbdadb' } } ,selectable: false }); sIFR.replace(bodoniitalic, { selector: '#innercontentleft h2' ,wmode: 'transparent' ,css: { '.sIFR-root': { 'background-color': '#fbdadb', 'leading': '-5', 'letter-spacing': '0', color: '#e41b21' } } ,selectable: false }); sIFR.replace(bodoniitalic, { selector: '#innercontentleft h4' ,wmode: 'transparent' ,css: { '.sIFR-root': { 'background-color': '#fbdadb', 'leading': '-5', 'letter-spacing': '0', color: '#231f20' } } ,selectable: false }); sIFR.replace(bodoniitalic, { selector: '#innercontentboth h4' ,wmode: 'transparent' ,css: { '.sIFR-root': { 'background-color': '#fbdadb', 'leading': '-5', 'letter-spacing': '0', color: '#231f20' } } ,selectable: false }); sIFR.replace(gothammedium, { selector: '.hilitebox h1' ,wmode: 'transparent' ,css: { '.sIFR-root': { 'background-color': '#fbdadb', 'leading': '-5', 'letter-spacing': '-.5', color: '#ffffff' } } ,selectable: false }); sIFR.replace(gothammedium, { selector: 'h3.headerbar2' ,wmode: 'transparent' ,css: { '.sIFR-root': { 'background-color': '#fbdadb', 'leading': '-5', 'letter-spacing': '-.5', color: '#ffffff' } } ,selectable: false }); // If you want, you can use multiple movies, like so: // // var futura = { src: '/path/to/futura.swf' }; // var garamond = { src '/path/to/garamond.swf' }; // var rockwell = { src: '/path/to/rockwell.swf' }; // // sIFR.activate(futura, garamond, rockwell); // // Remember, there must be *only one* `sIFR.activate()`! // Now we can do the replacements. You can do as many as you like, but just // as an example, we'll replace all `

` elements with the Futura movie. // // The first argument to `sIFR.replace` is the `futura` object we created earlier. // The second argument is another object, on which you can specify a number of // parameters or "keyword arguemnts". For the full list, see "Keyword arguments" // under `replace(kwargs, mergeKwargs)` at // . // // The first argument you see here is `selector`, which is a normal CSS selector. // That means you can also do things like '#content h1' or 'h1.title'. // // The second argument determines what the Flash text looks like. The main text // is styled via the `.sIFR-root` class. Here we've specified `background-color` // of the entire Flash movie to be a light grey, and the `color` of the text to /*=========================================== DEMO var cochin = { src: 'cochin.swf' ,ratios: [7, 1.32, 11, 1.31, 13, 1.24, 14, 1.25, 19, 1.23, 27, 1.2, 34, 1.19, 42, 1.18, 47, 1.17, 48, 1.18, 69, 1.17, 74, 1.16, 75, 1.17, 1.16] }; var rockwell = { src: 'rockwell.swf' ,ratios: [6, 1.41, 9, 1.35, 15, 1.29, 21, 1.25, 22, 1.22, 27, 1.24, 29, 1.21, 34, 1.22, 41, 1.21, 45, 1.2, 46, 1.21, 59, 1.2, 68, 1.19, 69, 1.2, 96, 1.19, 97, 1.18, 102, 1.19, 103, 1.18, 107, 1.19, 108, 1.18, 112, 1.19, 114, 1.18, 116, 1.19, 120, 1.18, 121, 1.19, 1.18] }; // You probably want to switch this on, but read first. // sIFR.useStyleCheck = true; sIFR.activate(cochin, rockwell); sIFR.replace(rockwell, { selector: 'h1' ,css: [ '.sIFR-root { text-align: center; font-weight: bold; }' ,'a { text-decoration: none; }' ,'a:link { color: #000000; }' ,'a:hover { color: #CCCCCC; }' ] }); sIFR.replace(rockwell, { selector: 'h5#pullquote' ,css: 'em { font-style: normal; color: #660000; }' ,selectable: false }); sIFR.replace(cochin, { selector: 'h3.sidebox' ,css: { '.sIFR-root': { 'background-color': '#DCDCDC' } } }); sIFR.replace(cochin, {selector: 'h2,h3'}); sIFR.replace(cochin, { selector: 'h4.subhead' ,css: { '.sIFR-root': { 'color': '#660000', 'letter-spacing': -1.5, 'text-transform': 'capitalize' } } ,filters: { DropShadow: { knockout: true ,distance: 1 ,color: '#330000' ,strength: 2 } } }); =============================================== STYLING http://wiki.novemberborn.net/sifr3/Styling =============================================== background-color Specifies the background color of the Flash movie. A value of transparent does not imply wmode: 'transparent', as the specified background-color is used as a fallback in case transparency is not supported. leading Use leading: with a number. You can only use a number, without a unit. Ex. leading: -10; See Livedoc 2812. kerning See Livedoc 2811. letter-spacing Use letter-spacing: with a number. You can only use a number, without a unit. Ex. letter-spacing: -3; opacity See Livedoc 2732. text-transform Specifes text transformation. This is handled by sIFR because Flash does not support this natively. It is applied to all text, if you want to apply it to a specific element you'll need to use the modifyContent function. If sIFR.forceTextTransform is false, sIFR will not perform the transformation. font-size (revision 209+) 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. This prevents the text from scaling with the browser text. Think very, very hard about doing this, and then think again. When specified for other selectors, use the % unit to make the font size relative to the main font size. This only works when specified in JavaScript. Use a unit-less value to hardcode a pixel size, but be aware that this breaks scaling. cursor This property needs to be specified for the .sIFR-root class. Its accepted values are pointer, which causes the default pointer ("hand") cursor to appear, and arrow, which stops the pointer from appearing. The following properties are supported by Flash natively: text-align You can use left, center, right. text-decoration You can use none and underline. margin-left You can only use a number, without a unit. margin-right You can only use a number, without a unit. font-weight You can use normal and bold. Make sure you've embedded the font in bold if you want to use it. font-style You can use normal and italic. Make sure you've embedded the font in italic if you want to use it. text-indent You can only use a number, without a unit. color As explained above. display You can use inline, block and none. Use the following properties at your own risk: font-family Example sIFR.replace(YourFont, { selector: 'h2', css: [ '.sIFR-root {leading: -2;}' ] }); =============================================== FILTERS http://wiki.novemberborn.net/sifr3/Filters =============================================== */