Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
it
Entra / Registrati voce discussione visualizza sorgente cronologia
Indice [nascondi] 1 Premessa 2 Che cos' un template? 3 Teoria dei Fogli di Stile 4 Teoria dei Template 4.1 Template tableless 4.2 Definizione della struttura teorica della pagina 4.3 Definizione del codice html della pagina 5 Anatomia di un contenitore 5.1 Blocchi contenitori 5.2 I Float box 5.3 La Propriet Clear 6 Esercizio 1 - Primo template 7 Esercizio 2 - Secondo template 8 Esercizio 3 - Complichiamoci la vita 9 Trasformiamo in un template per Joomla 9.1 Prepariamo le cartelle per il template 9.2 Modifichiamo l'intestazione del file index.php 9.3 Posizioni per la pubblicazione dei moduli 9.4 Ritocchi finali 10 Template in azione 11 Le classi di stile di Joomla 12 Conclusioni 13 Link Utili 13.1 Tutorial 13.2 Strumenti
joomla 1.5
Primi passi FAQ Joomla 1.5 Miniguide Manuali
joomla 1.6
FAQ Joomla 1.6 Manuali per Joomla 1.6
centro traduzioni
Help Joomla! 1.5
joomla!
joomla.it forum sezione download template
ricerca
Vai
Ricerca
strumenti
Puntano qui Modifiche correlate Pagine speciali Versione stampabile Link permanente
Premessa
Prima di iniziare la lettura di questo tutorial bene chiarire quali sono le conoscenze minime necessarie per lo sviluppo di template per Joomla. E' infatti innegabile che non avere conoscenze di HTML e Fogli di Stile porter, a chiunque si accinga a sviluppare template per Joomla, una serie di problemi di comprensione di quanto di seguito riportato. Quindi procuriamoci una guida all'HTML (meglio all'XHTML) e ai Fogli di stile e iniziamo a studiare e sperimentare. Per chi avesse il dubbio che non conoscere il linguaggio PHP possa essere un problema non deve aver paura perch in questa fase iniziale tratteremo il php solo da un punto di vista superficiale e solo per ci che serve ad implementare un template per Joomla. Eventuali approfondimenti potranno essere necessari se si vuole realizzare un template pi complesso.
http://wiki.joomla.it/index.php?title=Guida_alla_realizzazione_di_template_per_Joomla_1.5[28/01/11 18.54.36]
Il selettore serve a definire la parte del documento cui verr applicata la regola, il blocco delle dichiarazioni delimitato rispetto al selettore e alle altre regole da due parentesi graffe. Al suo interno possono trovare posto pi dichiarazioni di attributi. L'attributo definisce un aspetto del tag da modificare (margini, colore di sfondo, etc) secondo il valore espresso. Attributo e valore devono essere separati dai due punti e terminare con un punto e virgola. Una limitazione fondamentale da rispettare questa: per ogni dichiarazione non possibile indicare pi di una propriet, mentre spesso possibile specificare pi valori. Per tornare al tag <body text="#000066"> se volessimo creare una regola nel foglio di stile potremmo scrivere:
BODY { text - color: #000066 }
Per utilizzare un foglio di stile all'interno di una pagina web scritta in html dobbiamo collegare il foglio di stile alla pagina. Ecco un esempio di come fare:
<html> <head> <title>Inserire i fogli di stile in un documento</title> <link rel="stylesheet" type="text/css" href="stile.css"> </head> </html>
In questo modo al momento in cui il browser caricher la pagina anche il foglio di stile (stile.css) verr caricato con essa. Oltre ai selettori (che altro non sono se non i tag dell'html) possibile definire regole con selettori particolare: le CLASSI e gli ID. Se uno stile va applicato ad un solo specifico elemento si dovr creare ed usare un ID. Se invece si prevede di usarlo pi volte e quindi su pi elementi si definisce nel CSS una classe. Per definire una classe o un ID la sintassi la seguente:
#giallo
e useremo
In definitiva usare un Foglio di Stile collegato ad un documento HTML consente di separare il layout (l'aspetto grafico) dal contenuto vero e proprio (testo e immagini).
http://wiki.joomla.it/index.php?title=Guida_alla_realizzazione_di_template_per_Joomla_1.5[28/01/11 18.54.36]
Template tableless
Questo tipo di template denominato tableless, cio senza tabelle, e si realizza attraverso l'uso dei tag div. La sua definizione generic block-level element ossia contenitore generico block level. Esistono diversi tipi di layout. Quelli definiti in base alla disposizione verticale delle aree della pagina sono: layout a una colonna layout a due colonne layout a tre colonne Quelli definiti in base alla disposizione orizzontale delle aree della pagina e al loro comportamento rispetto alla finestra del browser di navigazione sono: layout fisso layout elastico layout fluido Il layout fluido consente di far variare la larghezza delle pagine al variare della larghezza della finestra del browser, nel layout fisso, la pagina ha la larghezza dimensionata in pixel ad un valore fisso che generalmente studiato per una dimensione standard (800x600 o 1024x768), il layout elastico usa il dimensionamento in em (unit di misura relativa) non solo per il testo ma anche per la larghezza degli elementi principali della pagina, cosicch solo ridimensionando il carattere del browser possibile agire sulla larghezza della pagina, ottenendo una sorta di effetto "zoom". Per il nostro primo esempio utilizzeremo un layout a una colonna fluido.
HEADER, ossia l'intestazione della pagina. Deve essere alta al massimo 100/150 pixel per non impegnare troppo spazio sottraendolo ai contenuti della pagina. Nell'intestazione dovr trovare posto il nome del sito, una breve descrizione e il logo grafico.
http://wiki.joomla.it/index.php?title=Guida_alla_realizzazione_di_template_per_Joomla_1.5[28/01/11 18.54.36]
NAVIGAZIONE, la zone in cui verr posizionato il men di navigazione tra le pagine del sito. Deve essere ben visibile e leggibile. CONTENUTI, la zona destinata ai contenuti della pagina. FOOTER, il pi di pagina dove troveranno posto il copyright, i riferimenti di posta elettronica e i recapiti telefonici dell'azienda ed eventualmente i riferimenti a chi ha creato il sito. Questa operazione preventiva importantissima perch ci consente di avere un'idea precisa di come vogliamo strutturare il nostro sito. Al momento la pagina solo sezionata teoricamente ma ad ogni sezione teorica che abbiamo ora definito corrisponder una sezione fisica nella pagina. Le strategie che dovrebbero essere seguite per la definizione di un template potrebbero essere riassunte nei seguenti punti: 1. Definizione dei contenuti del sito 2. Definizione del layout da utilizzare 3. Definizione della grafica (colori, font, elementi grafici, immagini, ecc.) 4. Realizzazione della struttura della pagina utilizzando l'html seguendo il layout scelto 5. Definizione delle regole del fogli di stile da applicare agli elementi della pagina
< body> <div id = "wrap"> < div id = "header" >< /div> < div id= "navigazione"></ div > < div id= "contenuti">< / div> < div id= "footer" >< /div> < / div > < / body >
Come vedete nel corpo della pagina presente un contenitore principale (wrap) all'interno del quale sono "impilati" uno sull'altro i contenitori corrispondenti alle quattro zone che abbiamo definito in precedenza. Per dare una forma visibile a quanto abbiamo definito utilizzando l'html aggiunger un po' di contenuti e dei men (che al momento non puntano a niente). Tanto per vedere come si vede senza ancora aver definito il foglio di stile. Questo quello che vedremo:
http://wiki.joomla.it/index.php?title=Guida_alla_realizzazione_di_template_per_Joomla_1.5[28/01/11 18.54.36]
body { font - family: Verdana, Geneva , Arial, Helvetica, sans - serif ; font - size: 12px; margin: 0 0 0 0 ; padding: 0 0 0 0 ; } h1 { margin: 0 0 0 0 ; padding: 0 0 0 0 ; } h2 { color: #CC0000 ; font - size: 1.5em ; text - align: center ; } #wrap { /*nessuna regola necessaria*/ } #header { background - color: #FFFF99; height : 50px; border : #000000 solid 1px; } #navigazione{ background - color: #99FF99; color : #fff; } #contenuti{ padding: 0 1.5em 0 0 ; background - color:#FF9933; margin : 5px 10px 5px 10px; } #contenuti p { line - height: 1.3em; } #footer{ background - color:#FF66CC; padding: 0.5em ; color : #000; text - align: center ; }
Anatomia di un contenitore
Prima di proseguire introduciamo un altro concetto: il box. Praticamente ogni tag html pu essere considerato un box, un contenitore. Ogni contenitore pu, opzionalmente, avere un bordo (border) e uno sfondo (background). Il contenuto di un box al centro. Intorno al contenuto si trova un'area chiamata padding, che lo spazio tra il contenuto e il bordo. Il bordo intorno al padding. E vicino al bordo si trova il margine (margin), che lo spazio tra il box e gli altri box che si trovano vicino a esso.
http://wiki.joomla.it/index.php?title=Guida_alla_realizzazione_di_template_per_Joomla_1.5[28/01/11 18.54.36]
Questi attributi di un box (padding, border, margin) definiscono sia la posizione del box all'interno della pagina rispetto agli altri contenuti, sia la posizione del contenuto (testo o immagini) al suo interno. Per capire meglio il concetto facciamo un esempio pratico: Supponiamo di avere il seguente codice html:
<div class="div1"> <p>Lorem ipsum feugait maiestatis et cum, eum no utinam oblique scriptorem. Ex exerci quidam scribentur nam. Dolorum indoctum prodesset cu usu, paulo oportere ut ius. Vim no dolorum offendit consetetur, te has amet cibo epicuri. </p> </div>
.div1 { margin: 10px 10px 10px 10px ; padding: 10px 10px 10px 10px ; border: 2px solid #000000; width : 400px; } p { margin : 10px 10px 10px 10px ; padding: 10px 10px 10px 10px ; border: 2px solid #000000; }
Stiamo definendo, per il tag div la classe div1 preveder un margine alto, sinistro, basso e destro di 10 pixel, un padding alto, sinistro, basso e destro di 10 pixel, e un bordo di 2 pixel solido di colore nero. Lo stesso varr per il tag p, definiremo un selettore con le medesime caratteristiche sopra descritte. Il risultato finale sar questo:
Come vedete per definire le dimensioni del margine o del padding si pu usare un'unica dichiarazione, ad esempio
Il primo valore rappresenta il margine alto, il secondo il margine sinistro, il terzo il margine basso e il quarto il margine destro. Il valore pu essere espresso in pixel (px) o in em. Lo stesso vale per il padding e per il border. In realt potremmo anche decidere di assegnare valori diversi. Quello che vedremo nel browser sar questo:
http://wiki.joomla.it/index.php?title=Guida_alla_realizzazione_di_template_per_Joomla_1.5[28/01/11 18.54.36]
Blocchi contenitori
I blocchi contenitori sono delle porzioni di pagina rettangolari che contengono uno o pi box. I box sono visualizzati dentro un blocco contenitore e limitati al suo interno. Il blocco contenitore per eccellenza la finestra del browser. Se ci sono molti box all'interno di un blocco contenitore questi verranno visualizzati uno sopra l'altro. Il problema che i loro margini collassano verticalmente. Ci significa che, se due caselle sono collocate l'una dopo l'altra, la distanza tra i due bordi sar sia il margine inferiore del box in alto, o il margine superiore del box in basso, a seconda di quale il pi grande. Di seguito un esempio di quanto detto:
Come si pu vedere il margine basso del primo box e il margine alto del secondo box si sovrappongono ma quello che distanzia di pi i due box il margine alto del secondo box perch maggiore. Abbiamo detto che il blocco contenitore per eccellenza la finestra del browser. Come si comporta il browser quando visualizza una pagina?
http://wiki.joomla.it/index.php?title=Guida_alla_realizzazione_di_template_per_Joomla_1.5[28/01/11 18.54.36]
Esso crea un box per l'elemento BODY e lo mette dentro la finestra di visualizzazione. L'area dei contenuti di questo box (all'interno di margine, bordo e padding) il blocco contenitore principale che conterr tutti gli altri elementi (uno sotto l'altro) all'interno dell'elemento BODY. .E cos si comporter ogni altro blocco contenitore con i box contenuti al suo interno. Vediamo di capire meglio con un esempio. Supponiamo di avere scritto questo codice html:
< BODY> < DIV> <P > Contenuto primo paragrafo. < /P > < P > Contenuto secondo paragrafo. </P> </ DIV > <P > Contenuto terzo paragrafo. </ P > </ BODY >
Questo verr visualizzato nel browser, secondo quanto sopra detto, in questo modo:
Notate come i margini dei primi due paragrafi, che sono uguali, collassino, cos come i margini del DIV con il secondo paragrafo. Ora supponiamo che il corpo (body) abbia un bordo nero e uno sfondo bianco, che il DIV abbia un bordo nero e uno sfondo rosso, che i paragrafi contenuti al suo interno abbiano un bordo verde e uno giallo, e che il terzo paragrafo non abbia alcun bordo e con sfondo trasparente. Il risultato sar qualcosa di simile a questo:
http://wiki.joomla.it/index.php?title=Guida_alla_realizzazione_di_template_per_Joomla_1.5[28/01/11 18.54.36]
http://wiki.joomla.it/index.php?title=Guida_alla_realizzazione_di_template_per_Joomla_1.5[28/01/11 18.54.36]
Se guardate il foglio di stile all'interno della pagina vedrete che il primo box ha un margine basso di 30 pixel mentre il secondo box un margine alto di 60 pixel. La distanza tra i due box per di 60 pixel perch i due margini si sovrappongono e quello del primo box collassa.
I Float box
Abbiamo affrontato in precedenza alcuni concetti fondamentali relativi ai box container: 1. tutti i tag html sono considerati dei box contenitori; 1. il contenuto di un box al centro. Intorno al contenuto si trova un'area chiamata padding, che lo spazio tra il contenuto e il bordo. Il bordo intorno al padding. E vicino al bordo si trova il margine (margin), che lo spazio tra il box e gli altri box che si trovano vicino a esso; 1. i box vengono visualizzati sempre uno sopra l'altro. E allora come fare a posizionare i box uno accanto all'altro? Per visualizzare i box uno accanto all'altro necessario affidarsi ai fogli di stile e alla propriet float creando cos i cosiddetti box galleggianti (appunto floats). I floats box sono contenitori che vengono rimossi dal normale flusso del documento (dall'alto verso il basso) e vengono spostati a sinistra o a destra del blocco contenitore, mentre il resto del testo si dispone intorno a loro. I floats box sono creati utilizzando la propriet float che prevede tre parametri: left, right e none (sinistra, destra e nessuno). Per default la propriet float ha il valore none. Quando si imposta la propriet float per un elemento html (la useremo per il tag ) si deve necessariamente impostare la propriet width dell'elemento stesso. Facciamo un esempio usando il tag p : Supponiamo di avere questo codice html in una pagina
< DIV> < P ID= "uno" > Questo un float box. Non segue il normale flusso del documento. < br / > </P> < P ID= "due" > Questo un altro box successivo al primo che viene posizionato normalmente. Il suo contenuto viene spostato per effetto del float box </P> < P ID= "tre" > Questo altro box solo coperto parzialmente dal float box. Il testo ruota attorno al float box per le prime righe, poi si posiziona normalmente. </ P > < /DIV >
In questo codice vediamo un container div all'interno del quale si trovano tre paragrafi ad uno dei quali viene applicata la propriet float. Ora vediamo come usare la propriet float in questo foglio di stile collegato alla pagine contenente il codice precedente:
http://wiki.joomla.it/index.php?title=Guida_alla_realizzazione_di_template_per_Joomla_1.5[28/01/11 18.54.36]
BODY {background: #000000 ; width: 400px ; } DIV { margin: 1em ; padding: 1em; background: #00CC99 ; } P { margin : 1em ; } #uno { float : left ; width : 40 % ; margin : 0.5em; background : #003399; border: solid thin #D7040B; color: #FFFFFF ; }
Ed ecco il risultato:
Come vedete il primo box container viene posizionato nella pagina e i successivi box <p> vengono posizionati non seguendo il normale flusso del documento (un box sotto l'altro) ma partendo dalla destra del primo box e ruotando attorno ad esso. Vediamo ora cosa succede ad applicare la propriet float a pi box container contemporaneamente. Riprendendo l'esempio di prima modifichiamo il foglio di stile come segue:
BODY { background: #000000; DIV { margin : 1em; padding: 1em ; background: #00CC99; } P { margin : 1em; } #uno { float : left; width : 25% ; margin : 0.5em; background : #003399; border: solid thin #D7040B; color: #FFFFFF ; } #due { float : left; width : 45% ; margin : 0.5em; background: #003399 ; border : solid thin #D7040B; color : #FFFFFF; }
Questo il risultato:
In questo caso il secondo box container <P ID="due"> viene posizionato a destra del primo e provoca il posizionamento del terzo box alla sua destra. Se adesso nel foglio di stile precedente proviamo ad aumentare la larghezza del secondo box container portandola da 45% al 70% otterremo l'effetto di veder scivolare il secondo box sotto il primo.
http://wiki.joomla.it/index.php?title=Guida_alla_realizzazione_di_template_per_Joomla_1.5[28/01/11 18.54.36]
Questo perch il secondo box non avr abbastanza spazio per stare accanto al primo e verr posizionato sotto il primo box.
La Propriet Clear
Se desideriamo che un box container non si disponga a contorno di un altro (come nel primo caso) dobbiamo usare la propriet clear in questo modo:
BODY { background: #000000; } DIV { margin: 1em ; padding: 1em ; background: #00CC99; } P { margin: 1em ; } #uno { float: left ; width: 40 % ; margin: 0.5em ; background: #003399 ; border : solid thin #D7040B; color : #FFFFFF; } #tre { clear : left; }
Come si vede, rispetto alla prima figura, il terzo box container non contorna il primo ma ne resta completamente distaccato. In conclusione applicando la propriet float ad uno o pi box container possibile modificarne la loro disposizione rispetto al normale flusso del documento.
http://wiki.joomla.it/index.php?title=Guida_alla_realizzazione_di_template_per_Joomla_1.5[28/01/11 18.54.36]
Come si vede sono presenti 4 contenitori nominati Header, Left, Main Content e Footer contenuti all'interno di un unico contenitore (colorato in verde). Quest'ultimo serve solo a raggrupparli al loro interno e permette di centrare l'intera struttura nella pagina del browser. Iniziamo a scrivere il codice html che descrive quanto abbiamo disegnato. Ad ogni contenitore DIV che andremo a disegnare assegneremo una classe del foglio di stile che abbia lo stesso nome descritto nello schema:
<body> <div class="principale"> <div class="header"> Header </div> <div class="left"> Left </div> <div class="maincontent"> Main Content </div> <div class="footer"> Footer </div> </div> </body>
Per scriverlo non abbiamo tenuto conto della disposizione ma seguito l'orientamento dall'alto verso il basso e da sinistra verso destra. Il contenitore di classe "principale" quello colorato di verse e al suo interno abbiamo disposto, uno dopo l'altro, gli altri contenitori. Cos come lo abbiamo scritto per, visualizzandolo in un browser, vedremo i contenitori disposti uno sottto l'altro. E' necessario adesso iniziare a definire il Foglio di Stile del nostro template descrivendo le classi che abbiamo assegnato ad ogni contenitore.
<style> body { font - family: Georgia, "Times New Roman", Times, serif ; font - size: 90 % ; } .principale{ /*i margini auto insieme a una larghezza centrano la pagina */ width : 800px; margin : 0 auto; border : 2px solid #008000; } .header { text - align: center ; background - color: #FF9900; border: 1px solid #CCCCCC; width : 100 % ; height : 80px; float : none; } .left { text - align: center ; background - color: #6666CC; width : 25 % ; height: 600px ; float :left ; } .main - content{ text - align: center; background - color: #FFCC99; width : 75% ; height : 600px; float : left; } .footer { text - align: center; background - color: #33FF33 ; border : 1px solid #CCCCCC ; height : 50px; clear : left; } </style >
L'elemento body consente di assegnare le caratteristiche di base al font usato in tutta la pagina. Al contenitore di classe principale abbiamo assegnato una dimensione di 800 pixel mentre agli altri contenitori abbiamo assegnato un'ampiezza in percentuale. Perch? Avremmo potuto stabilire delle dimensioni in pixel anche per gli altri contenitori, ad esempio
http://wiki.joomla.it/index.php?title=Guida_alla_realizzazione_di_template_per_Joomla_1.5[28/01/11 18.54.36]
200px per il contenitore di classe left e 600px per il contenitore di classe maincontent (la somma dei due valori fa 800px). Cos facendo per se avessimo aumentato la dimensione del contenitore principale (che contiene tutti gli altri) avremmo dovuto variare in proporzione anche le dimensioni degli altri contenitori (left e maincontent). Esprimendoli in percentuale il problema non sussiste. Ad ogni classe seono stati applicati dei colori di background e dei bordi colorati solo per differenziarle. Quello che pi ci interessa in questo momento guardare come stata usata la propriet float. Come vedete la propriet float:left stata usata nelle classi left e maincontent per modificare la naturale disposizione dei contenitori a cui sono applicate in modo da affiancarli uno all'altro. Cosa manca adesso per trasformarlo in un vero template per Joomla? Semplicemente aggiungere quelle funzioni di Joomla che consentano di inserire all'interno dei contenitore i moduli, i componenti e i contenuti che joomla legge dal database. Queste funzioni fanno parte del cosiddetto Framework di Joomla e sono scritte in questo modo:
<jdoc:include type="tipo_oggetto" name="nome_zona_modulo" />
< body> <div class ="principale"> <div class= "header"> <jdoc:include type= "modules" name = "header" / > </ div > <div class= "left"> <jdoc:include type= "modules" name = "left" / > < / div> < div class= "maincontent"> <jdoc:include type= "component" / > < / div> < div class= "footer" > <jdoc:include type="modules" name = "footer" / > </ div > </ div > < / body>
Adesso dovremmo staccare la parte di codice del foglio di stile del template e inserirla in un file che chiameremo template.css. Quello che fino ad ora era un file con estensione html lo rinominiamo in un file con estensione .php Con una semplice operazione di taglia e incolla togliamo tutto ci che si trova tra i tag <style> e </style> (che cancelleremo) e inseriamoli in un file di testo che rinomineremo in telmplate.css. Il file che contiene l'html lo rinomineremo con il nome index.php. Sistemiamo questi due file in una cartella che chiameremo MioTemplate. In questa cartella mettiamo il file index.php e dentro una cartella che chiameremo css (dentro la cartella MioTemplate) metteremo il file template.css. Nel file index.php aggiungiamo, all'inizio del codice quello che segue:
<!DOCTYPE html PUBLIC " - //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1 - transitional.dtd"> < html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "" lang= ""> < head > <jdoc:include type= "head" /> < link rel ="stylesheet" href ="css/template.css" type = "text/css" /> < /head >
Con il tag <link> possiamo includere all'interno della nostra pagina il foglio di stile conservato nella cartella css. Nella realt il path per raggiungere questo file un p pi complesso perch deve tenere conto del percorso reale per raggiungere il file. Per fare questo si usano le variabili php proprie del Framework di joomla. Potremo quindi esprimere il path in due modi:
<link rel="stylesheet" href="/templates/rhuk_milkyway/css/template.css" type="text/css" />
oppure
<link rel="stylesheet" href="/templates//css/template_css.css" type="text/css" media="screen" />
Nel primo caso viene usato $this->baseurl per esprimere l'url del sito. Il path verr dunque trasformato in:
hxxp://www.miosito.it/templates/rhuk_milkyway/css/template.css
Nel secondo caso viene usato in pi $this->template che sostituisce il nome del template in uso (al posto di indicare direttamente il nome della cartella. Il path verr dunque trasformato allo stesso modo descritto in precedenza. La differenza sta nel fatto che questo metodo pi generico pu essere usato in tutti i template a prescindere dal nome del template stesso.
http://wiki.joomla.it/index.php?title=Guida_alla_realizzazione_di_template_per_Joomla_1.5[28/01/11 18.54.36]
La colonna che vogliamo aggiungere altro non che un ennesimo container DIV da posizionare a destra di quello denominato Main Content. In sostanza il trucco sta nel trovare il punto di inserimento del nuovo container DIV. Riprendiamo quindi il codice HTML precedente e, visto che abbiamo usato delle classi del fogli di stile adeguatamente nominate, lo troveremo immediatamente.
< body> <div class = "principale"> <div class ="header"> Header </ div > < div class ="left" > Left </div > < div class ="maincontent" > Main Content </ div > < div class ="right" > Right </ div > < div class = "footer"> Footer < /div > </ div > </ body >
Come vedete stato aggiunto un nuovo tag DIV al quale verr applicata la classe right del foglio di stile. Questa classe la aggiungeremo al foglio di stile del template scrivendola cos:
.right { text - align: center; background - color: #6666CC; width : 15 % ; height : 600px; float : left ; }
Dovremo per avere l'accortezza di modificare la larghezza (width) delle due classi right e main-content per adattarle alla presenza del nuovo container. Ad esempio assegnamo il 15% di larghezza alla colonna destra e il 70% di larghezza alla zona centrale: 15%(sinistra) + 70% (al centro) + 15%(a destra) = 100% della pagina.
http://wiki.joomla.it/index.php?title=Guida_alla_realizzazione_di_template_per_Joomla_1.5[28/01/11 18.54.36]
Come vedete sono state aggiunti due container: top e breadcrumb. Uno si trova proprio sotto l'header e l'altro sopra la main-content ma sempre tra i container left e right. Quest'ultimo sar un po' pi complicato da posizionare. Sulla base di quanto detto prima posizionare il container top non cosa difficile: individuiamo il container header e subito dopo inseriamo il tag div che ci serve:
< body> < div class = "principale"> <div class ="header"> Header </ div> <div class="top" > Top </ div > <div class= "left"> Left </div > <div class = "maincontent"> Main Content </ div> <div class= "right"> Right </div > <div class= "footer" > Footer </ div> < / div> < / body> <------- !!!!
Per l'altro container invece la cosa pi complessa. Dal momento che i tre container div (left, main-content e left) sono disposti in sequenza e uno alla destra dell'altro grazie alla propriet float del foglio di stile la presenza di un nuovo container che interrompe la sequenza fa saltare tutto. Provare per credere. La soluzione abbastanza semplice: creare un container all'interno del quale racchiudere i due container div di classe breadcrumbs e main-content. Nell'immagine seguente vedete questo nuovo container disegnato con il colore viola:
< div class = "principale"> <div class= "header"> Header </div >
http://wiki.joomla.it/index.php?title=Guida_alla_realizzazione_di_template_per_Joomla_1.5[28/01/11 18.54.36]
<div class = "breadcrumb"> Breadcrumb </ div > <div class="main - content"> Main Content < / div >
<div class= "footer" > Footer </ div > < / div>
Come vedete abbiamo racchiuso i due container breadcrumbs e main-content in un nuovo container al quale assegneremo una nuova classe del foglio di stile chiamata main-area che definiremo come segue:
Il nuovo container ovviamente non si vedr nel template ma questo sistema ci permette di ripristinare la sequenzialit dei container che adesso possono essere posizionati uno a destra dell'altro (left - main-area - right) mentre ci che contenuto dentro (annidato il termine corretto) il container main-area segue regole di posizionamento diverse. Le classi main-content e breadcrumbs del foglio di stile saranno dichiarate come segue:
.breadcrumb { text - align: center; background - color: #FFF58F ; border: 1px solid #000000; width : 100% ; height : 30px; } .main -content{ text - align: center ; background - color: #FFCC99; width: 100 %; height: 570px ; }
Notare che, rispetto a prima, la classe main-content non possiede pi la propriet float perch non segue pi le regole di posizionamento di prima. La larghezza dei due container adesso fissata al 100% perch a comandare la dimensione del container main-area che fissata al 70%. I container annidati riferiscono la loro larghezza al container che li contiene.
La propriet href del tag link conterr il percorso e il nome del foglio di stile. Vedremo poi come dichiarare questo percorso. Cos facendo abbiamo reso indipendente (e pi leggibile) il documento HTML dalla definizione degli stili.
http://wiki.joomla.it/index.php?title=Guida_alla_realizzazione_di_template_per_Joomla_1.5[28/01/11 18.54.36]
La cartella Nome_template sar chiamata con il nome con cui vorremo battezzare il nostro template. Questo dovr essere diverso da qualsiasi template in circolazione quindi cerchiamo di essere originali. Ricordiamoci che poi il nostro template verr installato in un sito web Joomla e rischieremmo di impedirne l'installazione solo perch abbiamo usato un nome troppo comune. La cartella css destinata a contenere i fogli di stile, la cartella images le immagini usate nel nostro template e la cartella html per consentire l'override di moduli e componenti (vedere la guida sull'Override). Spostiamo adesso il file template.css contenente il nostro foglio di stile nella cartella css e il nostro documento html nella cartella con il nome del template rinominandolo in index.php. Non fatevi ingannare dall'estensione php del file, sempre un file html (per adesso).
< ? php /** * @copyright * @license Copyright (C) 2005 - 2008 Open Source Matters. All rights reserved. GNU/GPL, see LICENSE.php
* Joomla! is free software. This version may have been modified pursuant * to the GNU General Public License, and as distributed it includes or * is derivative of works licensed under the GNU General Public License or * other free or open source software licenses. * See COPYRIGHT.php for copyright notices and details. */ // no direct access defined( '_JEXEC' ) or die( 'Restricted access' ) ; ?>
Questo codice php ed racchiuso tra i marcatori <?php e ?> che aprono e chiudono una sequenza di codice php. La funzione define('_JEXEC') evita che il file venga eseguito indipendentemente dall'ambiente di Joomla. 2) immediatamente sotto questo blocco di codice inseriremo il seguente codice sostituendolo a quello che gi troviamo in un comune file html:
<!DOCTYPE html PUBLIC " - //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1 - transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="< ? php echo $this - >language; ? >" lang="< ? php echo $this - >language; ? >" >
Questo codice permette di personalizzare i riferimenti alla lingua utilizzata dal nostro template. 3) di seguito, tra i tag <head> e </head> inseriemo quanto segue:
< head> <jdoc:include type= "head" / > <link rel ="stylesheet" href = "< ? php echo $this - >baseurl ? >/templates/nome_template/css/template.css" type="text/css" /> < / head>
Abbiamo detto in precedenza che il tag <link> permette di collegare un foglio di stile esterno dentro il nostro template. Nel parametro href va dichiarato il nome e il percorso del file contenente gli stili da applicare al nostro template. In questo caso il percorso viene ricavato utilizzando del codice php:
Questo codice verr sostituito dal path assoluto contenente l'url del nostro sito (http://www.miosito.it ) al quale seguir l'intero percorso per raggiungere il file. Notare che nel percorso ho inserito il termine nome_template al quale andr sostituito il nome che abbiamo dato al template. Il tag <jdoc:include> verr invece sostituito da una serie di informazioni da includere nell'header del file html finale. Queste
http://wiki.joomla.it/index.php?title=Guida_alla_realizzazione_di_template_per_Joomla_1.5[28/01/11 18.54.36]
informazioni sono direttamente ricavate dal framwork di Joomla e contengono il titolo della pagina e i tag <meta> utili all'identificazione e classificazione della pagina da parte dei motori di ricerca.
l'attributo type specifica il tipo di inclusione; pu essere uno dei seguenti: modules message components Il primo indica al web server che si intende inserire in quella posizione uno o pi moduli di Joomla pubblicati nella posizione dichiarata nell'attributo name, il secondo che in quella posizione verranno visualizzati eventuali messaggi di sistema (ad esempio messaggi di errore) e il terzo che in quello posizione verranno inseriti i contenuti (gli articoli). L'attributo name (usato solo per i moduli) indica il nome della cosiddetta posizione-modulo ovvero quel nome che, nel backend di Joomla, ci consentir di stabilire dove pubblicare un modulo. Il nome che assegneremo dovrebbe rispettare lo standard utilizzato per i template di Joomla: left per la posizione modulo corrispondente alla colonna sinistra del nostro template, right per la posizione destra, footer per quella in basso, ecc. Non confondiamo le posizioni modulo dichiarate nella istruzione <jdoc:include> con i nomi delle classi che assegnamo ai container div. Queste spesso coincidono solo per migliorare la lettura del codice del template ma non hanno nessuna attinenza tra loro. L'attributo style (usato solo per i moduli) indica lo stile html con cui il modulo verr trattato nella composizione della pagina. Esso pu essere scelto tra i seguenti: table horz xhtml - genera un container div per il modulo con il titolo in h3 rounded - genera div annidati Se ad esempio scegliamo lo stile rounded per un modulo men di Joomla il codice finale generato sar il seguente:
< div class = "module_menu"> <div > < div> <div > <h3 >Main Menu< / h3 > <ul class= "menu"> <li > <! - - voci di menu - - >< / li > </ ul > </ div > </ div > </ div > < / div>
http://wiki.joomla.it/index.php?title=Guida_alla_realizzazione_di_template_per_Joomla_1.5[28/01/11 18.54.36]
Per approfondimenti vi consiglio vivamente di leggere questa guida tecnica di creazione di box container con i bordi arrotondati.
Visto come abbiamo costruito il template ovvio che i moduli andranno posizionati nelle colonne destra e sinistra, nell'header e nel container breadcrumbs e, perch no?, anche nel container footer. Quindi il nostro codice html verr integrato come segue:
< body> < div class = "principale"> <div class= "header"> <jdoc:include type= "modules" name ="header" style = "xhtml" / > < /div > < div class= "top" > <jdoc:include type="modules" name = "top" style = "xhtml" /> < /div > < div class= "left" > <jdoc:include type="modules" name = "left" style = "rounded" /> </ div> <div class= "main - area"> <div class = "breadcrumb" > <jdoc:include type= "modules" name = "breadcrumbs" style = "xhtml" / > </ div> <div class="main - content" > <jdoc:include type= "component" / > </ div > </ div> <div class= "right"> <jdoc:include type= "modules" name = "right" style = "xhtml" /> </ div> <div class= "footer" > <jdoc:include type= "modules" name ="footer" style = "xhtml" / > </ div > < /div > < /body >
Come vedete al puro codice html abbiamo solo aggiunto l'istruzione <jdoc:include> dove vorremmo visualizzati i moduli e i contenuti del nostro sito Joomla. La scelta di posizionare moduli nell'header piuttosto che nel footer totalmente arbitraria, possiamo anche non farlo. Dipende solo dal fatto che vogliamo o meno visualizzare dei moduli in quelle posizioni. Come noterete i nomi delle posizioni modulo corrispondono ai container div che le contengono. Questo invece voluto perch rende pi semplice la lettura del codice del template e la sua modifica a distanza di tempo.
Ritocchi finali
Per completare l'opera dobbiamo creare, nella stessa cartella che contiene il file index.php del nostro template il file templateDetails.xml contenente il seguente codice:
< ? xml version= "1.0" encoding = "utf - 8"? > <!DOCTYPE install PUBLIC " - //Joomla! 1.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.5/template install.dtd"> <install version= "1.5" type= "template"> <name> miotemplate</name> <creationDate> 29/12/2009</creationDate > <author>BigHam </author > <authorEmail>bigham64@gmail.com</authorEmail> <authorUrl> http://bigham.netsons.org</authorUrl > <copyright> </copyright> <license> GNU/GPL</license > <version> 1.0.0 </version> <description>Il mio primo template </description> <files> <filename> index.php </filename> <filename> templateDetails.xml</filename > <filename> template_thumbnail.png</filename > <filename> index.html</filename >
http://wiki.joomla.it/index.php?title=Guida_alla_realizzazione_di_template_per_Joomla_1.5[28/01/11 18.54.36]
La struttura abbastanza semplice: le prime informazioni sono assolutamente descrittive del template mentre tra i marcatori <files> e </files> vengono elencati i file che fanno parte del template descrivendo il percorso completo a partire dalla cartella principale del template. Tra i marcatori <positions> e </positions> vengono invece elencate le posizioni modulo di cui abbiamo parlato in precedenza. Queste le rivedrete, cos come le avete elencate, quando pubblicherete un modulo nel backend del sito Joomla. Create un file chiamato index.html vuoto e copiatelo in tutte le cartelle del vostro template. Resta solo da fare uno screen shot del nostro template in azione e memorizzarlo nella cartella principale del template con il nome template_thumbnail.png e le dimensioni 206x150 pixel. Terminata questa fase potete anche comprimere in formato .zip il contenuto della cartella del template in modo da prepararlo per l'installazione in Joomla.
Template in azione
Ora che abbiamo il minimo indispensabile per un template di Joomla vediamo se funziona. Ve lo anticipo, non funzioner al primo colpo. La via pi semplice, invece di installarlo, quella di prendere la cartella contenente il template e copiarla all'interno della cartella /templates del nostro sito web realizzato in joomla. Accediamo al backend del sito e dal men Estensioni ->visualizziamo i template del nostro sito rendendo Predefinito il nostro template
Le indicazioni nelle colonne Nome Template, Versione, Data e Author sono ricavate dal file templateDetails.xml Visualizziamo l'anteprima e... Oh my God!!!
http://wiki.joomla.it/index.php?title=Guida_alla_realizzazione_di_template_per_Joomla_1.5[28/01/11 18.54.36]
Ovviamente, se avete seguito quanto ho scritto fino ad ora, il risultato non sar esteticamente dei migliori. Tutte le classi del foglio di stile avevano impostato l'allineamento del testo al centro e alcune avevano definita un'altezza fissa di 600px. Quindi per prima cosa modifichiamo il fogli di stile eliminando dalle classi left, right e main-content la definizione della propriet height (altezza) e cambiamo l'allineamento del testo (text-align) da center a left in tutte le classi. Il risultato non sar migliore ma, quanto meno, il testo verr allineato correttamente e la pagina si adatter al contenuto. Adesso dobbiamo lavorare molto sul foglio di stile per definire le classi standard di Joomla.
Conclusioni
Come avete visto le conoscenze di HTML e Fogli di stile sono importanti, meno importante, in questa fase, la conoscenza del linguaggio php. Alla fine non abbiamo fatto altri che creare una pagina scritta in HTML, definire lo stile dei tag in un fogli di stile collegato alla pagina e aggiungere quelle istruzioni, tipiche di Joomla, per creare la dinamicit del sito. Lo scopo di questo tutorial era di guidarvi nella realizzazione di un template partendo da un documento html vuoto e credo sia stato raggiunto. Adesso sta a voi proseguire. Evitate di usare tool che producono template, piuttosto imparate prima a creare da voi un template e solo dopo potrete utilizzare altri strumenti. Diversamente imparerete a guidare un'automobile senza sapere come e perch si muove e, in caso di problemi, sarete costretti a chiedere aiuto a un meccanico.
Link Utili
Tutorial
http://wiki.joomla.it/index.php?title=Guida_alla_realizzazione_di_template_per_Joomla_1.5[28/01/11 18.54.36]
Conversione template Joomla da 1.0 a 1.5 Joomla Joomla! 1.5 Template Tutorials Project Guide ai Fogli di Stile Joomla. Html with style Tutorial guida
- Una guida per chi volesse trasformare un template dalla versione 1.0 alla 1.5 di
- Le migliori guide (in italiano) sui fogli di stile. Leggetele prima di intraprendere lo sviluppo di template per - Vi consiglio anche la lettura dei template da 18 a 22 dai quali sono state ricavate alcune parti di questa
Strumenti
Dynamic CSS Layout - Generatore automatico di strutture xhtml di base (per i pi pigri) - Ottima guida per imparare a costruire un box container con i bordi arrotondati (ce ne Creazione di box con margini arrotondati sono altre in rete, basta usare google) Raccolta di css template free
Ultima modifica per la pagina: 22:03, 16 nov 2010. Documentation License 1.2.
http://wiki.joomla.it/index.php?title=Guida_alla_realizzazione_di_template_per_Joomla_1.5[28/01/11 18.54.36]