xili-sIFR3-active : a plugin to extend WP with sIFR3 [update 0.9.2]

February 10, 2009 - 14:50 - - This post in "français"
News • Plugins WP • xili-plugins - [Update = November 21, 2009 - 22:27]

1 – some examples without and with siFR3

Example with the font « Kathleen »

Exemple avec la police « Typist » ombrée : à ù è ï ô

 
and here when iSFR3 or Flash are not activated :

Example with the font « Kathleen »

Exemple avec la police « Typist » ombrée – à ù…

Why xili-sIFR3-active plugin for wordpress ?

sIFR3 is a powerful and amazing tool to improve graphic and typographic qualities of a web site. And WordPress is an fantastic CMS.
To avoid deep modifications (by hand) in your current theme, and to avoid to modify (or disturb) the original kit delivered by sIFR developer, the plugin offer a modular (activable) approach.
To develop with smallest coding as possible.
To provide good separation between data and design (look).
To offer a way to have specific config for each theme (the plugin search sifr-config.js and fonts (.swf) in the subfolder js of the current theme folder.
To optionally provide rules to choose parts (single, page, category,..) of the theme that must include sIFR3 (a special function can be added in the functions.php file of the current theme).

In next release:

- the admin UI will display more infos about the current sIFR3 config.
- some examples will be shown about using « shortcode » to help authors if the « sIFR3″ will used inside post as here.

2 – here the link to download the 0.9.2 public release

3 – here below the readme.txt (as visible  in wordpress.org) and included in the zip.

 

=== xili-sIFR3-active ===
Contributors: MS xiligroup
Donate link: http://dev.xiligroup.com/xili-sifr3-active/
Tags: theme,sIFR,sIFR3,Post,plugin,posts,admin,flash,font,theme
Requires at least: 2.7.0
Tested up to: 2.7
Stable tag: 0.9.2

xili-sIFR3-active activate the modules of sIFR3 in your current theme.

== Description ==

xili-sIFR3-active activate the modules of sIFR3 in your current theme and detect the specific configurations for sIFR3 in your theme.

**prerequisite**
This first version is for « themes » designer and developper with knowledges
about sIFR3 :

[sIFR3 documentation](http://wiki.novemberborn.net/sifr3/ « sIFR3 documentation »).
and
[Site to generate .swf font files compatible with sIFR3](http://www.sifrgenerator.com/ « to generate font.swf files »).

The plugin provide a dynamic way to activate the sIFR3 .js and .css file in the selected pages by you through a function in the functions.php of your current theme. (see below)

= the files and folders in plugin and in theme’s folder =
sIFR3 need a series of file (.js and .css). With the font’s swf files, two (sifr.css – sifr-config.js) must be adapted for your site and his look.
The plugin search both files at first step in the current theme (in a « js » folder for .js and in a « sifr3″ for .css).
If not present, it search in « wp-js » folder in plugin folder. (here added not to disturb the original sIFR3 folder and sub-folders ; here tested with sifr3-r436).
xili-sIFR3-active provide a way through a VAR to give folder place to java-scripts.

Example of function added in functions.php file of your theme: (in this case, adding sifr header files are only added in front-page… *in the demo page, the selection is done through:* `in_category() and is_single()`

`function is_sifr3_intheme(){
if (is_front_page())
return true;
return false;
}`

Examples of line added in sifr-config-js file to keep path values VAR:

in default plugin sub-folder *wp-js*:

`var rockwell = {
src: pluginfolder + ‘/wp-js/rockwell.swf’
`
in your theme sub-folder *js* :

`var rockwell = {
src: themefolder + ‘/js/rockwell.swf’
`
The best is to have a sifr-config specially attached for your specific theme.

== Installation ==

1. Upload the folder named xili-sifr3-active to the `/wp-content/plugins/` directory,
2. Upload a **specific config** in your current theme.
3. Activate the plugin through the *’Plugins’* menu in WordPress,
4. Go to the dashboard tools tab – xili-sIFR3-active – and adapt default values if necessary. (in future)

== Frequently Asked Questions ==

= Why the admin UI is today empty ? =
Because it is reserved for future options (and open for other developers !).

== Screenshots ==

1. an example of wp-content/themes folder
2. the admin settings UI

== More infos ==

0.9.0 : first public release 090204
0.9.1 : second release with minor fix and more docs.

Plugin trac here.

Tags: ,
16 Comments »

  1. hi. Thanks for plugin

    perfect.

    Regards

    Comment by baron — February 06, 2009 @ 20:55

  2. Q: When sIFR3 is activated, I see both standard H2 just after flash text : why ?

    R: the ‘sifr.css’ file is not in right places (theme subfolder or plugins subfolder) so cannot be found. Verify by comparing html source and content of folder.

    xili dev team

    Comment by admin — February 08, 2009 @ 22:40

  3. Q: On this site, when we read html source, we see than only this page contains sifr call (js and css) in header. Why ?

    A: It is because the special function use conditional as here :

    function is_sifr3_intheme(){

    if (in_category(150) && is_single())
    return true;

    Comment by admin — February 08, 2009 @ 22:51

  4. Hi,
    I have some problems.

    1. For French letter, it doesn’t show à ù è ï ô.
    2. When mouse over, it doesn’t show style I have set, such as color…

    Anyone could help me?

    Thanks

    Comment by Rithy — September 09, 2009 @ 12:59

  5. Hello,
    Thanks for using this plugin.
    French letters : just verify when you create your font file from true type to .swf to verify that you include all the chars… (the wizard is here… ).
    Style : as documented in SIFR3 doc, not all the style are transformed (i.e. transparent background and so on…) but some good effects remain as shown here on top

    Comment by xiligroup dev — September 09, 2009 @ 16:32

  6. Hello,

    Oh, thank you so much! Now the French letters are working.

    But for the style I want to change cursor and color of the letters when move is over.
    How I could I do?

    Thanks a lot!

    Comment by Rithy — September 14, 2009 @ 10:24

  7. Hi, Rithy !

    a:hover = all is fully documented in sifr3 developer site…

    Just to help you an exemple below (extract of sifr-config.js) :

    sIFR.replace(myfontvarname, {
    selector: 'h2.script-light',
    css: ['.sIFR-root { background-color: #BEAA79; color: #341E24 ;}'
    ,'a { text-decoration: none; letter-spacing: 1.5; }'
    ,'a:link { color: #33FF33; }'
    ,'a:hover { color: #FF33FF; }'
    ]
    });

    Comment by xiligroup dev — September 14, 2009 @ 10:57

  8. Thanks but all style with « a » are not working for me.
    Here is the code I’m using.

    sIFR.replace(VAGRundschriftD, {
    selector: ‘.embed_mh’,
    css: ['.sIFR-root { font-size: 13px; color: #9C7865;} '
    ,'a { text-decoration: none; letter-spacing: 1.5; }'
    ,'a:link { color: #33FF33; }'
    ,'a:hover { color: #FFFFFF; cursor: pointer;}'
    ],
    wmode: ‘transparent’
    });

    Thanks

    Comment by Rithy — September 14, 2009 @ 12:04

  9. Hello xiligroup dev,

    OK, now for the « a:hover » style is working.
    Now I understand that if we want to set « a:hover » style, the content must contains « some text » tag.

    Your plugin is prefect.

    Thanks

    xiligroup say :
    > Hello again !

    Is your tag a /a INSIDE the html tag (? h2) with class 'embed_mh' ?

    exemple h2 class="embed_mh" a href.... rel="nofollow" /a /h2 ....

    Tell me !

    Comment by Rithy — September 15, 2009 @ 6:19

  10. Hello,

    Yes, before I didn’t put a link tag INSIDE my DIV which used class ‘embed_mh’.
    The link tag was OUTSIDE the DIV, that’s why I cannot apply ‘a:hover’ style.

    Thanks

    Comment by Rithy — September 15, 2009 @ 9:10

  11. Hello xiligroup dev again !

    I have a big problem, every time I click on the scroll bar, My menu which is embedded is not working. The link and mouse hover style are not working. But after I click it once, it works normally.

    Regards,
    Rithy

    Comment by Rithy — September 29, 2009 @ 10:24

  12. Hello Rithy… To progress, I think it will be better if you provide URL of your site (I will don’t publish if necessary your answer)… Please note also that about siFR3, you must use forum about sIFR3 and that you must be very rigourous if you use another js scripts…

    Comment by xiligroup dev — September 30, 2009 @ 16:50

  13. Hello again,

    I have tested with some browser;
    And let’s test on this page!

    /*****Scrolling problem***********/

    * firefox/safary:
    Please do mouse over on the letter you have embedded and use scroll on our mouse; we will see scrolling by mouse is not working.
    * google chrome/ IE7:
    After click on the embedded letter, we cannot scroll by mouse.

    /*****mouse over styles problem***********/

    If possible, please make example 2 with mouse over style like change color or something…

    *firefox/safary:
    After that please scroll up/down a little by scroll bar in the browser, then we do mouse over the embedded letter, we’ll not see the still we have set for mouse over.

    If we can fix this bugs, sifr must be perfect!

    Regards,
    Rithy

    Comment by Rithy — October 28, 2009 @ 10:56

  14. Thanks to offer here your comments. But as previously said, the plugin gives only an easy way to install sIFR3 in WP through plugin but don’t modify anything inside sIFR3. I think that you are invited to discuss directly with the author Mark Wubben at http://novemberborn.net/sifr3. And afterwards, don’t hesitate to add here a summary of the results.
    Best regards,
    M.

    NOTE : Scrolling problems don’t occur on Mac Leopard. (SAFARI AND FF) – do you test with Error Console of JS ?

    Comment by admin — October 28, 2009 @ 16:43

  15. Well, I have testd with Error Console of JS, but I don’t see any error.

    Don’t worry, I will post a summary of the results.

    Best regards,
    Rithy

    Comment by Rithy — October 30, 2009 @ 9:16

  16. Hello again,

    Now I got solutions!

    The problems is cause by Flash transparency (wmode: ‘transparent’).

    The solution for mouse over style is to force browser to calculate Flash element position or something by specifying a hover style to Flash elements. What I’m using is
    .sIFR-flash:hover{font-size: 10px; left: 0;}

    For the scrolling I’m not yet got the best solution, but a solution is to use sIFR 3-r278 because it generate to embed not an object element.

    Cheers,
    Rithy

    Comment by Rithy — November 26, 2009 @ 3:13

RSS feed for comments on this post. | TrackBack URI

Leave a comment