The sIFR version is sIFR 3 - r436. You can choose from two different versions of JsIFR3.
The one style for the free version is usually enough to fulfill the basic styling needs of most sites. But if you would like to either a) support our ongoing effort to provide you with nifty extensions or b) use more than one style in JsIFR3 or c) use it commercially, you will only have to get a 1-month support subscription linked to JsIFR3. You are basically paying for the guarantee that we will help you fix any unforseen issues that may arise during the installation or configuration process of JsIFR3 Pro.
We have removed all restrictions from JsIFR3 Pro. You may now use it on as many domains as you wish.
To enable JsIFR3 on your website all you have to do is install the plugin and enable it in the Joomla! plugin manager. The default settings should already replace several headings on your Joomla website.
In case you are not familiar with CSS and/or HTML, do the following to understand what gets replaced where on your site:
1. Right click on your site and "view source code"
2. Search (ctrl+f) for whatever words that need font replacement (like the title of an article) and look for their "class". (see examples below)
3. Copy the corresponding class or id name into the JsIFR3 configuration and refresh your site.
(note the period preceeding "classes" and the hashtag preceeding "ids")
Some examples of what it might look like on your site:
Content Headers:
HTML-code: <div class="contentheading">Title of Article</div>
JsIFR configuration - css-selector: .contentheading
Items from a list Menu:
HTML-code: <div class="menu"><ul><li><a href="/index.php>Home</a></li></ul></div>
JsIFR configuration - css-selector: .menu li
Links:
HTML-code: <div id="link_container"><a href="http://stardustathome.ssl.berkeley.edu">some link</a></div>
JsIFR configuration - css-selector: #link_container
defines the style of whatever comes after these tags
to be put in your JsIFR3 configuration in order to be replaced
If you have trouble finding the right css-selector please use our forums and we will do our best to help you.
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 designate.
- 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.
This all happens in a split-second, so all of the checking, replacing, and scaling is not visible to the user. It is not uncommon to notice a very short delay as the Flash loads, but to the user, none of the internals of this process are exposed.
There are only a few steps to install the plugin on your Joomla 1.5 website:
- Login to the backend of your webseite and navigate to Extensions - Install/Uninstall.
- Select the plugin file that you downloaded to your harddisc 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 activate the plugin.
The plugin parameters offer a variety of different settings that change the look of the sIFR-elements:
- 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.
Download JsIFR3
Download JsIFR3 Pro
(You need a subscription to download these files)
Please don't forget to vote here or here if you like JsIFR3 ;)
