Tutorials

Spice up Your Fonts – Customizing w/ sIFR

Tags: Beginner

I recently worked on a project where I wanted to use sIFR but also wanted to have a background image behind of my headings. I played around with it and found a simple way to get it going. I’m sure this is nothing new to some of you, but for those would like to know, here it is…

What is sIFR?

Scalable Inman Flash Replacement (sIFR) is an open source JavaScript and Adobe Flash based technology that enables the replacement of text elements on HTML web pages with Flash equivalents. It was initially developed by Shaun Inman and improved by Mike Davidson and Mark Wubben.

Check out sIFR Wiki overview of how to install it.

How do you add a background image to sIFR?

First download the sIFR package and edit the following:

index.htm (Javascript at the bottom)

Original Code:

// This is the preferred "named argument" syntax
	sIFR.replaceElement(named({sSelector:"body h1", sFlashSrc:"tradegothic.swf", sColor:"#000000", sLinkColor:"#000000", sBgColor:"#FFFFFF", sHoverColor:"#CCCCCC", nPaddingTop:20, nPaddingBottom:20, sFlashVars:"textalign=center&offsetTop=6"}));

I basically took out a few elements that I felt was not needed, you can choose leave them in, but what needs to be replaced is the sBgColor: "#FFFFFF" portion to sWmode:"transparent"

Revised Code:

	sIFR.replaceElement(named({sSelector:"body h1", sFlashSrc:"hero.swf", sColor:"#ffffff", nPaddingTop:20, nPaddingBottom:20, sFlashVars:"textalign=center", sWmode:"transparent"}));

Properties I modified:

• sFlashSrc:”hero.swf” – New font style I specified using their fla file
• sColor:”#ffffff” – Turned my font color to white
• sBgColor: “#FFFFFF” – Deleted and replaced with sWmode:”transparent”

sIFR-screen.css
Keep in mind, your default h1 still needs to exist for when javascript is turned off or for browsers that cannot support it.

Modify your .sIFR-hasFlash h1 class to the following:

h1 {
	font-size: 16px; /*--just an example of your default h1 properties--*/
}
.sIFR-hasFlash h1 {
	visibility: hidden;
	margin: 0;
	height: 45px; /*--Pixel height of your sIFR font--*/
	background: #111 url(h1_bg.gif) repeat-x left center;
}

Conclusion

This is just a simple way to add more customization to your sIFR. I’ve run into a few cross-browser issues (especially when browsers have updates) so, do keep up with the latest sIFR versions. If anyone has other cool customization techniques, please share them!