Unofficial WebSite X5

WebSite X5 versioni obsolete => WebSite X5 [v10] Evolution - Discussioni generali => Topic aperto da: Miss. Lin - 15 Maggio, 2013, 19:11:19

Titolo: Effetti tipografici
Inserito da: Miss. Lin - 15 Maggio, 2013, 19:11:19
Salve a tutti,


al seguente link [size=78%]http://jschr.github.io/textillate/ (http://jschr.github.io/textillate/)[/size] ho scaricato il progetto. Tale progetto mi serve per implementare all'interno del banner un testo che abbia effetti tipografici. Purtroppo pur volendo mantenere un profilo basso e modificando soltanto i css il problema che non riesco a sormontare è quello della grandezza, che nonostante cambio resta enorme.
Qualcuno per caso è disposto a realizzare o ad aiutarmi a realizzare il progetto da implementare nel banner? Grazie a tutti.
Titolo: Re:Effetti tipografici
Inserito da: skeggia - 16 Maggio, 2013, 11:48:06
scusa, la grandezza di cosa devi variare? di quale elemento?
Titolo: Re:Effetti tipografici
Inserito da: Miss. Lin - 16 Maggio, 2013, 14:39:17
In pratica il testo "textillate.js" non riesco a rimpicciolirlo, nonostante io modifichi il css e sembra essersi modificato, durante l'anteprima le modifiche sono invariate. Devo inserire questo testo con effetto all'interno del banner di questo sito http://doublelldesignz.altervista.org/GRIV/index.html (http://doublelldesignz.altervista.org/GRIV/index.html) ed il testo che dovrà riportare l'effetto dev'essere la frase "Materiali elettrici e tecnici per le industrie"
Titolo: Re:Effetti tipografici
Inserito da: skeggia - 16 Maggio, 2013, 16:11:56
ciao MIss. Lin
il parametro che va modificato è questo:
questo è il codice presente:
    $('.jumbotron h1')
      .fitText(0.5)
      .textillate({ in: { effect: 'flipInY' }});

questo è il codice modificato (in rosso è quello che ho aggiunto io) e 168 è il parametro da modificare per ingrandire o rimpicciolire il testo
    $('.jumbotron h1')
      .fitText(0.5, { maxFontSize: 168 })
      .textillate({ in: { effect: 'flipInY' }});

tieni presente che di questi codici non ne mastico assolutamente nulla, ma vado a naso, e ci sono arrivato provando e riprovando. Vedi se è quello che volevi ottenere.
Ciao
sk
Titolo: Re:Effetti tipografici
Inserito da: skeggia - 16 Maggio, 2013, 16:14:20
scusa, mi sono dimenticato di scrivere dove sta questo codice, è nel codice html in fondo.
ciao

Titolo: Re:Effetti tipografici
Inserito da: Miss. Lin - 16 Maggio, 2013, 16:41:39
Ciao skeggia e grazie per l'aiuto, il mio errore è stato quello di guardare e modificare sempre e solo i css, cmq qui puoi vedere il risultato http://doublelldesignz.altervista.org/GRIV/partner.html (http://doublelldesignz.altervista.org/GRIV/partner.html)
adesso devo solo capire come inserire oltre che in entrata anche un effetto in uscita.
N.B.
Nella homepage nn si vede perchè entra in conflitto con la gallery a cui devo apportare modifiche.
Inoltre è ben accetto un aiuto per inserire un effetto in uscita, mi redo conto che per me è un pò difficile apportare queste modifiche perchè non sono abituata ad interfacciarmi con loro spesso.
Titolo: Re:Effetti tipografici
Inserito da: stesil - 18 Maggio, 2013, 18:54:12
Nella homepage nn si vede perchè entra in conflitto con la gallery a cui devo apportare modifiche.

Prova ad inserire i  file in questo modo: in impostazioni generali, esperto i file css e i tre file js (jquery.fittext.js, jquery.lettering.js e jquery.textillate.js) per l'effetto sul testo. Nell'oggetto html in modifica del modello lasci solo lo script che richiama la funzione textillate. (<script>   $(function (){ [....]   </script>)

Sposta quindi in head della pagina gli script js per nivoslider che ora hai inserito nell'oggetto html.

Inoltre hai incluso ancora più volte (ora sono 3) la libreria jQuery.

Inoltre è ben accetto un aiuto per inserire un effetto in uscita, mi redo conto che per me è un pò difficile apportare queste modifiche perchè non sono abituata ad interfacciarmi con loro spesso.

Per visualizzare l'effetto in uscita devi attivare il loop: questo potrebbe essere un esempio

Codice:
Only registered users can see contents. Please click here to Register or Login.
Titolo: Re:Effetti tipografici
Inserito da: Miss. Lin - 18 Maggio, 2013, 19:17:54
Ho inserito i file in questo modo:

[/size]- in impostazioni generali, esperto i file css e i tre file js (jquery.fittext.js, jquery.lettering.js e jquery.textillate.js) per l'effetto sul testo. Nell'oggetto html in modifica del modello ho lasciato solo lo script che richiama la funzione textillate. (<script>   $(function (){ [....]   </script>)[/size]ed in head della pagina gli script js per nivoslider che erano inseriti nell'oggetto html.


Purtroppo non funzionava più nulla dopo i cambiamenti, così ho apportato un paio di modifiche, ovvero ho inserito gli script js di nivoslider nella pagina in prima della chiusura del tag body e lo stesso ho fatto con i file js di textillate. Ma l'effetto testo continua a non comparire nella homepage e se sposto le posizioni inserendoli in altri tag, nemmeno funziona. Ho cmq aggiornato il sito con queste ultime modifiche.


N.B.
Non ho capito cosa significa e dove è inserita:
"Inoltre hai incluso ancora più volte (ora sono 3) la libreria jQuery."

Titolo: Re:Effetti tipografici
Inserito da: stesil - 19 Maggio, 2013, 23:09:41
Avresti potuto lasciare online la prova con gli errori ..


http://stesil.altervista.org/evo10/nivotext/index.html (http://stesil.altervista.org/evo10/nivotext/index.html)
Titolo: Re:Effetti tipografici
Inserito da: Miss. Lin - 19 Maggio, 2013, 23:23:29
Stesil te l'ho appena pubblicato con gli errori http://doublelldesignz.altervista.org/GRIV/index.html (http://doublelldesignz.altervista.org/GRIV/index.html)
Titolo: Re:Effetti tipografici
Inserito da: stesil - 20 Maggio, 2013, 00:07:50
Proviamo ad andare con ordine.

Le librerie jQuery da togliere: guarda il sorgente della tua pagina.
Citazione
<script type="text/javascript" src="files/jquery-1.9.0.min.js"></script>


E' proprio prima del file js di nivoslider, in proprietà della pagina quindi.

Citazione
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>


Questo invece è in modifica del modello, con il codice dell'effetto sul testo.
Titolo: Re:Effetti tipografici
Inserito da: Miss. Lin - 20 Maggio, 2013, 00:15:45
Ho appena eliminato le 2 voci, adesso l'unico problema è che il testo nella home si vede ma totalmente spostato e decentrato rispetto a  tutte le altre pagine.
Titolo: Re:Effetti tipografici
Inserito da: stesil - 20 Maggio, 2013, 00:45:45
Ho appena eliminato le 2 voci,

Oh, bene. Ora funziona senza errori js. Era quindi colpa della tripla inclusione della libreria.  :)

adesso l'unico problema è che il testo nella home si vede ma totalmente spostato e decentrato rispetto a  tutte le altre pagine.

... mah, probabilmente è dovuto all'uso di <h1> ...  io ho utilizzato un tag <p> e non ci sono differenze fra le due pagine .... oppure potrebbe anche essere qualche regola presente nel file style.css di nivoslider (che io non ho inserito)
Titolo: Re:Effetti tipografici
Inserito da: Miss. Lin - 20 Maggio, 2013, 10:46:09
Ho provato a dare come class p ma purtroppo la differenza nella homepage continua a vedersi.. mmm in Nivo slider mi sembra tutto corretto tra l'altro, ma forse sono io che non ho visto bene. Al seguente link puoi controllare che ho dato i tuoi stessi parametri http://doublelldesignz.altervista.org/GRIV/partner.html (http://doublelldesignz.altervista.org/GRIV/partner.html) nella sezione html e nel css.

Titolo: Re:Effetti tipografici
Inserito da: lemonsong - 20 Maggio, 2013, 12:43:42
[...] mmm in Nivo slider mi sembra tutto corretto tra l'altro, ma forse sono io che non ho visto bene.

Mi intrometto solo per farti notare che hai tutte le indicazioni per risolvere i tuoi "problemi".

Non ho la pazienza di stesil quindi con il rischio di essere "brutale": se non hai la minima idea di dove mettere le mani e cosa fare, perchè non segui alla lettera quello che ti viene scritto?

[...] oppure potrebbe anche essere qualche regola presente nel file style.css di nivoslider (che io non ho inserito)

Segnalo anche un ennesimo errore: hai aperto un elemento (non classe) p ma hai lasciato la chiusura </h1>

Spero per te di sbagliarmi su tutta la linea...
Titolo: Re:Effetti tipografici
Inserito da: Miss. Lin - 20 Maggio, 2013, 13:22:50
Ho appena sistemato l'errore del tag di chiusura p a sostituzione di quello h1, ma a quanto nonostante tutto è stato influente perchè l'errore continua a verificarsi. A questo punto probabilmente è da attribuire al css di nivo e sto cercando di capire cos'è che influsice nella formattazione diversa del testo nella homepage.
Titolo: Re:Effetti tipografici
Inserito da: Miss. Lin - 20 Maggio, 2013, 13:29:44
Bene, ho risolto il problema, ovviamente grazie all'aiuto di Stesil. In pratica nel foglio Style.css di Nivo Slider alla seguente voce:


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
   margin:0;
   padding:0;
   border:0;
   outline:0;
   font-weight:inherit;
   font-style:inherit;
   font-size:100%;
   font-family:inherit;
   vertical-align:baseline;
}




Avevo dato come font-size: 110%; per  fars si che la fascia di NiVo slider fosse + spessa ed insieme ad essa anche il testo.
Dunque per rendere la fascia + doppia e + grande anche il testo devo ovviare con un'altra soluzione.
Titolo: Re:Effetti tipografici
Inserito da: lemonsong - 20 Maggio, 2013, 15:11:50
Avevo dato come font-size: 110%; per  fars si che la fascia di NiVo slider fosse + spessa ed insieme ad essa anche il testo.


Quello (mi riferisco al codice postato) è un "reset" che dovrebbe già avere WS, hai visto quanti elementi coinvolge? Perché impostarlo a 110%?
Ti consiglio di non cercare sempre di trovare una giustificazione, a volte si "peggiorano" le cose.

Dunque per rendere la fascia + doppia e + grande anche il testo devo ovviare con un'altra soluzione.


Ti consiglio un paio di link, per cominciare:

http://www.web-link.it/ (http://www.web-link.it/)
http://www.html.it/guide/guida-css-di-base/ (http://www.html.it/guide/guida-css-di-base/)