Joomlashow arrow Guide arrow Guida alla creazione di un template per Joomla 1.5

Guida alla creazione di un template per Joomla 1.5

20-06-2009 14:50

scritto da Paolo Mariani

tutorial_template joomla
Questa guida è abbastanza semplice e copre gli argomenti di base per la creazione di un template per Joomla tralasciando altri argomenti più avanzati.
Al fine di trattare gli argomenti che non sono stati trattati qui è stata scritta un'altra guida:
La Guida Definitiva per Creare un Template Joomla

In questo articolo spiegheremo come creare un semplice template per Joomla 1.5.

Una volta letto l'articolo, al fine di approfondire le vostre conoscenze ed imparare nuove tecniche nella realizzazione di template per Joomla vi consiglio di leggere alcune recensioni e scaricare alcuni template joomla gratuiti ed osservarne il codice.

Questo articolo è è una traduzione dell'articolo Create a simple Joomla 1.5 template pubblicato su Siteground.com.

L'articolo è stato tradotto da Paolo Mariani

Per prima cosa dovete aprire la directory "templates" e creare una sottocartella chiamata "tutorial_template". Essa è importante perché conterrà tutti i file del vostro template.

Nella vostra nuova directory create un primo file index.php ed un secondo chiamato templateDetails.xml. Quindi create una cartella css ed un nuovo dal nome template.css. Per creare questi file è sufficiente usare il Blocco Note e salvare i file nel computer. In seguito li potrete caricare via FTP o dal File Manager del pannello di controllo.

Quelli indicati di seguito sono i file necessari per il funizonamento di ogni template Joomla.

  • index.php - Questo file specifica la posizione disponibile del modulo e il percorso del file Stylesheet (foglio di stile). Questa è la "sezione" principale del vostro;
  • templateDetails.xml - File di sistema che fornisce informazioni sul vostro template all'applicazione Joomla;
  • css/template.css - Il file con il foglio di stile (anche conosciuto come CSS) del vostro template. Esso definisce l'aspetto del sito;

Una volta fatto questo, modificate il template di default del vostro sito attivando quello appena creato. Per maggiori informazioni su tale operazione si rimanda alla sezione su come cambiare il template di default in Joomla 1.5.

Ecco il contenuto di ogni file:

Il file index.php deve inziare come 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="<?php echo $this->language; ?>" lang="<?php  echo $this->language; ?>" >
    <head>
        <jdoc:include type="head" />
    </head>

Le righe precedenti indicano l'inizio dell'output XHTML del vostro sito.

La riga <jdoc:include type="head" />

inserisce il contenuto dell'header Joomla nella vostra pagina (titolo della pagina, meta descrizione, keyword, etc.) che avete aggiunto nella backend di Joomla.

Ora dobbiamo aggiungere il "corpo" del sito:

 
    <body>
        
        <jdoc:include type="component" />
        
    </body>
</html>
 

L'istruzione <jdoc:include type="component" /> mostra il contenuto principale di ogni pagina.

Controlliamo il nostro template. Salvate il file index.php ed accedete alla parte amministrativa dell'applicazione Joomla. Attivate il nuovo "tutorial_template" rendendolo il template di default del sito. Per maggiori informazioni su tale operazione vi rimando ad un articolo che spiega come cambiare il template di default in Joomla 1.5 .

La pagina apparirà come segue, secondo il contenuto che avete inserito:

Joomla! Community Portal ...

Questa pagina contiene solo i vostri articoli, senza visualizzazione di stili o moduli. Allora, aggiungiamo qualche posizione per i moduli. Modificate il file index.php e le righe tra <body> e </body> come segue:

 
<div id="container">
 
    <div id="header">
        <jdoc:include type="modules" name="top" />
    </div>
 
    <div id="sidebar_left" class="float">
        <jdoc:include type="modules" name="left"/>
    </div>
 
    <div id="content" class="float">
        <jdoc:include type="component" />
    </div>
 
    <div id="sidebar_right"class="float">
        <jdoc:include type="modules" name="right"/>
    </div>
 
    <div id="footer" class="clear">
        <jdoc:include type="modules" name="footer" />
    </div>
    
</div>
 

La riga <jdoc:include type="modules" name="left" /> dice a Joomla dove inserire i moduli pubblicati in posizione "left". Abbiamo appena aggiunto le posizioni top, left, right e footer nel nostro template.

Notare che abbiamo racchiuso queste posizioni in tag <div> ed abbiamo aggiunto informazioni sulle loro classi e ID. Inoltre abbiamo racchiuso il tutto in un altro div con ID "container" che ci permetterà di impostare le dimensioni di base della nostra pagina. Le classi dei div verranno definite nel file template.css che creeremo fra poco.

A questo punto, il nostro template dovrebbe apparire come 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="<?php echo $this->language; ?>" lang="<?php
echo $this->language; ?>" >
    <head>
        <jdoc:include type="head" />
    </head>
    <body>
 
        <div id="container">
 
            <div id="header">
                <jdoc:include type="modules" name="top" />
            </div>
 
             <div id="sidebar_left" class="float">
                <jdoc:include type="modules" name="left" />
            </div>
 
             <div id="content" class="float">
                <jdoc:include type="component" />
            </div>
 
            <div id="sidebar_right"class="float">
                <jdoc:include type="modules" name="right" />
            </div>
 
            <div id="footer" class="clear">
            <jdoc:include type="modules" name="footer" />
            </div>
 
        </div>
 
    </body>
</html>

Ora dobbiamo modificare il file templateDetails.xml copiando le seguenti righe:

 
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://dev.joomla.org/xml/1.5/template-install.dtd">
 
<install version="1.5" type="template">
 
    <name>tutorial_template</name>
    <creationDate>02/2008</creationDate>
    <author>SiteGround</author>
    <authorEmail>templates@siteground.com</authorEmail>
    <authorUrl>http://www.siteurl.com</authorUrl>
    <copyright>SiteGround</copyright>
    <license>SG TOS</license>
    <version>1.0.0</version>
    <description>Basic Joomla Template</description>
 
    <files>
        <filename>index.php</filename>
        <filename>templateDetails.xml</filename>
        <filename>css/template.css</filename>
    </files>
 
    <positions>
        <position>left</position>
        <position>right</position>
        <position>top</position>
        <position>footer</position>
    </positions>
 
</install>
 

Guardiamo nel dettaglio il codice del file templateDetails.xml:

<install version="1.5" type="template"> - Questa riga indica la versione di Joomla a cui il template è destinato. Essa permette all'installatore di usare correttamente il vostro template se deciderete di creare un archivio di template.

<name>tutorial_template</name> - Questa riga indica il nome del vostro template. In questo esempio abbiamo usato "tutorial_template";

<creationDate>02/2008</creationDate> - Questa riga indica la data di creazione di template;

<author>SiteGround</author> - Questa riga indica l'autore del template;

<authorEmail>user@yourdomain.com</authorEmail> - Questa riga contiene il vostro indirizzo e-mail;

<authorUrl>http://www.siteground.com</authorUrl> Questa riga indica ilsito del creatore del template;

<copyright>SiteGround</copyright> - Questa riga indica contiene le informazioni di copyright del template;

<license>SG TOS</license> - Questa riga indica il tipo di licenza con cui il vostro template è pubblicato;

<version>1.0.0</version> - Questa riga indica la versione del vostro template;

<description>Basic Joomla Template</description> In questa riga potete aggiungere informazioni sul vostro template;

 
  <files>
        <filename>index.php</filename>
        <filename>templateDetails.xml</filename>
        <filename>css/template.css</filename>
  </files>

Le righe precedenti indicano tutti i file utilizzati dal vostro template.

 
    <positions>
        <position>left</position>
        <position>right</position>
        <position>top</position>
        <position>footer</position>
    </positions>

Le righe precedenti definiscono le posizioni che avete attivato nel vostro template.

Il passaggio successivo consiste nell'aggiungere un po' di stile al template. Aprire il file index.php e aggiungere la seguente riga prima del tag </head>:

 
  <link rel="stylesheet" href="<?php echo $this->baseurl  ?>/templates/tutorial_template/css/template.css" type="text/css" />

Questa riga indica al vostro sito la posizione da cui caricare il file con il foglio di stile (CSS).

Modificate il file css/template.css aggiungendo le seguenti righe:

 
    * {
        padding: 0;
        margin: 0;
    }
 
    img {
        border: 0;
    }
 
    body {
      font-family: Arial, Helvetica, sans-serif;
      line-height: 1.3em;
      margin: 0;
      padding: 0;
      font-size: 13px;
      color: #0F0F0F;
    }
 
    a:link, a:visited {
      text-decoration: underline;
      font-weight: normal;
      color: #000;
      outline: none;
      text-align: left;
    }
 
    .float {
      float: left;
    }
 
    .clear {
      clear: both;
    }
 
    .overall {
      background-color: #fff;
    }
 
    div.center {
      text-align: center;
      margin: 0px auto 0 auto;
      padding: 0;
      width: 950px;
      background: #FFFFFF;
    }
 
    #container {
      width: 960px;
      margin: auto;
      background-color: #f4f9fc;
      border: 1px solid #e2e2e2;
      text-align: left;
    }
 
    #header {
      text-align: center;
      background-color: #f4f9fc;
      height: 80px;
    }
 
    #content {
      width: 598px;
      text-align: left;
      background-color: #f4f9fc;
      padding: 5px;
    }
 
    #sidebar_left {
      text-align: center;
      background-color: #f4f9fc;
      width: 165px;
      border-right: 1px solid #e2e2e2;
      border-bottom: 1px solid #e2e2e2;
      padding: 5px;
    }
 
    #sidebar_right {
      background-color: #f4f9fc;
      text-align: center;
      width: 165px;
      border-left: 1px solid #e2e2e2;
      border-bottom: 1px solid #e2e2e2;
      padding: 5px;
    }
 
    #footer {
      background-color: #f4f9fc;
      text-align: center;
      border-top: 1px solid #e2e2e2;
      border-botom: 1px solid #e2e2e2;
      padding: 5px;
    }

Queste righe aggiungono some clean basic design alle diverse parti del vostro sito. Dovrete acquisire qualche elementare nozione di lavoro con I CSS per apportare le modifiche nell'aspetto del vostro sito Joomla.

A questo punto il vostro template è complete ed il vostro sito apparirà come indicato nella figura sottostante :

Anteprima template joomla stadio 2

Da questo momento l'unico limite al design del vostro sito è la vostra immaginazione. Potete aggiungere posizioni di moduli, giocare con il file css, modificare le immagini di sfondo e cosi via…
La struttura di un template Joomla vi permette di creare con la massima libertà il sito che avete sempre desiderato.
Buon lavoro!

AstridServizi ItaliaPaolo Mariani, traduttore e imprenditore, titolare di AstridServizi Italia, Monza e socio di Europrogettare, ha collaborato con importanti aziende, case editrici ed enti fieristici in qualità di traduttore, revisore e redattore, copywriter di testi e pagine pubblicitarie. Fin da giovane è appassionato di informatica, in passato si è accostato al PHP e gestisce il sito amatoriale www.tuttomonza.com, recentemente si sta dedicando al CMS Joomla con cui ha creato il sito www.europrogettare.eu.

Commenti utenti  

Visualizza 30 di 30 commenti

Grazie dell'articolo

è estremamente utile per quel che sto facendo. ti ho anche citato sul mio blog, ciao!

Scritto da: salvatore (Guest) 05-07-2009 12:13

Bravi

La miglior guida che ho trovato sulla creazione/modifica di un template di joomla

Scritto da: Massimo001 (Guest) 25-10-2009 14:22

..e le altre pagine?

Bene fin qui, ma dopo aver creato la home page, le altre pagine come si creano? :-O

Scritto da: Francesco (Guest) 31-10-2009 18:33

RE: ..e le altre pagine?

per creare le altre pagine devi utilizzare "Gestione Articoli", creare la struttura del sito utilizzando sezioni, categorie, articoli statici (uncategorized) e linkando questi nel menu.

Scritto da: nemesis (Membro) 07-11-2009 19:13

e i menu?

come vengono gestiti i menu?? non capisco come associare un menu ad un certo div. 
grazie

Scritto da: Andrea (Guest) 09-11-2009 09:45

RE: e i menu?

Con le posizioni. Pubblica il menu nella posizione che viene richiamata nel template nel punto in cui vuoi. 
 
se ad esempio nel div che ha id uguale a "header" c'è l'istruzione che richiama la posizione top, dovrai pubblicare tutti i moduli che vuoi far apparire nel div header con posizione top.

Scritto da: nemesis (Membro) 09-11-2009 12:12

non trovo il "tutorial_template"

Ciao a tutti,ho cretao la cartella "tutorial_template",ho creato i file: 
1-index.php 
2-templateDetails.xml 
poi ho all'internop della cartella "tutorial_template" ho creato un altra cartella "css" e all'interno di questa ho creato il file: 
3-template.css 
 
ora io su joomla vado su ESTENSIONI>GESTIONE TEMPLATE ma nell'elenco non mi compare quello appena creato... 
 
MI SAPETE DIRE DOV'E' IL PROBLEMA!?... 
grazie

Scritto da: Patrick (Guest) 17-12-2009 13:56

inserimento immagine head

di nuovo salve a tutti!per il primo problema ho risolto,ora vorrei ricreare su jommla il mio sito creato prima con Photoshop e poi passato su Dreamweaver...cioè vorrei ottenere lo stesso risultato visivo che ho aprendo l'index con Dreamweaver. 
mi spiego meglio... 
ora nella mia pagina joomla ho solo la scitta home...io devo inserire un'immagine head sotto di essa ci sono 3 rollover e fine....poi le atre pagine vedremo...ora vorrei riuscire a caricare intanto questo.

Scritto da: patrick (Guest) 17-12-2009 15:28

RE: inserimento immagine head

Ciao Patrick, 
normalmente non puoi riuscire a visualizzare un template joomla in dreamweaver, però ci sono delle estensioni che ti permettono di farlo, non so come però perchè io non uso editor visuali come dreamweaver. 
Cerca su Google "joomla extension dreamweaver". 
Per il resto, se hai domande più specifiche e complesse vieni a trovarci sul forum alla sezione template ed apri una nuova discussione.

Scritto da: nemesis (Membro) 20-12-2009 13:42

problema visualizzazione

Ho lo stesso problema che aveva patrick (il primo) come l'ha risolto?

Scritto da: stefano (Guest) 24-12-2009 17:34

RE: problema visualizzazione

Di solito basta modificare il file templateDetails.xml in modo appropiato e Joomla leggerà il nuovo template automaticamente.

Scritto da: nemesis (Membro) 27-12-2009 13:12

RISOLUZIONE PROBLEMA VISUALIZZAZIONE

... tutto ben spiegato... unico accorgimento è quello di fare la modifica al file templateDetails.xml immediatamente dopo averlo creato.... altrimenti è ovvio che dalla gestione template di joomla non verrà visualizzato nulla!!!!!!!!!!!!!!!!!!

Scritto da: raffaele (Guest) 28-12-2009 19:32

templateDetails.xml

E' ovvio ed implicito che nel momento in cui copiamo la cartella di un template per crearne uno nuovo dovremo modificare il file templateDetails.xml immettendo i dati del nuovo template per fare in modo che Joomla lo riconosca effettivamente. 
I file xml sono molto importanti per il funzionamento interno di Joomla, tenetelo bene a mente.

Scritto da: nemesis (Membro) 29-12-2009 09:40

eccellente

salve a tutti sono una malata di css ma joomla rappresentava un botto per me :D ho letto tutorial lo eseguito  
poi ho lavorato sul css ,utilissimo questo tutorial e poi spiegato molto bene grazieeeeeeeeeeeeeeeee 
 
e da due giorni che ho messo mano su joomla non sapevo che fosse , l unico problema che riscontro non so aggiungere la pagina virtue nel home ho scaricato tuttosu joomla ma non so come si fa ,comq grazie per questo tutorial  
valutazione personale = ottimo

Scritto da: clara (Guest) 01-02-2010 08:21

RE: eccellente

Grazie per la tua valutazione Clara, se hai altre domande inerenti ad altri argomenti vieni a trovarci sul forum tecnico e apri una discussione lì.

Scritto da: nemesis (Membro) 01-02-2010 10:03

aiuto!!!

salve, 
ho bisogno di aiuto, un'anima pia mi aiuterebbe ad iniziare la pubblicazione del mio sito? ho fatto (o meglio lo hanno fatto per me) l'installazione di joomla, ma non riesco a fare la pubblicazione della prima pagina, mi dite per fare quali sono i passaggi da fare per pubblicare almeno una pagina di prova? 
grazie mille 
peppe

Scritto da: peppe (Guest) 07-02-2010 11:49

RE: aiuto

Per questioni tecniche non inerenti a questo articolo aprire un post sul FORUM, qui non c'è abbastanza spazio. 
Grazie.

Scritto da: nemesis (Membro) 10-02-2010 10:02

Posizioni moduli

Non capisco una cosa: 
Come fa la colonna right a posizionarsi a destra, content posizionarsi al centro e left a sinistra?  
quale criterio segue? non vedo differenze nel codice se non l'ordine in cui sono scritte. 
e se io dovessi posizionare 2 colonne sulla destra (o sinistra) e content dall'altra parte?

Scritto da: matteo (Guest) 12-02-2010 14:18

RE: Posizioni moduli

Utilizzando la proprietà float del css.

Scritto da: nemesis (Membro) 12-02-2010 17:36

bravissimi

ottima guida, siete stati capaci di rendere molto semplice una cosa che il piu' delle volte non si riesce nemmeno ad incominciare. grazie tanto.

Scritto da: Indy (Membro) 19-02-2010 00:32

Grazie!

ottimo tutorial! mi è stato utilissimo. 
grazie!

Scritto da: 8bad (Guest) 28-02-2010 15:07

Guida alla creazione di un template per

molto interessante

Scritto da: mk (Guest) 01-03-2010 20:29

sufficiente

Per essere gratuita la guida è sufficiente ma sicuramente non esaustiva. Quello che c'è lo si legge, quello che manca è una descrizione dei parametri, una descrizione degli stili nativi di Joomla (horz, table ecc...) e soprattutto (che è quello che io stavo cercando) una descrizione del codice condizionale che a volte precede l'inserimento di un blocco. Per esempio: 
countModules('left')) : ?> 
 
 
cosa c'è nell'istruzione if? A vederla sembrerebbe un'istruzione che ci dice se nel blocco left è presente qualche modulo o no, ma è solo una mia interpretazione. 
Comunque è una delle poche risorse in rete dove si parla di questo, quindi complimenti.

Scritto da: Giancarlo Deambrosi (Guest) 03-03-2010 12:22

problema con il modulo

Innanzitutto complimenti, questo tutorial ha reso la vita più semplice a mlti di noi, soprattutto per il fatto che in giro di template graficamente decenti non se ne vede l'ombra. Ho provato il tutorial e funziona correttamente. Ho notato però che vengono omessi i titoli dei moduli come ad esempio dei menu. C'è una soluzione per ripristinarli? 
 
grazie

Scritto da: bot (Guest) 28-04-2010 18:06

RE: problema con il modulo

Il problema è che questa guida è molto sintetica, sarebbe necessario scrivere una guida di approfondimento che spieghi tutti i dettagli e le funzionalità avanzate tralasciate qui, ma purtroppo richiede molto tempo che al momento non ho. Spero comunque di scrivere la nuova guida in questione entro qualche mese. 
 
Rispondendo alla tua domanda invece, ti basta aggiungere l'attributo style al tag di inclusione del modulo. 
 
Esempio: 
jdoc:include type="modules" name="left" style="xhtml" /

Scritto da: nemesis (Membro) 29-04-2010 19:59

Molto interessante

la guida è essenziale e copre gli aspetti principali per la creazione di un template joomla. 
Credo sia molto utile per chi si avvicina alla fase di creazione di template da zero, sicuramente soluzione che consente una maggior facilità di manutenzione/evoluzione di un sito web aziendale o informativo.

Scritto da: braincode (Guest) 16-07-2010 14:53

problemi con css titoli h1 h2 h3

salve! 
intanto complimenti per la breve guida. Sintetica ed efficace. 
Stavo anch'io lavorando al mio template personale ma ho incontrato una strana difficoltà. 
Inserendo nel file css i tag che riguardanp la pesonalizzazione dei titoli degli articoli es: h1,h2,h3{margin: 1em 0 0;color: #39B9E6} 
h1{margin: 0;font-size: 200%} 
h2{font-size: 160%} 
h3{font-size: 140%} 
 
mi accorgo che non ottengo nessuna variazione. Tutti titoli e sottotitoli rimangono invariati. come può essere possibile? dove sbaglio?  
Grazie e a presto.

Scritto da: adriano (Guest) 05-09-2010 22:16

RE: problemi con css titoli h1 h2 h3

Prova a mettere un !important

Scritto da: Federico Capoano (Guest) 12-10-2010 17:54

Nuova guida completa template joomla

Ho scritto un'altra guida per coprire gli argomenti tralasciati in questa. 
La Guida Definitiva per Creare un Template Joomla

Scritto da: Federico Capoano (Guest) 12-10-2010 17:55

Ottima guida

ben scritta e utilissima !

Scritto da: aleanz (Guest) 11-11-2010 13:00

Aggiungi il tuo commento

Solo gli utenti possono commentare un'articolo.
‹ Precedente   Successivo ›

Categorie

Ricerca

Web Design

siti web su misura, design unico

Login

Hai dimenticato la password?

Registrati