Click the image above to see the live end result from the video.
In this week’s web design video blog, Nick and I conclude our three part series on using sIFR Font Replacement. In the final video, we take a look at some common tuning and styling tips, allowing the web designer to manipulate sIFR’s background, text colour, link colour, text alignment and letter spacing amongst others.
Styling your sIFR text can be tricky as sIFR does ignore the majority of commands set out in your external Stylesheet. The majority of styling has to be completed through the sifr-config.js file by using properties that are deliberately similar to working with CSS.
Default sIFR Styling
The code below represents the default sIFR coding when you download the sIFR folder. As standard the layout consists of red text on a white background. Simply adding to this default coding allows the designer to manipulate the text in a similar manner to CSS.
sIFR.replace(futura, {
selector: 'h1',
css: '.sIFR-root { background-color: #F9F9F9; color: #FF0000; }'
});
The modified sIFR settings featured in the video
The following coding contains all of the features described and featured in the video. On line two is the simple yet important code for allowing the background to be transparent, and line 3 onwards consists off the common style attributes that you are likely to need when working with sIFR.
sIFR.replace(eurostile, {
selector: 'h1', wmode: 'transparent',
css: '.sIFR-root { color: #333333; text-align:center; letter-spacing:-2; text-transform:uppercase; leading:50; } .sIFR-root a { color: #333333; text-decoration: none; } .sIFR-root a:hover { color: #7cab29; text-decoration: none; } .sIFR-root a:visited { color: #333333; text-decoration: none; }'
});
