cum sa folosesti sIFR

[Scorillo]

In primul rand, sIFR a ajuns la versiunea 3, versiune cu care eu n-am reusit sa ma impac deloc. Asa ca o sa va arat cum folositi versiunea 2. Ce este si ce face sIFR? Practic va permite sa folositi intr-un website orice font doriti, nu doar cele clasice, indiferent daca vizitatorul are sau nu respectivul font instalat.

Aveti nevoie de 2 fisiere: sifr.js si sifr-addons.js pe care le gasiti in attach aici.
  sIFR.zip (Size: 5.11 KB / Downloads: 35) despachetati arhiva si copiati cele doua fisiere in root folder, pe server sau in directorul temei de wpress (daca e cazul). din motive stiute de Adobe, sifr nu merge local, ci doar de pe server (ceva legat de securitate la flash).
pasul 2: trebuie sa construiti un fisier flash cu fontul pe care vreti sa-l folositi. ca sa nu va mai complicati cu adobe flash si alte editoare, folositi acest generator online, care merge perfect: http://www.sifrgenerator.com/wizard.html (nota: nu incercati sa uploadati fontul direct din windows/fonts, pentru ca n-o sa mearga. intai copiati fisierul font in alta locatie si uploadati de acolo). dupa ce ati generat fisierul flash, uploadati-l pe serverul vostru.
pasul 3: deschideti fisierul css al site-ului vostru si adaugati urmatoarele:

Code:

.sIFR-flash {visibility: visible !important;margin: 0;}
.sIFR-replaced {visibility: visible !important;}
span.sIFR-alternate {position: absolute;left: 0;top: 0;width: 0;height: 0;display: block;overflow: hidden;}

pasul 4: deschideti fisierul in care declarati headerele si adaugati urmatoarele:

Code:

<script src="sifr.js" type="text/javascript"> </script>
<script src="sifr-addons.js" type="text/javascript"> </script>

... asta daca vreti sa-l folositi intr-un site normal sau pentru un blog, in header.php:

Code:

<script src="<?php bloginfo('stylesheet_directory'); ?>/sifr.js" type="text/javascript"> </script>
<script src="<?php bloginfo('stylesheet_directory'); ?>/sifr-addons.js" type="text/javascript"> </script>

Indiferent de varianta de mai sus, mai trebuie adaugat urmatorul cod:

Code:

<script type="text/javascript">
if(typeof sIFR == "function"){
sIFR.replaceElement(named({sSelector:"#info h2", sFlashSrc:"<?php bloginfo('stylesheet_directory'); ?>/28days.swf", sColor:"#666633", sLinkColor:"#669900", sBgColor:"#669900", sHoverColor:"#666600", sWmode:"transparent"}));
};
</script>

asta e codul folosit de mine pe http://www.myphotoshoptutorial.com si puteti vedea sIFR la lucru in sidebar. practic inlocuiesc h2.info din style.css cu fontul ales de mine. puteti repeta bucata asta de cod de cate ori vreti pentru a inlocui diverse alte tag-uri CSS. 28days.swf este numele fisierului flash generat la inceput (pentru ca folosesc fontul 28 Days Later si sa nu-l incurc cu altele). Partea "<?php bloginfo('stylesheet_directory'); ?>/" o sariti daca nu e vorba de blog. Culorile pe care le declarati aici sunt la fel ca in orice alt fisier CSS (culoarea fontului, a, a:hover, etc.).

Save and enjoy!

[Scorillo]

M-am gandit ca daca tot le am, sa le postez aici. Cateva fisiere .swf cu fonturi pentru sIFR.
   
  forte.zip (Size: 34.19 KB / Downloads: 3)
   
  fradmcn.zip (Size: 39.5 KB / Downloads: 2)
   
  hatten.zip (Size: 33.3 KB / Downloads: 1)
   
  tcceb.zip (Size: 20.2 KB / Downloads: 2)

[PiticStyle]

multumesc scorillo, foarte buna resursa si tutorialul. cred ca cel mai util de pana acuma de pe acest forum!

[Anca]

Multumesc, Scorillo. M-ai ajutat fantastic! Totusi trebuie sa spun ce neajunsuri am gasit eu la sIFR2: pe firefox 2.0.0.19 (pe linux) tot textul generat de sIFR are background-color verde.

Am incercat sa folosesc sIFR lite si apoi jQuery sIFR. Toate bune si frumoase in firefox-ul de windows si in IE. In Safari-ul de Mac fontul nu se vede deloc iar in Firefox-ul de Linux are background-color alb. Se incarca foarte greu si ajunge sa se vada intai fontul fara sIFR si abia dupa o secunda cel cu sIFR.

Varianta c): Cufon. Este o chestie chiar sexy, nu foloseste decat JS, se foloseste extrem de usor (mie mi-au trebuit maxim 3 minute pentru a il pune in functiune). Are 4 probleme (probabil ca are si altele dar doar atat am descoperit): cufonul nu se aplica decat elementelor de tip h1, h2 .. hn asa ca trebuie sa aplicati o clasa numai unui h pentru a beneficia de cufon; a doua problema are legatura cu padding-ul si cu margin-ul, cufonul refuzand cu indarjire sa le ia in seama, chestie care se poate rezolva cu un div cu proprietatile respective care va inconjura elementul h; a treia problema: ignora stilurile pentru linkuri. Am rezolvat asta cu onclick si stiluri pentru cursor. Ultima problema descoperita de mine (pana acum): textul generat de cufon nu este selectabil.

C'est la vie...

Spor la treaba in continuare.

[prodan_13]

Hello. Am ajuns sa lucrez si eu cu sifr dar m-a terminat psihic.
Problema este ca eu afisez textul intr-un scroll, iar textul nu este randat complet.

http://www.newpixel.ro/work/antique/ = pe la sectiune servicii, tarife

any ideas?

[Webvertise]

Am scris si eu un tutorial despre sIFR, dar e mai putin detaliat ca al tau
http://www.webvertise.ro/blog/2009/05/si...rice-font/

[x6IT32]

Mersi Scorillo! Ma apuc sa lucrez in sIFR

[Frozen]

Pentru cei care lucreaza cu sIFR, un site interesant http://www.fontburner.com/fonts/

[madvideo]

Totusi trebuie sa ai nervi de otel sa lucrezi cu sIFR, bineinteles rezultatele sunt pe masura. Un tutorial bun, ce sa spun bravo..

[Haotik]

eu am lucrat cu Cufon si am fost destul de multumit de ce si cum face.