Menu Lab
Donazione Paypal
Hei! Hai trovato qualcosa di utile nel mio sito?
Siti realizzati...
RSS Feeds
| Adattare un template HTML a Typolight |
|
|
|
| sabato 11 aprile 2009 | ||||||
|
Finalmente ho scritto un documento a step su come preparare e far funzionare un template custom in Typolight.
Purtroppo secondo me i video e le documentazioni non rendono benissimo. Il metodo usato nel video di Ben inoltre è abbastanza strano, omette alcune cose e non fa capire chiaramente come Typolight ragiona. Spero quindi con questo mio documento di fare cosa gradita a tutti i web designer che desiderano montare i propri layout html in Typolight. Speriamo di riscuotere lo stesso successo ottenuto con i tutorial sui template per Joomla  Prima di tutto iniziamo dicendo che Typolight utilizza un sistema di templates interno al suo core (/system/modules/frontend/templates), ogni template si occupa di una particolare parte (es: la pagina generale, il menu, il breadcrumb, la lista short news, la galleria foto... ecc). Ogni template ha estensione ".tpl" e normalmente ha un prefisso significativo, che viene riconosciuto da Typolight... ad esempio "fe_page.tpl" è il template generale di front end, mentre "nav_default.tpl" è il template della navigazione. Quindi quando creiamo i nostri personalizzati dobbiamo tenere questo formato, per esempio chiamandoli “fe_miapagina.tpl”, fe_miahomepage.tpl”, “nav_miomenu.tpl” ecc... Questi menzionati sono due templates tipici, che in fase di produzione del sito incontriamo immediatamente, li possiamo personalizzare via pannello amministrazione (Typolight fa una copia di quello presente in core e la mette nella cartella /templates/). Sono files che generano html come output, e contengono ovviamente parti di php. In alcuni casi particolari si deve ricorrere alla modifica manuale dei templates del core (di norma non serve), ma noi web designer non dovremmo essere spaventati da questo vero? Per esempio io ho modificato il template che genera le gallerie fotografiche, siccome non mi piace l'output tabellare (avevo inoltre un layout fluido), allora ho deciso di riscrivere la parte in forma table less con le immagini in float. Poi, altra cosa da sapere è che i css li importa, questa funzionalità è molto interessante in quanto Typolight si mangia i nostri css, li analizza e riscrive in root, poi si possono editare con gli ottimi strumenti in admin. Infine le immagini e files li gestisce nella sua cartella dedicata ai file caricati (/tl_files/). Quindi dobbiamo caricarle con il file manager. Bene ora iniziamo con il tutorial vero e proprio, partiamo da una situazione iniziale come questa. 1. Typolight installato correttamente. Installata anche la lingua italiana. 2. Una struttura del sito abbozzata (Layout -> Struttura sito) e qualche articolo inserito come contenuto (Contenuti -> Articoli). Questo serve per dare forma al sito una volta impostato il template. Così ci appaiono i testi e i menu di navigazione. 3. Il nostro template html originale, il css, la cartellina immagini, swf. Questa volta non scrivo tutto nel sito, per comodità metto solo un pdf da scaricare, scritto in 5 fasi.Fase A: Creare il template html in Typolight Fase B: Importare e sistemare gli stili CSS Fase C: Creare i moduli del sito che formano il template ideato Fase D: Assemblare i moduli in un Layout Fase E: Assegnare il Layout alla root del sito (o all'area interessata)  Scarica html2template-typolight 11/04/2009,23:14 186.21 KbBuon divertimento!  Aggiungi ai preferiti (172) | Visualizzazioni: 2323
Scrivi Commento
Powered by AkoComment Tweaked Special Edition v.1.4.6 |
||||||
| < Prec. | Pros. > |
|---|
Copyright © 2010 ZOD.
