How to use JsIFR3

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.

Last Updated: Monday, 05 March 2012 23:18

Hits: 3063

How it works

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:

  1. A normal (X)HTML page is loaded into the browser.
  2. 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.
  3. 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”.
  4. 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.
  5. 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 depending on the computer's performance, but to the user, none of the internals of this process are exposed.

Last Updated: Monday, 05 March 2012 21:10

Hits: 2086

Installation

There are only a few steps to install the JsIFR3 plugin on your Joomla 1.5 website:

  1. Login to the backend of your website and navigate to Extensions - Install/Uninstall.
  2. Select the plugin file that you downloaded to your hard disc and click File Upload & Install.
  3. To set the necessary parameters navigate to Extensions - Plugin Manager and click the plugin's name (System - JsIFR3).
  4. Select a font and enable the plugin.

Last Updated: Monday, 05 March 2012 21:10

Hits: 2017

Parameters

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.

Last Updated: Monday, 05 March 2012 21:10

Hits: 2583

Create custom fonts

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).

Step 1You see a white field in the middle of the screen. Doubleclick this field.

 



Step 2You should see some text like:"Bold Italic Normal Bold & Italic".

 



Step 3Doubleclick the text to activate the text editor. Then delete all text to keep the filesize as small as possible.

 

 

Step 5(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.)

Step 6 

Select all four letters and choose the font you wish to use.

 

 

 

Step 7Select the first letter and toggle off bold and italics.

 

 

 

Step 8

Select the second letter and toggle on bold, toggle off italics.

 



Step 9Select the third letter and toggle off bold, toggle on italics.

 

 

 

Step 10

Select the fourth letter and toggle on bold and italics.

 



Step 11Special 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.

Step 12The next step is to export the file as flash-movie (File - Export - Export Movie).

 



Step 13Select 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.


Step 14Here 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.

Step 15Click Ok to finish the process and create the file.





To activate the font you have to upload the file by FTP to the directory "~/plugins/system/jsifr3" (or "~/plugins/system/jsifr3_pro" for JsIFR3 Pro)  of your Joomla installation. Open the JsIFR3 plugin configuration and set: Font: custom , Custom-font: the filename (without .swf) you have given to your created font-file.

Last Updated: Monday, 05 March 2012 21:10

Hits: 2371

JsIFR3 and drop-down menus

MenuMany 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.

 

Last Updated: Monday, 05 March 2012 21:10

Hits: 2653

Why freaked out?

The name "freaked out" does not symbolize our mental state but rather the approach to give our clients the unexpected - the extra edge - over their competitors to be successful in bussiness. That might appear from time to time a little freaked out but if you want plain vanilla work there are plenty of companies out there offering that. We go beyond.

Support

If you have any questions or comments about our extensions or need help to get started please use our forums or the contact form. We will get back to you shortly!

Pro subscribers are advised to use the ticket system to receive premium support.

Contact

freaked out
53, Għaxqet L-Għajn
Triq Carini
Santa Venera - Malta

Email: This email address is being protected from spambots. You need JavaScript enabled to view it.

freakedout.de uses cookies!

This website uses cookies to provide user authentication and improve your user experience. Please indicate whether you consent to our site placing these cookies on your device. We are not using cookies for marketing purposes. For more information visit our privacy policy

I agree
Copyright © 2010 - 2020 freakedout.de - All rights reserved