In tre precedenti articoli ho già affrontato la realizzazione di un template per Joomla partendo da zero (parte1, parte2, parte3). Ovviamente è più semplice partire da una base già creata, apportare le opportune modifiche per arrivare al prodotto finito.

Con questo tutorial vedremo come trasformare un free css template (template in html basato su fogli di stile) in un template per joomla 1.5.

Per la lettura di questa guida sono necessarie buone conoscenze di HTML e fogli di stile sono inoltre consigliate conoscenze del linguaggio php e delle funzioni di Joomla relative ai templates.

Scegliamo il template.

Per prima cosa dobbiamo decidere che tipo di template realizzare. Piuttosto che partire da zero questa volta proverò a sfruttare internet per trovare qualcosa che faccia al nostro caso. No, non un template già pronto, piuttosto un css template free. Provate a scrivere le seguenti parole chiave in un motore di ricerca: free css template e vedrete quanti siti offrono gratuitamente template basati sui fogli di stile.
Per questo tutorial utilizzero il template tricolor prelevato da questo sito.

Perchè questo template e non un altro?

Anzitutto perchè è un template tableless e poi perchè, dovendo rendere semplice la spiegazione, ho evitato appositamente tutti i template che presentassero una grafica fissa, anche perchè questo è puro codice html e dovremo trasformarlo in un template per Joomla.
La seconda motivazione è che, avendo deciso di creare un template le cui dimensioni in larghezza possono essere variate, la presenza di immagini fisse (ad esempio nell'intestazione della pagina) comporterebbe molto lavoro con programmi di editor grafici.

Quindi i termini di scelta del template, a parte la gradevolezza, sono:

• template tableless
• le dimensioni possono essere fisse o fluide
• la presenza di elementi grafici a lunghezza fissa comporta più lavoro per il loro adattamento (ove possibile)

Analizziamo il css template

La prima cosa da fare è analizzare la struttura del template scelto. Per facilitarci il compito avermo bisogno di uno strumento in più rispetto al normale che ci aiuti in questo compito. Non tutti infatti sono capaci di leggere il codice html di una pagina web e immaginare immediatamente la struttura.
Uno strumento utilissimo, per chi usa Firefox, è Firebug, installabile anche da questo link. Una volta installato l'addon in Firefox vedremo comparire in basso a destra, nella barra di stato, un pulsante a forma di... scarafaggio.
Se non vedete la barra di stato andate nel menù Visualizza e selezionate la voce "Barra di stato".

Una volta scaricato il file compresso contenente il template decomprimiamolo in una cartella e apriamo con il browser il file index.html. Nella cartella vedremo un file html, un foglio di stile e una cartella contenente delle immagini.

Firebug in azione

Visualizzata la pagina del css template premiamo il pulsate che attiva firebug (sulla barra di stato del browser) e verrà aperta la finestra di ispezione del codice.
Questa finestra è divisa in due parti: quella di sinistra che riporta il codice html della pagina e quella di destra che visualizza le classi del foglio di stile per ogni tag html che evidenziamo cliccandoci sopra con il puntatore del mouse.

Come vedete i tag html annidati sono segnati con una quadratino che contiene il simbolo +. Questo vuol dire che all'interno ci sono altri tag html.
Passando il puntatore del mouse su ogni tag html ci verrà evidenziata nella finestra sovrastante la zona corrispondente nella pagina web.

Se desideriamo modificare ad esempio la larghezza di alcune porzioni del template clicchiamo con il puntatore del mouse sul tag che ci interessa. Sulla destra vedremo comparire la classe del foglio di stile che lo formatta.
Ad esempio se clicchiamo sul container div id="sidebar" vedremo visualizzata sulla destra la classe .sidebar (e anche il nome del file css che la contiene e la riga a cui si trova).
Possiamo modificare il valore della proprietà width, aumentandolo o diminuendolo, e vedere "al volo" la modifica del box container.
Una volta deciso il valore ottimale dobbiamo aprire il fogli di stile, portarci alla riga 249 e modificare manualmente il valore della proprietà. Non dimenticate di salvare il foglio di stile.
Facendo un refresh della pagina del template vedremo le modifiche applicate.

Potete modificare le classi del foglio di stile per ridimensionare le porzioni del template in questa fase, oppure farlo in un sencondo tempo quando il template sarà già trasformato per Joomla.

Di seguito riporto il codice html che utilizzeremo per la conversione tolti i contenuti non significativi:

<html>
<body>
<div id="wrapper">
 <div id="header">
 <div id="logo">

 </div>
 <div id="search">

 </div>
 </div>
 <!-- end #header -->
 <div id="menu">

 </div>
 <!-- end #menu -->
 <div id="page">
 <div id="page-bgtop">
 <div id="page-bgbtm">
 <div id="content">

 <div style="clear: both;">&nbsp;</div>
 </div>
 <!-- end #content -->
 <div id="sidebar">

 </div>
 <!-- end #sidebar -->
 <div style="clear: both;">&nbsp;</div>
 </div>
 </div>
 </div>
 <!-- end #page -->
</div>
<div id="footer">
 <p>Copyright (c) 2008 Sitename.com. All rights reserved. Design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
</div>
<!-- end #footer -->
</body>
</html>
</code>

Trasformazione in template per Joomla.

Nella cartella /templates del sito Joomla (meglio usare una installazione base) creiamo una struttura di cartelle adatta ad accogliere un template per Joomla e chiamiamo la cartella del template '''jtricolor'''. Posizioniamo il fogli di stile del css template nella cartella '''jtricolor/css''', rinominandolo in template.css, spostiamo il contenuto della cartella images del css template nella cartella '''jtricolor/images''' e il file index.php nella cartella jtricolor.

Se avete seguito la guida sui template per Joomla 1.5 saprete quali sono le modifiche da fare al codice html del free css template per adattarlo a Joomla.

Riepiloghiamo brevemente:

- all'interno dei container <div> destinati a contenere i moduli inseriamo l'istruzione

<jdoc:include type="modules" name="nome_posizione" style="stile_modulo" />

Le tipologie di tipi modulo sono descritte ampiamente nella guida alla realizzazione di template. La differenza tra uno stile ed un altro è solo nel codice html che verrà generato. Ciò avrà influsenza nella costruzione delle classi del foglio di stile relative alla formattazione dei moduli.
Al momento, non sapendo quali stili applicare possiamo tranquillamente indicare lo stile xhtml.

- all'interno del container ''div'' destinato ai contenuti inseriamo le istruzioni

<jdoc:include type="message" />

<jdoc:include type="component" />

La prima serve per visualizzare eventuali messaggi di sistema la seconda per visualizzare i contenuti o l'output di eventuali componenti installati.


Di seguito vi riporto il codice completo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="" lang="" >
<head>
 <jdoc:include type="head" />
 <link rel="stylesheet" href="/templates/jtricolor/css/template.css" type="text/css" />
</head>
<body>
<body>
<div id="wrapper">
 <div id="header">
 <div id="logo">
 <jdoc:include type="modules" name="logo" style="xhtml" />
 </div>
 <div id="search">
 <jdoc:include type="modules" name="search" style="xhtml" />
 </div>
 </div>
 <!-- end #header -->
 <div id="menu">
 <jdoc:include type="modules" name="topmenu" style="xhtml" />
 </div>
 <!-- end #menu -->
 <div id="page">
 <div id="page-bgtop">
 <div id="page-bgbtm">
 <div id="content">
 <jdoc:include type="message" />
 <jdoc:include type="component" />
 <div style="clear: both;">&nbsp;</div>
 </div>
 <!-- end #content -->
 <div id="sidebar">
 <jdoc:include type="modules" name="left" style="xhtml" />
 </div>
 <!-- end #sidebar -->
 <div style="clear: both;">&nbsp;</div>
 </div>
 </div>
 </div>
 <!-- end #page -->
</div>
<div id="footer">
 <jdoc:include type="modules" name="footer" style="xhtml" />
 
 <p>Copyright (c) 2008 Sitename.com. All rights reserved. Design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
</div>
<!-- end #footer -->
</body>
</html>

Come noterete, nei commenti ad inizio template, ho lasciato i riferimenti a chi ha creato il template. Mi sembra cosa dovuta e se volete potete aggiungere i vostri riferimenti.

Le posizioni per i moduli saranno le seguenti:

• logo         : per il posizionamento del logo (grafico o testuale)
• search     : per il posizionamento del modulo di ricerca
• topmenu     : per il posizionamento di un menù orizzontale
• left         : per il posizionamento di moduli pubblicati nella colonna sinistra (in genere i moduli per i menù)
• footer     : per il posizionamento di moduli pubblicati nel footer della pagina

La scelta dei nomi da assegnare alle posizioni modulo deve essere quanto più possibile fedele allo standard usato in tutti i template per Joomla. Se usiamo nomi di posizioni modulo diverse il nostro template questo risulterà vuoto in una installazione base di Joomla e chi lo userà sarà costretto a modificare la posizione di ogni modulo pubblicato assegnandogli le nostre classi personalizzate.

Il file templateDetails.xml

A questo punto creiamo il file templateDetails.xml per descrivere a Joomla la struttura del template:

<?xml version="1.0" encoding="iso-8859-1"?>
<!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>jtricolor</name>
 <creationDate>06/01/2010</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>Template Tricolor by http://www.freecsstemplates.org</description>
 <files>
 <filename>index.php</filename>
 <filename>templateDetails.xml</filename>
 <filename>index.html</filename>
 <filename>template_thumbnail.png</filename>
 <filename>images/index.html</filename>
 <filename>css/index.html</filename>
 <filename>css/template.css</filename>
 <filename>images/img01.gif</filename>
 <filename>images/img02.jpg</filename>
 <filename>images/img03.jpg</filename>
 <filename>images/spacer.gif</filename>
 </files>
 <positions>
 <position>logo</position>
 <position>search</position>
 <position>topmenu</position>
 <position>left</position>
 <position>footer</position>
 </positions>
</install>

Nella struttura xml noterete dei file (index.html, template_thumbnail.png) che non sono ancora presenti, rovvederemo ad inserirli quiando il template sarà completo e prima di creare il pacchetto di installazione. I file index.html sono dei file vuoti e devono essere presenti in ogni cartella per evitare che il contenuto di questa possa essere visibile tramite browser, il file template_thumbnail.png è una semplice immagine di anteprima del nostro template.

Fatto questo possiamo accedere al backend del sito e rendere attivo il nuovo template. Chiaramente non aspettiamoci che sia perfetto, non abbiamo ancora completato il lavoro sul foglio di stile definendo le classi di stile di Joomla.

Le classi di stile per Joomla

Questa è la parte del lavoro più onerosa, definire le classi di stile per ogni elemento del template. Quì dovremo usare massicciamente Firebug perchè non è facile individuare quali sono le classi di stile che ci interessano se non analizzando il codice html prodotto da Joomla.

A questo punto vi consiglio anche di installare il tool free '''TopStyle Lite''' che vi agevolerà nella definizione delle classi di stile visto che permette di avere un riepilogo di tutte le proprietà applicabili ad ogni classe senza doverle ricordarle a memoria.
Potete anche usare un semplice editor di testo come Notepad ++ o il più complesso PSPad, ma se non avete pratica con i fogli di stile troverete sicuramente più utile TopStyle Lite.

Del foglio di stile originale conserveremo solo le classi, gli ID e gli elementi che definiscono i container principali, ovvero:

• #wrapper
• #header
• #logo
• #page, #page-bgtop, #page-bgbtm
• #content
• #sidebar
• h1, h2, h3, p, ul, ol, a, a:hover

Tutte le altre le possiamo commentare e le utilizzeremo come riferimento per creare le nuove classi per Joomla. In un foglio di stile un commento inizia con i caratteri /* e finisce con i caratteri */.

Classi di stile per i moduli.

La creazione delle classi di stile per formattare i moduli è dipendente da quale modulo si deve formattare.
I moduli creati con '''mod_mainmenu''' (ovvero tutti i menù di Joomla) hanno la possibilità, nei parametri, di specificare lo ''Stile menu'', ovvero il tipo di codice html che verrà generato al momento di visualizzare la pagina. Inoltre alla generazione del codice html contribuisce ciò che è stato specificato nel file index.php del template nell’istruzione jdoc:include.

<jdoc:include type="modules" name="left" style="xhtml" />

Abbiamo 5 scelte per il parametro ''style'':

• table:  il default se nulla è specificato. Racchiude tutto in una tabella che fa da wrapper ai moduli (non chiedetemi perchè usare tabella di default, lo so che fa schifo...).
• horiz: ancora una tabella, e mostra i moduli in modo orizzontale.
• xhtml: un singolo div fa da wrapper ai moduli.
• rounded: significa che 4 div fanno da wrapper ai moduli, così uno potrebbe usarli per fare i rounded corners (non mi piace, tutti sti div nel codice!! jquery per i rounded corner suona meglio, oppure altre soluzioni con meno div).
• raw: nessun wrap, solo output dei moduli.

Prendiamo in esame il caso in cui si sia definito nel file index.php uno stile xhtml per tutti i moduli.
Gli stili da scegliere nelle proprietà del modulo mod_mainmenu sono 4 e ad ognuno di essi corrisponde una struttura html ben precisa:

• lista
• legacy verticale
• legacy orizzontale
• legacy - lista flat

Usando Firebug per analizzare il codice vediamo le differenze:

Lista



Legacy verticale



Legacy orizzontale



Legacy - Lista flat



Come vedete ad ogni stile di menu corrisponde una diversa struttura di tag html. Si tratta di scegliere quella più appropriata per il nostro template. Dalla nostra scelta dipenderà non solo la modalità con cui verranno scritte la classi di formattazione nel fogli di stile ma anche la validità del nostro template secondo le regole del W3C.
Per questo motivo sconsiglio vivamente lo stile ''legacy verticale'' e ''legacy orizzontale'' dal momento che usano tabelle per disegnare i menu.

Nel caso in cui, nel codice ''jdoc:include'' dei moduli scegliamo di definire lo stile dei menù usanto rounded (invece di xhtml), come è nel template rhuk_milkyway, avremmo ottenuto questa struttura html:


In conclusione, la combinazione Stile menu nell’istruzione ''jdoc:include'' del template e Stile menu nelle proprietà del modulo influenzano fortemente la costruzione del foglio di stile.

Quale struttura scegliere allora?

La soluzione va cercata nella complessità con cui vogliamo disegnare graficamente il nostro menu. Nel caso della conversione di questo css template ho scelto appositamente un disegno molto semplice, quindi possiamo tranquillamente usare lo stile xhtml nell’istruzione ''jdoc:include'' sia lo stile modulo Lista nelle proprietà del modulo.
Nel caso in cui si volesse disegnare un modulo con dei bordi arrotondati sarà necessario fornirsi di quattro immagini grafiche e utilizzare lo style rounded che genera quattro container div ad ognuno di quali dovrà corrispondere una classe di stile per assegnargli il singolo elemento grafico.
Vi consiglio di analizzare con Firebug un modulo menù (ad esempio il menu principale) in una pagina generata con il template rhuk_milkyway.

La sidebar

Il codice html del modulo si presenta con un container ''div'' formattato con la classi di stile moduletable.
Nel caso del menu principale di Joomla (e dei menu in generale) viene usato il suffisso classe CSS _menu. Questo solo per differenziare la formattazione dei menu rispetto a quella degli altri moduli. Se non desideriamo questa differenziazione possiamo eliminare da ogni menu del nostro sito il suffisso _menu ovvero creare due classi distinte (moduletable e moduletable_menu) con la stessa formattazione.

All’interno del container ''div'' troviamo il titolo formattato con il tag ''h3'' e la lista delle voci di menù create usando un tag ''ul'' di classe menu e una serie di tag ''li''. La voce di menu attiva è formattata con la classe di stile ''active'' e la voce di menu corrente è formattata con id ''current''.
All’interno di ogni elemento ''li'' della lista troviamo il tag ''a'' che crea il link della voce di menu mentre il testo della voce di menu è contenuto in un container ''span''.

Cominciamo a formattare i tag partendo dal più esterno al più interno; le classi di stile saranno:

div.modultable_menu { }          /*  formatta il box del modulo menu */
div.modultable_menu  h3 { }    /*    formatta il titolo del menu */
ul.menu { }                     /*   formatta il contenitore della lista di covi menu */
ul.menu li { }                  /*  formatta la singola voce di menu */
ul.menu li a { }               /* formatta il link di una voce di menu */
ul.menu li a:hover { }         /*   formatta il link di una voce di menu quando il puntatore del mouse vi passa sopra */
ul.menu li a:visited { }      /*  formatta il link di una voce di menu quando la voce è stata visitata*/
ul.menu li a span              /*  formatta il testo nel link */
ul.menu li.active a { }       /*     formatta il link della voce di menu attiva */
ul.menu li.active a span     /*   formatta il testo del link nella voce di menu attiva */
ul.menu li li {}               /* formatta una voce di sub menu di primo livello */
ul.menu li li li {}            /*    formatta una voce di sub menu di secondo livello */

Classi di stile per la sidebar.

Defininiamo le classi per i moduli per la sidebar di sinistra

Per la definizione dei moduli pubblicati nella colonna sinistra del template prederemo come riferimento gli ID #sidebar dal css originale ottendendo le seguenti classi di Joomla:

div.moduletable_menu h3 { 
 height: 42px;
 padding: 8px 0 0 20px;
 background: url(../images/img02.jpg) repeat-x left top;
 letter-spacing: -.5px;
 color: #FFFFFF;
}
div.moduletable_menu {
 float: left;
 width: 240px;
 padding: 0;
 color: #787878;
}

ul.menu {
 margin: 0;
 padding: 0;
 list-style: none;
}


.menu li {
 line-height: 35px;
 border-bottom: 1px dashed #C5DB76;
 padding-left: 10px;
}

Il Top Menu

Con firebug analizziamo il codice del menu che si trova nella posizione modulo topmenu.

Il codice html del modulo si presenta con un container ''div'' formattato con la classi di stile ''menu''. All'interno un altro container ''div'' formattato con la classe ''moduletable'' che contiene una struttura di tag ''ul'' e ''li'' che definisce la lista delle voci di menu. All'interno di ogni tag ''li'' troviamo il tag ''a'' che definisce il link corrispondente alla voce di menu.
Anche in questo caso vediamo che nel modulo ''mod_mainmenu'' che genera il Top menu viene usato il suffisso classe CSS -nav.

Cominciamo a formattare i tag partendo dal più esterno al più interno; le classi di stile saranno:

#menu { }
.moduletable { }
ul.menu-nav { }
ul.menu-nav li { }
ul.menu-nav li a { }
ul.menu-nav li a:hover { }
</code>

Per definire l'aspetto del menù orizzontale prenderemo come riferimento gli ID menu del template originale
<code css>
#menu {
 width: 960px;
 height: 50px;
 margin: 0 auto;
 padding: 0;
 background: url(images/img03.jpg) repeat-x left top;
}

#menu ul {
 margin: 0;
 padding: 0px 0px 0px 25px;
 list-style: none;
 line-height: normal;
}

#menu li {
 float: left;
 height: 50px;
}

#menu a {
 display: block;
 margin-right: 3px;
 padding: 10px 30px 7px 30px;
 text-decoration: none;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
 font-weight: bold;
 color: #FFFFFF;
 border: none;
}

#menu a:hover {
 text-decoration: underline;
}

#menu {
 width: 960px;
 height: 50px;
 margin: 0 auto;
 padding: 0;
 background: url(../images/img03.jpg) repeat-x left top;
}

ul.menu-nav {
 list-style-type:none; 
 display:block; 
 /* width:420px;  */
 margin: auto; 
 /* padding-left:80px; */
 background:none;
}
ul.menu-nav li {
 float: left;
 height: 50px;
}

ul.menu-nav li a {
 display: block;
 margin-right: 3px;
 padding: 10px 30px 7px 30px;
 text-decoration: none;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
 font-weight: bold;
 color: #FFFFFF;
 border: none;
}

ul.menu-nav li a:hover {
 text-decoration: underline;
}

Classi di stili per i contenuti

Nell'area dei contenuti vengono visualizzati gli articoli che abbiamo scritto o l'output di un componente. Il layout degli articoli è, nell'installazione base di Joomla, un blog di contenuti. Quindi è presente un articolo su una colonna ed n articoli su due colonne, e per tutti viene visualizzata solo l'anteprima. Ispezioniamo gli elementi che compongono i contenuti usando Firebug e prendiamo nota delle classi di stile che dovremo scrivere.



Le classi che ci interessano sono dunque:

.componentheading{}                TITOLO DEI COMPONENTI
.contentpaneopen { }             FORMATTA IL CONTENITORE DEGLI ARTICOLI
table.contentpaneopen { }         FORMATTA LA TABELLA CHE CONTIENE L'ARTICOLO'
table.contentpaneopen td { }     FORMATTA LA CELLA DI INTESTAZIONE DELL'ARTICOLO
.contentheading{}                TITOLO DEI CONTENUTI


.contentpagetitle { }             FORMATTA IL TITOLO DEGLI ARTICOLI
a.contentpagetitle:link { }     TITOLO DEGLI ARTICOLI SE IMPOSTATI COME LINK 
a.contentpagetitle:hover { }     COME SOPRA MA MOUSE HOVER
a.contentpagetitle:visited { }     COME SOPRA MA VISITATI

.buttonheading a:link { }         STILE RELATIVO AI BOTTONI
.buttonheading a:visited { }     STILE RELATIVO AI BOTTONI VISITATI
.buttonheading a:hover { }         STILE RELATIVO AI BOTTONI CON RIFERIMENTO AL MOUSE HOVER

.createdate { }     STILE PER DATA DI CREAZIONE,AUTORE
.modifydate { }     STILE PER LA VOCE "ULTIMO AGGIORNAMENTO" ALLA FINE DEGLI ARTICOLI
.small { }             STILE PER IL TESTO "SCRITTO DA"

STILE PER IL LINK "LEGGI TUTTO"
a.readon:link { } 
a.readon:hover { }
a.readon:visited { }

span.article_separator{}    separatore articoli

img{}    definisce le caratteristiche delle immagini

.componentheading{
 font-size: 1.5em;
 font-weight: bold;
 padding-bottom: 10px;
}
.contentheading{
 font-size: 1.4em;
 font-weight: bold;
 padding-bottom: 10px;
}
.createdate { font-size:10px; padding-bottom:5px; }     
.modifydate { font-size:10px; font-style: italic; padding-bottom:10px; }     
.small {font-size:10px; }             
 
img {
 border: none;
}

span.article_separator{
}

.readon{
 padding-left: 10px;
 background-color: #97B400;
}
a.readon:link { } 
a.readon:hover { color:red }
a.readon:visited { }

Classi di stili per il footer

Così come abbiamo fatto fino ad ora usiamo Firebug per analizzare le classi di stile che dobbiamo modificare per formattare il footer del template.



Il footer è formattato dalla classe id ''footer'' già presente nel foglio di stile perchè ereditata dal css template originale.

#footer {
 width: 960px;
 background: #474036;
 height: 50px;
 margin: 0 auto;
 padding: 0px 0 15px 0;
 font-family: Arial, Helvetica, sans-serif;
}

#footer p {
 margin: 0;
 padding-top: 20px;
 line-height: normal;
 font-size: 9px;
 text-transform: uppercase;
 text-align: center;
 color: #E1F5A6;
}

#footer a {
 color: #FFFFFF;
}

#footer {
 width: 960px;
 background: #474036;
 height: 50px;
 margin: 0 auto;
 padding: 0px 0 15px 0;
 font-family: Arial, Helvetica, sans-serif;
}

#footer div{
 margin: 0;
 padding-top: 8px;
 line-height: normal;
 font-size: 9px;
 text-transform: uppercase;
 text-align: center;
 color: #E1F5A6;
}

div#footer a {
 color: #FFFFFF;
}

Il logo

Manca a questo punto il logo. Nel template originale era un testo ma nel nostro template per Joomla abbiamo creato una posizione modulo.
Nel foglio di stile sono già presenti le classi di stile per formattare il container ''div'' logo, vanno solo adattate.

Dal Backend di Joomla creiamo un nuovo modulo html personalizzato e chiamiamolo logo. Pubblichiamolo nella posizione modulo logo, nascondiamo il titolo del modulo e scriviamo nell'editor il seguente codice html:

<h1>Tricolor Joomla template</h1>

<h1><a href="http://localhost/testtemplate/index.php">Tricolor Joomla template</a></h1>

Nel caso in cui volessimo inserire un'immagine come logo potremmo sempre utilizzare il modulo html personalizzato che abbiamo creato, inserendo nell'editor di testo un'immagine delle dimensioni opportune.

Il template è completato

In realtà mancherebbero ancora alcuni elementi di Joomla (form, tabelle di categoria, il modulo search, ecc) ma credo che, se avete seguito la guida con attenzione e compreso il metodo non dovreste trovare difficoltà nel proseguire da soli.

Conclusioni

La procedura non è sicuramente semplice e necessita di parecchia pratica prima di superare tutte le difficoltà che si possono incontrare. Più complesso è il css template che scegliamo più difficile diventerà la conversione.

Se volessimo riassumere il processo potremmo descriverlo in 7 passaggi:

1. scegliere il template
2. analizzare la struttura per trovare le posizioni per i moduli e i contenuti
3. ripulire il codice html del css template dai contenuti superflui lasciando lo scheletro del codice html
4. nel foglio di stile commentare tutte le classi di stile non necessarie lasciando solo quelle che servono per il codice html che abbiamo ritenuto utile
5. modificare il codice html del css template aggiungendo le istruzioni <jdoc:include> per moduli e contenuti definendo così le posizioni modulo (a questo punto lavoriamo non più su un file html ma su un file con estensione .php all'interno di una struttura di cartelle organizzata per un template di Joomla)
6. modificare il fogli di stile aggiungendo le classi di stile per la formattazione degli elementi di una pagina di un sito Joomla
7. completare il file templateDetails.xml con eventuali file che abbiamo aggiunto durante la lavorazione del template.

10. Consigli per la lettura

• Guida all'XHTML
  Guida ai CSS
  Guida alla realizzazione di template
  Foglio di Stile base per i template di Joomla 1.5
  Gli stile di Joomla in azione