You can use the services of sifrgenerator.com to create custom fonts but we recommend the following instructions for the best results in relation to file sizes and customization.
We recommend NOT to use opensIFR because it causes several problems for example not letting you change the font color.
To create a custom-font for JsIFR3 you need the sIFR3-files of the version that is currently used by JsIFR3 (r436): download here
Extract the archive to your hard disk and do not move single files to other folders/locations. Open the file sifr.fla with Flash8 Editor (Flash 8 Basic, Professional, CS3 or CS4).
You see a white field in the middle of the screen. Doubleclick this field.
You should see some text like:"Bold Italic Normal Bold & Italic".
Doubleclick the text to activate the text editor. Then delete all text to keep the filesize as small as possible.
(For a maximum of compatibility in this tutorial we will create a font file that supports normal, bold, italic and bold-italic text. If you know that you will only use one of these you can omit the three other letters that we will create)
Type 4 letters, for example aaaa. (It doesn't matter which letters.)
Select all four letters and choose the font you wish to use.
Select the first letter and toggle off bold and italics.
Select the second letter and toggle on bold, toggle off italics.
Select the third letter and toggle off bold, toggle on italics.
Select the fourth letter and toggle on bold and italics.
Special characters: If you wish to display special characters click the button "Embed..." and select charsets or type in additional characters in the field "Include these characters:" (for example ÄÖÜäöü or áéíóúàèìòù and so on). If your font does not support these special characters this setting will not help you. It just won't be displayed by JsIFR3.
The next step is to export the file as flash-movie (File - Export - Export Movie).
Select the destination and type in a filename. (This filename must be entered in the Joomla JsIFR3 settings as custom font. Make sure that you don't use hyphens (-) in the filename!) Click save to see the next options.
Here you need to do the following:
- Version: Flash 8
- Load order: Bottom up
- ActionScript version: ActionScript 2.0
- Protect from import
- Omit trace actions
- Compress movie
- To improve the quality you can set JPEG quality to 100. (This won't have a measurable effect to the file size!)
- You can select Generate size report to see which fonts and characters have been exported. If you only wanted to use a bold font and you see it has exported a normal font you have to repeat the procedure to make sure the normal font is not unnecessarily exported.
There are only a few steps to install the JsIFR3 plugin on your Joomla 1.5 website:
- Login to the backend of your website and navigate to Extensions - Install/Uninstall.
- Select the plugin file that you downloaded to your hard disc and click File Upload & Install.
- To set the necessary parameters navigate to Extensions - Plugin Manager and click the plugin's name (System - JsIFR3).
- Select a font and enable the plugin.
sIFR is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems and without sacrificing accessibility, search engine friendliness or markup semantics. It accomplishes this by using a combination of javascript, CSS, and Flash.
Here is the entire process:
- A normal (X)HTML page is loaded into the browser.
- A javascript function is run which first checks that Flash is installed and then looks for whatever tags, ids, or classes you designated to be sIFR'ed.
- If Flash isn’t installed (or obviously if javascript is turned off), the (X)HTML page displays as normal and nothing further occurs. If Flash is installed, javascript traverses through the source of your page measuring each element you’ve designated as something you’d like “sIFRed”.
- Once measured, the script creates Flash movies of the same dimensions and overlays them on top of the original elements, pumping the original browser text in as a Flash variable.
- Actionscript inside of each Flash file then draws that text in your chosen typeface at a 6 point size and scales it up until it fits snugly inside the Flash movie.
- Showupdate icon: Since version 1.9.2 JsIFR3 integrates a notification icon in the top bar of the joomla backend in case there is a newer version available.
- Font: The plugin comes with 11 different fonts that can be selected here.
- Custom font: To use a custom font set the field "Font" to custom and enter in the field "Custom Font" the name of the .swf-file. the .swf-file has to be uploaded to the folder ~/plugins/system/jsifr3 (or ~/plugins/system/jsifr3_pro) of your Joomla installation. If you want to use an included font leave this field empty.
Create custom fonts - CSS-selector: Type in all CSS-tags, -classes or -id's that should be replaced by sIFR. The default values replace all titles that joomla generates.
- Text-color: Set here the color for sIFR-elements as HTML-code, for example #000000 for black and #FFFFFF for white.
- Link-color: Set here the color for links as HTML-code, for example #000000 for black and #FFFFFF for white.
- Link-color (hover): Set here the color for links while hovering over them as HTML-code, for example #000000 for black and #FFFFFF for white.
- Link-decoration: Links can be underlined or not.
- Link-decoration (hover): While hovering over links they can be underlined or not.
- Cursor: While hovering over a link the cursor can be a pointer or an arrow.
- Letter-spacing: Letter-spacing means the distance between letters. You can make the text look wider or more narrow. Possible values are for example "3" or "-3".
- Text-transformation: the text can be transformed to uppercase or lowercase letters.
- Text-transparency: If you want to make the text transparent set a value between "0" (for fully transparent) and "0.99". To use no transparency leace this field empty. Using the value "1" causes an error and prevents the text from beeing displayed.
- Font-weighte: The font can be displayed normal or bold.
- Font-style: The font can be displayed normal or italic.
- Font-size: Set a value to display all sIFR-elements of the same size. Possible values for example "22" or "32". (If left empty the size is used from the related css-element!)
- Text alignment: Aligns the text to the left, right or centered.
- Margin left: Additional space to the left. Enter a value in pixel without unit. Ex.: 10
- Margin right: Additional space to the right. Enter a value in pixel without unit. Ex.: 10
- Margin top: Additional space above. Enter a value in pixel without unit. Ex.: 10
- Margin bottom: Additional space below. Enter a value in pixel without unit. Ex.: 10
- Exact size: Use exact size (width) of the flash-element instead width:100% to prevent unwanted breaks.
- Single line: Forces display in a single line and prevents unwanted breaks.
- Prevent wrap: Alternative method to force display in one line by disabling word wrap inside the Flash movie, but doesn't always work so well. Previous option 'Single line' mut be OFF!
- Dropshadow on/off: Adds a dropshadow to the text.
- Dropshadow color: Set the dropshadow color as HTML-code, for example #000000 for black and #FFFFFF for white.
- Dropshadow distance: Set the distance between dropshadow and text. Enter a value in pixel without unit. Default: 2
- Dropshadow strength: Set the strength of the dropshadow. Enter a value in pixel without unit. Default: 2
- Alphavalue: Alphavalue of the dropshadow, which means blending between dropshadow and background color. Zero causes 100% background color, 1 causes 100% dropshadow color. For no blending enter 0.Possible values for example: 0.5 , 0.3, 0.75
- Angle: Angle between dropshadow and text (clockwise). Right = 0, down = 90, left = 180, top = 270, right-bottom = 45, left-bottom = 135. Default = 45
- Blur right: This setting blurs the dropshadow to the right. Enter the length of the blur-effect as value in pixel without unit, for example: 10
- Blur down: This setting blurs the dropshadow downwards. Enter the length of the blur-effect as value in pixel without unit, for example: 10
- Inner/outer shadow: The shadow can be a dropshadow or inside the text.
Many people ask us how they can use JsIFR3 in their dropdown menus. The answer so far was in most cases a friendly "you can't". Now we have finally come up with a solution, even though we wouldn't necessarily recommend using JsIFR3 for dropdown menus as there are some drawbacks.
One of the biggest drawbacks is that your menu items will get a text cursor instead of the pointer (pointing hand).
Mark Wubben (the sIFR lead developer) says about using sIFR in menus:
"Really, this is pushing the boundaries. I'd suggest you use images instead of sIFR for those menu items: the content won't change and using Flash in ul/li menu's with dropdowns... risky. Please reconsider if sIFR has to be used in the menu."
If you still want to use JsIFR3 in dropdown menus then here is how you go about it:
Download and install the Superfish menu on your Joomla! website. Configure it so that it works as you wish while JsIFR3 is disabled.
Then go to the JsIFR3 plugin settings, define this as css-selektor: "ul.sf-menu a" and activate the plugin. Go to your frontpage and refresh it. You will notice that the main menu items allready work with sIFR but the submenu items are invisible.
To fix that you have to disable jQuery in the module configuration. (Go to the module manager in the backend and select the superfish module. On the right hand you see the module parameters. Scroll to the very bottom of the page. You will see a jQuery section: set "Load jQuery" to "No".)
Go to your frontpage and refresh it. You will notice that the submenus are visible now but flow behind the content area.
Open the file: modules/mod_superfishmenu/tmpl/css/superfish.css Go to line 58 and add the following: position: absolute;
Refresh your frontpage and you should see that JsIFR3 does now work in your dropdown menus.