This is the sIFR 3 (Scalable Inman Flash Replacement) plugin for inserting rich accessible typography in you web pages.Note that sIFR 3 is still in beta.Check http://dev.novemberborn.net/sifr3/beta/demo/ to see what is possible using sIFR 3.
InstallationTo install the sIFR plugin type this command in your project's root folder:
Now start your application using run-app. The first time you do this static resources from the plugin are copied to /webapp/plugins/Sifr-0.1 in your project's root folder. These resources are:
grails install-plugin /path/to/grails-Sifr-0.1.zip
Getting StartedTo replace the normal h1, h2, h3 etc. with text from the Flash movies, the mentioned resources above need to be linked in the <head> of your pages. This can be done by adding the <g:sifrHead> tag in the main.gsp of your project:
By default the sIFR-debug.js is not included, but if you need it just use:
Now start your app with run-app. All static resources (css and js files) will be copied from the plugin to you web-app. Important: Just one thing needs to be done now to make it work. Open /web-app/plugins/Sifr-0.1/js/sifr-config.js and replace WEB_APP with the name of your project. If someone knows how I can do this dynamically please let me know.If you open your application within a browser you will notice the effect immediately. All <h1> elements are replaced with a nice looking Rockwell font!Note that when you open your application you will notice that the <h1> on the 'Welcome to Grails' page is not replaced. This is because this page is not decorated by the main layout where we added the <g:sifrHead />. Go to a scaffolded page and see that the <h1> elements are replaced here.
Â Â <g:sifrHead debug="true" />
Next StepsAfter installing the plugin and enabling sIFR using <g:sifrHead /> only <h1> elements will be replaced by the default included Rockwell font.Presumably you will have your own Flash files with your custom fonts you want to use:
- +Add your custom Flash file(s) (*.swf) to your project's /web-app/plugins/Sifr-0.1/swf folder+
- +Activate and replace needed CSS selectors with your custom font(s) in /web-app/plugins/Sifr-0.1/js/sifr-config.js+ - By default the Rockwell font is activated and the <h1> element is replaced. Activate your custom fonts and replace the elements you want. Additionaly you also set some othe sIFR configuration in this file.
- +Add the sIFR-active CSS to /web-app/plugins/Sifr-0.1/css/sIFR-screen.css+ - By default only CSS is defined for the <h1> element. Add additional CSS here.
Important Note This plugin is based on sIFR 3 revision 225 (Feb 20, 2007). This development build is used as it's much more stable then the beta 1 release (Dec 17, 2006). If you want to use a more recent version you always download it from http://dev.novemberborn.net/sifr3/nightlies/ replace the static resources mentioned in the Installation paragraph. Remember to backup changes in sIFR-screen.css and sifr-config.js.