Guida alla realizzazione di template per Joomla 1.5 - Il wiki di Joomla.it

http://wiki.joomla.it/index.php?title=Guida_alla_realizzazione_di_template_per_Joomla_1.5[28/01/11 18.54.36]

come usare il wiki

Pagina principaleCome contribuireSintassiGlossarioUltime modificheUna pagina a caso

joomla 1.5

Primi passiFAQ Joomla 1.5MiniguideManuali

joomla 1.6

FAQ Joomla 1.6Manuali per Joomla1.6

centro traduzioni

Help Joomla! 1.5

joomla!

joomla.itforumsezione downloadtemplate

strumenti

Puntano quiModifiche correlatePagine specialiVersione stampabileLink permanente

discussione visualizza sorgente cronologia

Entra / Registrati

Guida alla realizzazione di template per Joomla 1.5Una delle cose più accattivanti e utili di Joomla è la possibilità di impostare un template diverso ogni volta che si vuole. Insomma,cambiare pelle ad un sito realizzato con Joomla non è mai stato così facile.

Il problema per molti è quello di capire come si realizzano i template! Forse anche solo modificarli può diventare un'impresa. Ma indefinitiva un template per Joomla altro non è che un file scritto usando tag HTML e Fogli di stile con una "spruzzata" di codice PHP(che, se non desideriamo effetti speciali, non è poi tanto).

Indice [nascondi]

1 Premessa2 Che cos'è un template?3 Teoria dei Fogli di Stile4 Teoria dei Template

4.1 Template tableless4.2 Definizione della struttura teorica della pagina4.3 Definizione del codice html della pagina

5 Anatomia di un contenitore5.1 Blocchi contenitori5.2 I Float box5.3 La Proprietà Clear

6 Esercizio 1 - Primo template7 Esercizio 2 - Secondo template8 Esercizio 3 - Complichiamoci la vita9 Trasformiamo in un template per Joomla

9.1 Prepariamo le cartelle per il template9.2 Modifichiamo l'intestazione del file index.php9.3 Posizioni per la pubblicazione dei moduli9.4 Ritocchi finali

10 Template in azione11 Le classi di stile di Joomla12 Conclusioni13 Link Utili

13.1 Tutorial13.2 Strumenti

PremessaPrima di iniziare la lettura di questo tutorial è bene chiarire quali sono le conoscenze minime necessarie per lo sviluppo di templateper Joomla.

E' infatti innegabile che non avere conoscenze di HTML e Fogli di Stile porterà, a chiunque si accinga a sviluppare template perJoomla, una serie di problemi di comprensione di quanto di seguito riportato. Quindi procuriamoci una guida all'HTML (meglioall'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 faseiniziale 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.

Che cos'è un template?Mi pare che a questa domanda rispondano numerosissime guide in giro per la rete. Quindi non mi dilungherò sull'argomento.

Un template è un file scritto in html e in php le cui caratteristiche di formattazione (colori, impaginazione, font, ecc.) sono contenuteall'interno di un foglio di stile.

Il file index.php viene richiamato da Joomla ogni volta che deve essere creata una nuovo pagina. I contenuti sono letti dal databaseMySQL e impaginati secondo la struttura che viene data alla pagina.

Ricordate sempre che il prodotto finale che viene visualizzato nel browser di navigazione è una pagina html. Il php serve perinterfacciarsi con il database e per dare vita a tutte le funzionalità tipiche di Joomla.

Questa guida tratterà i concetti base che riguardano:

1. fogli di stile2. tag html3. box container4. elementi di base di programmazione in php5. funzioni php del framework di Joomla per i template6. composizione di un template tableless (senza tabelle)

voce

ricerca

Guida alla realizzazione di template per Joomla 1.5 - Il wiki di Joomla.it

http://wiki.joomla.it/index.php?title=Guida_alla_realizzazione_di_template_per_Joomla_1.5[28/01/11 18.54.36]

Teoria dei Fogli di StileCredo non ci sia bisogno di dilungarsi su cosa è l'html. Piuttosto soffermiamoci a riflettere sull'abbinamento tra pagine html e fogli distile. Chi ha realizzato pagine web in html sa sicuramente che alcuni tag, come ad esempio il tag <body></body>, possiedono degliattributi che consentono di modificare l'aspetto di ciò che viene racchiuso al loro interno. Ad esempio scrivere <body text="#000066">comporterà la colorazione in blu di tutto il testo racchiuso all'interno del tag.

I fogli di stile (CSS o Cascading Style Sheets) altro non sono che una raccolta degli attributi di formattazione (colore, font, interlinea,bordi, ecc.) applicabili ad un particolare tag html anche se nel tempo si sono evoluti in qualcosa di più complesso. All'interno di unfoglio di stile le regole (rules) consentono di definire gli stili di formattazione applicabili ad un tag.

La sintassi per scrivere una regola è abbastanza semplice:

selettore { attributo : valore; }

Il selettore serve a definire la parte del documento cui verrà applicata la regola, il blocco delle dichiarazioni è delimitato rispetto alselettore 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 valoredevono essere separati dai due punti e terminare con un punto e virgola. Una limitazione fondamentale da rispettare è questa: perogni 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 unesempio 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. Seuno stile va applicato ad un solo specifico elemento si dovrà creare ed usare un ID. Se invece si prevede di usarlo più volte e quindisu più elementi si definisce nel CSS una classe.

Per definire una classe o un ID la sintassi è la seguente:

.nome_classe { attributo: valore; } #nome_ID { attributo: valore; }

Come si usano le classi e gli ID?

Se ad esempio dichiariamo la classe

.giallo { background-color: #FFFF66; }

potremmo utilizzarla per colorare di giallo lo sfondo di una tabella:

<table class="giallo">

lo stesso vale per l'ID che dichiareremo in questo modo:

#giallo { background-color: #FFFF66; }

e useremo

<table ID="#giallo">

In definitiva usare un Foglio di Stile collegato ad un documento HTML consente di separare il layout (l'aspetto grafico) dal contenutovero e proprio (testo e immagini).

Guida alla realizzazione di template per Joomla 1.5 - Il wiki di Joomla.it

http://wiki.joomla.it/index.php?title=Guida_alla_realizzazione_di_template_per_Joomla_1.5[28/01/11 18.54.36]

Teoria dei TemplateNel caso di Joomla il template è il modello della pagina dalla quale, utilizzando le capacità del linguaggio php, è possibile generarealtre pagine dal formato sempre uguale, ma con contenuti sempre diversi.

In questa parte della guida vedremo quali sono i principi secondo i quali è possibile costruire un template senza usare le tabelle mautilizzando esclusivamente il layout basato su CSS e senza soffermarci sul fatto che poi li adatteremo all'ambiente di Joomla.

Template tablelessQuesto 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 dinavigazione 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, lapagina ha la larghezza dimensionata in pixel ad un valore fisso che è generalmente studiato per una dimensione standard (800x600o 1024x768), il layout elastico usa il dimensionamento in em (unità di misura relativa) non solo per il testo ma anche per la larghezzadegli elementi principali della pagina, cosicché solo ridimensionando il carattere del browser è possibile agire sulla larghezza dellapagina, ottenendo una sorta di effetto "zoom". Per il nostro primo esempio utilizzeremo un layout a una colonna fluido.

Definizione della struttura teorica della paginaCominciamo dunque col strutturare logicamente il contenuto della pagina che andremo a definire. Una struttura semplice ma efficaceè quella che prevede quattro zone sovrapposte:

HEADER, ossia l'intestazione della pagina. Deve essere alta al massimo 100/150 pixel per non impegnare troppo spazio sottraendoloai contenuti della pagina. Nell'intestazione dovrà trovare posto il nome del sito, una breve descrizione e il logo grafico.

Guida alla realizzazione di template per Joomla 1.5 - Il wiki di Joomla.it

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 edeventualmente 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 nostrosito. Al momento la pagina è solo sezionata teoricamente ma ad ogni sezione teorica che abbiamo ora definito corrisponderà unasezione 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 sito2. Definizione del layout da utilizzare3. Definizione della grafica (colori, font, elementi grafici, immagini, ecc.)4. Realizzazione della struttura della pagina utilizzando l'html seguendo il layout scelto5. Definizione delle regole del fogli di stile da applicare agli elementi della pagina

Definizione del codice html della paginaSiamo pronti per trasformare la struttura teorica della nostra pagina nella corrispondente struttura in tag html. Useremo per realizzarela pagina i contenitori. La struttura della pagina sarà la seguente:

<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 icontenitori 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 momentonon puntano a niente). Tanto per vedere come si vede senza ancora aver definito il foglio di stile.

Questo è quello che vedremo:

Aggiungiamo ora il foglio di stile (lo commenteremo più avanti):

Guida alla realizzazione di template per Joomla 1.5 - Il wiki di Joomla.it

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;}

Questo sarà il risultato:

Anatomia di un contenitorePrima 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 trovanovicino a esso.

Guida alla realizzazione di template per Joomla 1.5 - Il wiki di Joomla.it

http://wiki.joomla.it/index.php?title=Guida_alla_realizzazione_di_template_per_Joomla_1.5[28/01/11 18.54.36]

In questa figura vediamo un esempio di quanto detto:

Questi attributi di un box (padding, border, margin) definiscono sia la posizione del box all'interno della pagina rispetto agli altricontenuti, 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>

Se definiamo nel foglio di stile:

.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

MARGIN: 10px 10px 10px 10px;

Il primo valore rappresenta il margine alto, il secondo il margine sinistro, il terzo il margine basso e il quarto il margine destro. Il valorepuò 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:

Guida alla realizzazione di template per Joomla 1.5 - Il wiki di Joomla.it

http://wiki.joomla.it/index.php?title=Guida_alla_realizzazione_di_template_per_Joomla_1.5[28/01/11 18.54.36]

Blocchi contenitoriI blocchi contenitori sono delle porzioni di pagina rettangolari che contengono uno o più box. I box sono visualizzati dentro un bloccocontenitore 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 marginicollassano verticalmente. Ciò significa che, se due caselle sono collocate l'una dopo l'altra, la distanza tra i due bordi sarà sia ilmargine inferiore del box in alto, o il margine superiore del box in basso, a seconda di quale è il più grande. Di seguito un esempio diquanto detto:

Come si può vedere il margine basso del primo box e il margine alto del secondo box si sovrappongono ma quello che distanzia dipiù 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 unapagina?

Guida alla realizzazione di template per Joomla 1.5 - Il wiki di Joomla.it

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'internodi margine, bordo e padding) è il blocco contenitore principale che conterrà tutti gli altri elementi (uno sotto l'altro) all'internodell'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. Orasupponiamo che il corpo (body) abbia un bordo nero e uno sfondo bianco, che il DIV abbia un bordo nero e uno sfondo rosso, che iparagrafi contenuti al suo interno abbiano un bordo verde e uno giallo, e che il terzo paragrafo non abbia alcun bordo e con sfondotrasparente. Il risultato sarà qualcosa di simile a questo:

Guida alla realizzazione di template per Joomla 1.5 - Il wiki di Joomla.it

http://wiki.joomla.it/index.php?title=Guida_alla_realizzazione_di_template_per_Joomla_1.5[28/01/11 18.54.36]

E questo è un esempio di ciò che abbiamo detto:

Questo è il codice finale:

Guida alla realizzazione di template per Joomla 1.5 - Il wiki di Joomla.it

http://wiki.joomla.it/index.php?title=Guida_alla_realizzazione_di_template_per_Joomla_1.5[28/01/11 18.54.36]

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Documento senza titolo</title></head> <style>body { margin: 20px 20px 20px 20px;}.div1 { margin: 10px 10px 30px 10px; padding: 10px 10px 10px 10px; border: 2px solid #000000; width:400px;}.div2 { margin: 60px 10px 10px 10px; padding: 10px 10px 10px 10px; border: 2px solid #CC0000; width:400px;}p { margin: 10px 10px 10px 10px; padding: 10px 10px 10px 10px; border: 2px solid #000000;} </style> <body> <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> <div class="div2"> <p>Debet antiopam pertinacia eu mei, eum ut choro delectus qualisque. Ne exerci recteque mea, cum eu erat tritani fabulas. Putent repudiare splendide et sed. Vis possim voluptua accommodare te, cum ex veniam minimum. </p> </div></body></html>

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 unmargine alto di 60 pixel. La distanza tra i due box è però di 60 pixel perché i due margini si sovrappongono e quello del primo boxcollassa.

I Float boxAbbiamo 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 ilbordo. 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 sitrovano 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 boxgalleggianti (appunto floats).

I floats box sono contenitori che vengono rimossi dal normale flusso del documento (dall'alto verso il basso) e vengono spostati asinistra 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). Perdefault 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:

Guida alla realizzazione di template per Joomla 1.5 - Il wiki di Joomla.it

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 boxsotto 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 boxalla sua destra. Se adesso nel foglio di stile precedente proviamo ad aumentare la larghezza del secondo box container portandolada 45% al 70% otterremo l'effetto di veder scivolare il secondo box sotto il primo.

Guida alla realizzazione di template per Joomla 1.5 - Il wiki di Joomla.it

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à ClearSe desideriamo che un box container non si disponga a contorno di un altro (come nel primo caso) dobbiamo usare la proprietà clearin 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; }

L'effetto sarà il seguente:

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 normaleflusso del documento.

Esercizio 1 - Primo templateAdesso proviamo a realizzare il primo template per Joomla! Sarà un template molto semplice a due colonne ma senza grafica, solocon i colori. La grafica è comunque possibile aggiungerla in un secondo momento.

Iniziamo col disegnare lo schema che vogliamo realizzare:

Guida alla realizzazione di template per Joomla 1.5 - Il wiki di Joomla.it

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 delbrowser.

Iniziamo a scrivere il codice html che descrive quanto abbiamo disegnato. Ad ogni contenitore DIV che andremo a disegnareassegneremo 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' necessarioadesso 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 assegnatoun'ampiezza in percentuale. Perchè? Avremmo potuto stabilire delle dimensioni in pixel anche per gli altri contenitori, ad esempio

Guida alla realizzazione di template per Joomla 1.5 - Il wiki di Joomla.it

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 inproporzione 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 inquesto 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 acui 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 icontenuti che joomla legge dal database. Queste funzioni fanno parte del cosiddetto Framework di Joomla e sono scritte in questomodo:

<jdoc:include type="tipo_oggetto" name="nome_zona_modulo" />

Riscriviamo allora il codice html inserendo le funzioni del Framework:

<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. Quelloche 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) einseriamoli 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 unacartella 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 ilfile. 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 ilnome della cartella. Il path verrà dunque trasformato allo stesso modo descritto in precedenza. La differenza sta nel fatto che questometodo è più generico è può essere usato in tutti i template a prescindere dal nome del template stesso.

Esercizio 2 - Secondo templateE se adesso volessimo aggiungere una colonna a destra della zona destinata ai contenuti? Qualcosa del genere insomma:

Guida alla realizzazione di template per Joomla 1.5 - Il wiki di Joomla.it

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 MainContent. In sostanza il trucco sta nel trovare il punto di inserimento del nuovo container DIV. Riprendiamo quindi il codice HTMLprecedente 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 laaggiungeremo 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 presenzadel 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.

Esercizio 3 - Complichiamoci la vitaUn ultimo sforzo adesso e vediamo come modificare il precedente template secondo questo schema:

Guida alla realizzazione di template per Joomla 1.5 - Il wiki di Joomla.it

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-contentma sempre tra i container left e right. Quest'ultimo sarà un po' più complicato da posizionare. Sulla base di quanto detto primaposizionare 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 insequenza e uno alla destra dell'altro grazie alla proprietà float del foglio di stile la presenza di un nuovo container che interrompe lasequenza 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 emain-content. Nell'immagine seguente vedete questo nuovo container disegnato con il colore viola:

Ed ecco come dovrà essere modificato il codice html della pagina:

<div class="principale"> <div class="header"> Header </div>

Guida alla realizzazione di template per Joomla 1.5 - Il wiki di Joomla.it

http://wiki.joomla.it/index.php?title=Guida_alla_realizzazione_di_template_per_Joomla_1.5[28/01/11 18.54.36]

<div class="top"> Top </div> <div class="left"> Left </div> <div class="main-area"> <div class="breadcrumb"> Breadcrumb </div> <div class="main-content"> Main Content </div> </div> <div class="right"> right </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 unanuova classe del foglio di stile chiamata main-area che definiremo come segue:

.main-area{ width: 70%; float:left; }

Il nuovo container ovviamente non si vedrà nel template ma questo sistema ci permette di ripristinare la sequenzialità dei containerche 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 diposizionamento di prima. La larghezza dei due container è adesso fissata al 100% perché a comandare è la dimensione delcontainer main-area che è fissata al 70%. I container annidati riferiscono la loro larghezza al container che li contiene.

Trasformiamo in un template per JoomlaFino ad ora abbiamo lavorato solo con HTML e Fogli di Stile e questo ci ha consentito di costruire la struttura della pagina. Avremmopotuto lavorare anche con un pò più di grafica inserendo magari delle immagini ma lo scopo di questo tutorial è comprendere comestrutturare un template per Joomla, per la grafica c'è sempre tempo.

Cosa bisogna aggiungere adesso perchè il template si trasformi in qualcosa che Joomla può utilizzare?

Anzitutto vediamo cosa dobbiamo togliere dal documento HTML che abbiamo appena definito. Cominciamo col togliere i riferimentiallo stile (ciò che è racchiuso tra i tag <style> e </style>) e ha trasferirlo all'interno di un file che chiameremo template.css. Quindiinseriremo tra i tag <header> e </header> del documento un nuovo tag che ci permetta di includere il foglio di stile esterno dentro ilnostro template la cui sintassi è la seguente:

<link rel="stylesheet" type="text/css" href="template.css">

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.

Guida alla realizzazione di template per Joomla 1.5 - Il wiki di Joomla.it

http://wiki.joomla.it/index.php?title=Guida_alla_realizzazione_di_template_per_Joomla_1.5[28/01/11 18.54.36]

Prepariamo le cartelle per il templateCreiamo la seguente struttura di cartelle:

La cartella Nome_template sarà chiamata con il nome con cui vorremo battezzare il nostro template. Questo dovrà essere diverso daqualsiasi template in circolazione quindi cerchiamo di essere originali. Ricordiamoci che poi il nostro template verrà installato in unsito 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 consentirel'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 conil nome del template rinominandolo in index.php. Non fatevi ingannare dall'estensione php del file, è sempre un file html (peradesso).

Modifichiamo l'intestazione del file index.phpApriamo il file index.php con un editor di testo e modifichiamolo come segue:

1) in testa al file inseriemo questo codice:

<?php /** * @copyright Copyright (C) 2005 - 2008 Open Source Matters. All rights reserved. * @license 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 funzionedefine('_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 comunefile 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 parametrohref va dichiarato il nome e il percorso del file contenente gli stili da applicare al nostro template. In questo caso il percorso vienericavato utilizzando del codice php:

<?php echo $this->baseurl ?>

Questo codice verrà sostituito dal path assoluto contenente l'url del nostro sito (http://www.miosito.it ) al quale seguirà l'interopercorso per raggiungere il file. Notare che nel percorso ho inserito il termine nome_template al quale andrà sostituito il nome cheabbiamo dato al template.

Il tag <jdoc:include> verrà invece sostituito da una serie di informazioni da includere nell'header del file html finale. Queste

Guida alla realizzazione di template per Joomla 1.5 - Il wiki di Joomla.it

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> utiliall'identificazione e classificazione della pagina da parte dei motori di ricerca.

Posizioni per la pubblicazione dei moduliPerché si parla di pagine dinamiche quando si parla di un sito realizzato con Joomla? Perché viene utilizzato un unico file (iltemplate) nel quale alcune informazioni vengono sostituite di volta in volta in base alle richieste che il navigatore fa attraverso i linkche trova nella pagina. Quando ad esempio clicchiamo su un link ad un articolo inviamo al server web una richiesta (corrispondente alink su cui abbiamo cliccato) e il server rielabora la pagina (il template) sostituendo le informazioni presenti con quelle richiesteleggendole da un database MySQL (il cuore di un sito Joomla).

Le parti dinamiche di un sito Joomla sono individuate nei cosiddetti moduli e componenti di Joomla. Questi altro non sono che blocchidi codice php che, elaborati dal web server, danno origine ad altrettanti blocchi di tag html. I menù di Joomla corrispondono almodulo mod_mainmenu ma ciò che vede e interpreta il nostro browser è il risultato dell'elaborazione eseguita dal server, ossia codicehtml.

Quello che dobbiamo fare adesso è inserire, all'interno del codice del nostro template, il codice necessario al web server ad includerei moduli e i componenti di joomla. Per farlo utilizzeremo il tag <jdoc:include> a cui abbiamo accennato in precedenza. La sintassi è laseguente:

<jdoc:include type="tipo_elemento" name="nome_posizione" style="xhtml" />

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 dichiaratanell'attributo name, il secondo che in quella posizione verranno visualizzati eventuali messaggi di sistema (ad esempio messaggi dierrore) 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 diJoomla, ci consentirà di stabilire dove pubblicare un modulo. Il nome che assegneremo dovrebbe rispettare lo standard utilizzato per itemplate 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 classiche assegnamo ai container div. Queste spesso coincidono solo per migliorare la lettura del codice del template ma non hannonessuna 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>

Mentre se usiamo lo stile xhtml avremo questo risultato:

<div class="moduletable_menu">

Guida alla realizzazione di template per Joomla 1.5 - Il wiki di Joomla.it

http://wiki.joomla.it/index.php?title=Guida_alla_realizzazione_di_template_per_Joomla_1.5[28/01/11 18.54.36]

<h3>Main Menu</h3> <ul class="menu"> <li><!-- various menu items --></li> </ul></div>

Per approfondimenti vi consiglio vivamente di leggere questa guida sul wiki ufficiale di joomla.org. Contiene anche chiarimenti sullatecnica 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 nelcontainer 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 contenutidel nostro sito Joomla. La scelta di posizionare moduli nell'header piuttosto che nel footer è totalmente arbitraria, possiamo anchenon farlo. Dipende solo dal fatto che vogliamo o meno visualizzare dei moduli in quelle posizioni. Come noterete i nomi delle posizionimodulo corrispondono ai container div che le contengono. Questo invece è voluto perché rende più semplice la lettura del codice deltemplate e la sua modifica a distanza di tempo.

Ritocchi finaliPer completare l'opera dobbiamo creare, nella stessa cartella che contiene il file index.php del nostro template il filetemplateDetails.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>

Guida alla realizzazione di template per Joomla 1.5 - Il wiki di Joomla.it

http://wiki.joomla.it/index.php?title=Guida_alla_realizzazione_di_template_per_Joomla_1.5[28/01/11 18.54.36]

<filename>images/index.html</filename> <filename>css/index.html</filename> <filename>css/template.css</filename> </files> <positions> <position>header</position> <position>top</position> <position>left</position> <position>breadcrumb</position> <position>right</position> <position>footer</position> </positions> </install>

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 deltemplate. Tra i marcatori <positions> e </positions> vengono invece elencate le posizioni modulo di cui abbiamo parlato inprecedenza. 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 delnostro template in azione e memorizzarlo nella cartella principale del template con il nome template_thumbnail.png e le dimensioni206x150 pixel.

Terminata questa fase potete anche comprimere in formato .zip il contenuto della cartella del template in modo da prepararlo perl'installazione in Joomla.

Template in azioneOra che abbiamo il minimo indispensabile per un template di Joomla vediamo se funziona. Ve lo anticipo, non funzionerà al primocolpo.

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 templatedel 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!!!

Guida alla realizzazione di template per Joomla 1.5 - Il wiki di Joomla.it

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 distile 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, quantomeno, 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.

Le classi di stile di JoomlaFino a questo momento ci siamo occupati di definire la struttura di un documento html e abbiamo inserito le istruzioni necessarie aJoomla per includere dinamicamente quelle porzioni di codice html che daranno origine alla visualizzazione dei contenuti, dei menù edi tutti quei moduli che avremo deciso di pubblicare.

Ma proprio per questa parte dinamica manca una definizione di layout (aspetto grafico) e il risultato si vede nell'esempio precedente.Esistono però un insieme di classi di stile predefinite dagli sviluppatori di Joomla che consentono di dare forma quasi ad ognielemento della pagina.

Nel wiki di joomla.it trovate un esempio di fogli di stile utilizzabile in tutti i template per joomla 1.5 . Ovviamente la meraelencazione delle classi di un foglio di stile non è sufficiente: bisogna sapere dove esse agiscono. Per far questo ho trovato questopreziosissimo link nel quale potrete vederle in azione .

ConclusioniCome avete visto le conoscenze di HTML e Fogli di stile sono importanti, meno importante, in questa fase, è la conoscenza dellinguaggio php. Alla fine non abbiamo fatto altri che creare una pagina scritta in HTML, definire lo stile dei tag in un fogli di stilecollegato 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 statoraggiunto. Adesso sta a voi proseguire. Evitate di usare tool che producono template, piuttosto imparate prima a creare da voi untemplate 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

Guida alla realizzazione di template per Joomla 1.5 - Il wiki di Joomla.it

http://wiki.joomla.it/index.php?title=Guida_alla_realizzazione_di_template_per_Joomla_1.5[28/01/11 18.54.36]

Ultima modifica per la pagina: 22:03, 16 nov 2010. Questa pagina è stata letta 52.439 volte. Contenuti soggetti a licenza d'uso GNU FreeDocumentation License 1.2. Informazioni sulla privacy Informazioni su Il wiki di Joomla.it Avvertenze Joomlahost.it

Conversione template Joomla da 1.0 a 1.5 - Una guida per chi volesse trasformare un template dalla versione 1.0 alla 1.5 diJoomla

Joomla! 1.5 Template Tutorials Project - Tutto ciò che bisogna sapere sui template di Joomla 1.5

Guide ai Fogli di Stile - Le migliori guide (in italiano) sui fogli di stile. Leggetele prima di intraprendere lo sviluppo di template perJoomla.

Html with style Tutorial - Vi consiglio anche la lettura dei template da 18 a 22 dai quali sono state ricavate alcune parti di questaguida

Guida al layout dei siti con i CSS

CSS Tutorial MaxDesign

StrumentiDynamic CSS Layout - Generatore automatico di strutture xhtml di base (per i più pigri)

Creazione di box con margini arrotondati - Ottima guida per imparare a costruire un box container con i bordi arrotondati (ce nesono altre in rete, basta usare google)

Raccolta di css template free - Ottimo punto di partenza per iniziare la creazione di un template per Joomla

--bigham 21:33, 3 gen 2010 (UTC)

Categoria: Miniguide