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

xili-sifr3-active icon

xili-sifr3-active icon

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.

 
See the documentation (in frame below) and download plugin in WP repository.

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

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

Description

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

prerequisite This first version is for "themes" designer and developer with knowledges about sIFR3 :sIFR3 documentation and Site to generate .swf font files compatible with sIFR3.

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

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

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.

Screenshots

xili sIFR3 active Screenshot 1
an example of wp-content/themes folder

xili sIFR3 active Screenshot 2
the admin settings UI

Changelog

0.9.6

  • maintenance release - test 3.5.1

0.9.5

  • maintenance release

0.9.4

  • fixes for issues with child theme

0.9.2

  • third release 090210,
  • fix when 'wpurl' is not 'siteurl'

0.9.1

  • second release with minor fix and more docs.

0.9.0

  • first public release 090204.

    2013-05-25 MS dev.xiligroup.com

Plugin trac here.

This entry was posted in News, Plugins WP, xili-plugins and tagged , , , , . Bookmark the permalink.

16 Responses to xili-sIFR3-active : a plugin to extend WP with sIFR3 [update 0.9.4]

  1. baron says:

    hi. Thanks for plugin

    perfect.

    Regards

  2. admin says:

    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

  3. admin says:

    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;
    
  4. Rithy says:

    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

  5. xiligroup dev says:

    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

  6. Rithy says:

    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!

  7. xiligroup dev says:

    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; }' ] });

  8. Rithy says:

    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

  9. Rithy says:

    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 !

  10. Rithy says:

    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

  11. Rithy says:

    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

  12. xiligroup dev says:

    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…

  13. Rithy says:

    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

  14. xiligroup dev says:

    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 ?

  15. Rithy says:

    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

  16. Rithy says:

    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

Laisser un commentaire