logo
Welcome Guest! To enable all features please Login. New Registrations are disabled.

Notification

Icon
Error

Options
Go to last post Go to first unread
Erwin  
#1 Posted : Saturday, July 18, 2009 2:53:26 PM(UTC)
Erwin

Rank: Administration

Reputation:

Groups: Moderators, Administration, Member
Joined: 10/8/2008(UTC)
Posts: 44

sIFR 3
Online variant of this example: http://divitodesign.com/...lternative-browser-text/

This one is changed with added tips for using with SIENN.
The installation and customization of sIFR on your website isn’t something you do in 30 seconds.

Step 1. Download The Files You Need

After a search for the latest version, I have found the directory where all the nightly releases are located. You should download the latest version. The version I will use in this tutorial is sifr3-r436.zip.
http://dev.novemberborn.net/sifr3/nightlies/

When you downloaded these files you should see four folders. Three of them (flash, css and js) contain the files we need to install sIFR so make sure you have a click away.

Step 2: Generate the yourtypeface.swf file


We will use the sIFR Generator to do the job. (http://www.sifrgenerator.com/)
You simply choose a TrueType typeface and walk through a wizard and your sIFR file is ready to go.
Walk through the Wizard
* Open the Wizard page
* Upload your TrueType (.ttf) font file – if it doesn’t select from the C:/Windows/Fonts folder, try copying it to some other folder.
* Choose sIFR version 3.436 – Maybe there are newer versions when you read this, that should be alright too!
* Choose Glyph Set - The more options to choose the bigger the sIFR file; you should select what you prefer.
* Type the Anti Spam words.
* Preview and download your sIFR file!


Step 3: uploading the files you need
I suggest this dir structure. Upload your files according:

- /css/sifr.css
- /js/sifr.js
- /js/sifr_config.js
- /js/sifr_debug.js
- /js/yourtypeface.swf (or other swf-font)


Step 4: implement refs to the files on your website:


<link href="/css/sifr.css" type="text/css" rel="stylesheet" />
<script src="/js/sifr.js" type="text/javascript"></script>
<script src="/js/sifr_debug.js" type="text/javascript"></script>
<script src="/js/sifr_config.js" type="text/javascript"></script>


Step 5: Configure sIFR

Next we will configure sIFR so it loads the correct yourtypeface.swf file. You should open up sifr-config.js located in the js folder.

This file will be used to configure the options we have with sIFR at the moment.
Once you’ve opened sifr-config.js and you will notice there isn’t anything in there yet. We have to add the options ourselves. Let’s say we’ve generated a .swf file with the typeface yourtypeface you will use the following codes:


Code:
var sifrfont = { // variable sifrfont is created copy this varianel and change sifrfont in something else if you want to use another font
      src: '/js/yourtypeface.swf' // location of the swf file
    };
	
    sIFR.useStyleCheck = true; 
    sIFR.activate(sifrfont);     

	sIFR.replace(sifrfont, { // Font sifrfont replaces H1 tags
      selector: 'h1' 
      ,css: [
        '.sIFR-root {color:#252324; font-size: 14px;}'
      ] ,wmode: 'transparent'
    });


    sIFR.replace(sifrfont, { // Font sifrfont replaces text with class "hfdmenuitem" (your li-menu items or something)
      selector: '.hfdmenuitem'
      ,css: [
        '.sIFR-root { font-size: 20px;}'
		,'a { text-decoration: none; }'
        ,'a:link { color: #252324; }'
        ,'a:hover { color: #ED1B24; }'
      ] ,wmode: 'transparent'
    });



Explenation Javascript

As you can see, the selector (the title we will add sIFR too) is called for by this element <h1> or "class=hfdmenuitem". You can change that to your likings.

That's it.

Some extra css for not showing the original items untill sIFR is loaded:

Code:
<style>
.sIFR-active h1.sifr-title
{
visibility: hidden;
line-height:1em;
}
.sIFR-active h2.sifr-title
{
visibility: hidden;
line-height:1em;
}
.sIFR-active .hfdmenuitemselected
{
visibility: hidden;
}
.sIFR-active .hfdmenuitem
{
visibility: hidden;
}
</style> 




I'm only human, if I made a mistake, please let me know, and I'll correct it.

Wanna join the discussion?! Login to your Sienn Forum forum account. New Registrations are disabled.

Users browsing this topic
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.