Creare un template Joomla

HTML  Template gratuiti

  

Creare un template Joomla – La Guida

Realizziamo un template Joomla da zero, adottando una grafica originale. Analizziamo tutti i file che compongono un tema Joomla e personalizziamoli

 

Introduzione

1. L’importanza dei template nei CMS

Cosa sono i template e l’importanza

Uno dei punti forza dei CMS sta nella possibilità di personalizzare la grafica del proprio sito: un amministratore può impaginare i propri contenuti come preferisce. La grafica deve essere indipendente dai contenuti: possiamo avere gli stessi contenuti ma uno stile del sito diverso, basta infatti cambiare il tema del sito.

Un template Joomla ha lo scopo di definire la grafica del sito, le impostazioni di stile del markup (per esempio le dimensioni e il font da usare nei titoli o nei paragrafi, le tabelle etc etc), ma anche il layout del sito con la suddivisione, per esempio, in due o in tre colonne, la posizione dei moduli, delle immagini e così via.

Per creare un template è necessario avere delle buone conoscenze almeno di:

  • HTML;

  • CSS;

  • PHP.

La struttura di un sito

Oltre al contenuto e alla presentazione, in un sito conta molto la struttura, che è inseparabile dal contenuto, ed è l’unico modo per consentirne la presentazione. Esistono diversi strutture (o layout) di template. Prima di tutto bisogna dire che possono essere create tramite il tag table dell’html oppure con il tag div. I template tableless (cioè quelli senza tabelle) sono quelli più frequenti e più adatti da utilizzare.
Questo si capisce dalla definizione del div: è un generic block-level element. Un elemento block-elevel sta a indicare un oggetto che può contenere al suo interno qualsiasi altro elemento html. Per default è senza margini, padding o bordo e qui sta il vantaggio rispetto alle tabelle.

I layout possono essere definiti per esempio in base alla disposizione verticale delle aree della pagina. Alcuni tipi sono:

Se invece guardiamo il loro comportamento rispetto alla finestra del browser abbiamo questi tipi di layout:

2. Aggiungere una nuova parte al template

Ovviamente la struttura può essere modificata dopo un po’ di tempo, per esempio un layout a due colonne potrà diventare a tre colonne. Supponiamo di avere questo codice HTML:

<body>schema
   <div class="principale">
      <div class="header"> zona dell'header </div>
      <div class="left"> colonna destra </div>
      <div class="maincontent"> spazio principale</div>
      <div class="footer"> zona del footer </div>
   </div>
</body>

 

 

Il codice sopra riportato può descrivere una struttura come quella in figura

 

 

 

 schemaPer esempio possiamo aggiungere un contenitore a destra che chiamiamo Right, come in figura

 

 

 

Per fare questo basta aggiungere il tag div con il nome del nuovo elemento dentro all’html, nella parte che vogliamo, per esempio come in questo:

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

 

Ovviamente dopo dovremo scrivere nel foglio di stile le proprietà che deve avere questa nuova colonna, per esempio:

.right {
   text-align: center;
   width: 20%;
   float:left;
}

Una volta scritto il codice dobbiamo controllare che il nuovo contenitore venga inserito bene nel resto della pagina oppure se è necessario modificare le proprietà degli altri contenitori, per esempio bisogna prestare particolare attenzione alle larghezze inserite perchè la loro somma (più quella di eventuali padding e margini) non deve superare la larghezza tipica di un browser: lo scorrimento della pagina per orizzontale è una cosa che molto spesso i visitatori odiano fare.

 

I file necessari per un template

schema

3 File indispensabili per costruire un template

Vediamo adesso come possiamo costruire il nostro template Joomla. Creiamo una cartella con il nome del nostro template. Supponiamo che si chiami “Template Esempio”. 

Dentro di essa salviamo questi file:

  • index.php;

  • templateDetails.xml;

  • template.css: questo è inserito dentro una cartella che dovremo creare e chiamare css;

  • template_thumbnail.png;

  • params.ini.

Sarà poi necessario metterci anche altri file, per esempio le immagini da inserire nella grafica. La cartella del template potrà poi contenere delle sottocartelle chiamate per esempio images (per le immagini) e html (per l’override, che vedremo qualche paragrafo più avanti).

 

 4 Il file index.php

 È il file più importante, indica la posizione dei vari moduli e la locazione del foglio di stile. Proprio per la sua importanza, è definito come lo scheletro del sito. Deve iniziare con questo codice:

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

 

Queste righe servono per impostare il linguaggio e per inserire nell’header le informazioni sul sito (come il titolo, la descrizione, i meta tag etc etc) che sono state inserite nel backend, più precisamente in Configurazione globale–>Sito–>Configurazione sito e Configurazione Metadata, come possiamo vedere dalla figura.

 

 

 

Poi dobbiamo inserire la parte di html riguardante il corpo del testo, come qui:

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

Questa riga di codice serve per inserire il contenuto principale nella pagina, per esempio gli articoli o una galleria di foto.

Il codice sopra descritto però non contiene tutte le posizioni per i diversi moduli, vediamo allora come fare. In generale basta inserire nel tag div che vogliamo la riga di codice per l’inserimento di tutti i moduli che vanno pubblicati nella stessa posizione, per esempio:schema

    <div id="header">
        <jdoc:include type="modules" name="top" />
    </div>

significa che in quel punto della pagina sono pubblicati tutti i moduli a cui è stata assegnata la posizione top nella gestione dei moduli. In tal caso potremo avere uno schema di questo genere

 

 

 

 

 

A questo punto il file index.php diventa così:

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

Osservazione: consiglio di inserire nel file index.php prima della riga

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

anche la riga di codice:

<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>

per la sicurezza del sito.

 

5 Il file templateDetails.xml

Questo file è altrettanto importante perché restituisce le informazioni sul template, sull’autore e sui file che servono a far funzionare il template, per esempio i file php e le immagini da inserire. Le prime righe del file sono le seguenti:

<?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">

In seguito è composto da voci diverse:

  • version: per indicare la versione di Joomla utilizzata;
  • name: nome del template che vogliamo creare;
  • creationDate: data di creazione del template;
  • author: il nostro nome, o più in generale il nome dell’autore;
  • authorEmail: eventuale indirizzo e-mail dell’autore del template;
  • authorUrl: eventuale indirizzo del sito web dell’autore del template;
  • copyright;
  • license: tipo di licenza per il template;
  • version: versione del template(per esempio 1.0.0);
  • description: una (breve) descrizione del template;
  • files: qui abbiamo l’elenco di tutti i file necessari per il template. Ogni voce dei file contiene il percorso completo a partire dalla directory del template. Quando si va ad installare il template il codice di installazione utilizza le informazioni qui presenti per la memorizzazione dei file durante la fase di installazione. Saranno compresi, ovviamente, index.php, templateDetails.xml e template.css;
  • positions: indica le posizioni definite nel template (se si guarda il codice del file index.php sono per esempio left, right, top e footer);

Alcuni di questi campi sono obbligatori (come quello con l’elenco dei file), altri possono essere lasciati vuoti. Un esempio completo di questo file è il seguente:

<?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>Template Esempio</name>
    <creationDate>08/2016</creationDate>
    <author>ugolcd</author>
    <authorEmail></authorEmail>
    <authorUrl>http://www.ugolcd.altervista.org</authorUrl>
    <copyright></copyright>
    <license>GNU/GPL</license>
    <version>1.0.0</version>
    <description>Esempio di template per Joomla</description>
    <files>
        <filename>index.php</filename>
        <filename>templateDetails.xml</filename>
        <filename>css/template.css</filename>
        <filename>css/ie7only.css</filename>
        <filename>css/ie8only.css</filename>
        <filename>images/header.png</filename>
        <filename>images/button.png</filename>
        <filename>images/menu.png</filename>
    </files>
    <positions>
        <position>left</position>
        <position>right</position>
        <position>top</position>
        <position>footer</position>
    </positions>
</install>

 

Anche se il tag del file xml si chiama position, esso indica l’elenco dei blocchi ma non la loro posizione. La posizione dei diversi contenitori è infatti definita nel file css. I blocchi di solito hanno dei nomi standard, che possono rappresentare una posizione (che, ripeto, è da definire nell’altro file) e possono essere:

  • banner;
  • left;
  • right;
  • top;
  • breadcrumb;
  • user1;
  • user2;
  • user3;
  • user4;
  • footer;
  • syndicate;

Nomi di questo genere aiutano nel creare e poi, successivamente, modificare il template e ad assegnare le posizioni ai moduli. Per esempio in left o in right possiamo metterci i menù, nel top il modulo per la ricerca e così via. Nulla ci vieta di inventarne degli altri nè il loro numero, anche se è consigliato usare poche posizioni per non complicare troppo il template e la sua interpretazione da parte dei browser.

Osservazione: a volte i template possono contenere i file di lingua, nel caso sia necessario abilitare la traduzione dei testi statici del modello. In tal caso dobbiamo inserire anche delle righe di codice come le seguenti:

<languages>
<language tag="en-GB">it-IT.tpl_SimpleTemplate.ini</language>
</languages>
<administration>
<languages folder="admin">
<language tag="en-GB">it-IT.tpl_SimpleTemplate.ini</language>
</languages>
</administration>

 

6 Il file template.css

 

Template.css è il foglio di stile vero e proprio. I fogli di stile, meglio conosciuti come CSS (acronimo di Cascading Style Sheets) sono una raccolta di regole (rules) che definiscono gli attributi di formattazione (colore, font, bordi etc etc) applicabili a un tag html.

È necessario personalizzare il proprio template con un po’ di stile e fantasia. Per farlo bisogna aggiungere questa riga di codice

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

nel file index.php, proprio prima della chiusura del tag head (</head>). È in questo file che potete sfruttare tutta la vostra fantasia. A titolo di esempio possiamo vedere questo foglio di stile:

 body {
      font-family: Arial, Helvetica, sans-serif;
      line-height: 1.3em;
      margin: 0;
      padding: 0;
      font-size: 13px;
      color: #0F0F0F;
    }
 
    a:link, a:visited, a:hover{
      text-decoration: none;
      font-weight: normal;
      color: #000;
      outline: none;
      text-align: left;
    }
    #container {
      width: 950px;
      margin: auto;
      background-color: #E8E8E8;
      border: 1px solid #e2e2e2;
      text-align: left;
    }

    #header {
      text-align: center;
      background-image:url(../images/header.png);
      height: 100px;
    }
 
    #content {
      width: 600px;
      text-align: left;
      background-color: #E8E8E8;
      padding: 5px;
    }

    #sidebar_left {
      text-align: center;
       background-image:url(../images/sfumatura_grigio_perla.png);
      width: 160px;
      border-right: 1px solid #e2e2e2;
      border-bottom: 1px solid #e2e2e2;
      padding: 5px;
    }
 
    #sidebar_right {
     background-image:url(../images/sfumatura_grigio_perla.jpg);
      text-align: center;
      width: 160px;
      border-left: 1px solid #e2e2e2;
      border-bottom: 1px solid #e2e2e2;
      padding: 5px;
    }

   #footer {
      background-image:url(../images/footer.png);
      /*background-color: #E8E8E8;
      text-align: center;
      border-top: 1px solid #e2e2e2;
      border-botom: 1px solid #e2e2e2;
      padding: 5px;
    }
    
        img {
        border: 0;
        float: left;
    }
    
    .clear {
      clear: both;
    }
 
    .overall {
      background-color: #fff;
    }
    
     .float {
      float: left;
    }
 
 
    div.center {
      text-align: center;
      margin: 0px auto 0 auto;
      padding: 0;
      width: 950px;
      background: #FFFFFF;
    }

In questo esempio non sono definiti molti stili, per esempio non è descritto come devono comparire i menù (cioè tutto quello che contiene i tag ul e ol), ma come base di partenza può essere buona.

Il file template_thumbnail.png

Questo file non è obbligatorio ma è utile perché mostra, in “Gestione Template” del pannello di amministrazione, un’anteprima del template, come possiamo vedere in figura.

Anteprima template

anteprima template

Ovviamente questa immagine di anteprima è da creare: per farlo basta caricare il template sul sito e salvare la vista tramite i programmi del proprio computer oppure con dei servizi presenti sul web. Infatti su Internet ci sono numerosi siti che creano un’immagine di anteprima di un sito fornendo una URL. Le dimensioni dovrebbero essere circa 225 pixel di larghezza per 150 pixel di altezza.

 

7 Parametri del template

 

Alcuni template possono avere dei parametri che vanno impostati, come per esempio i colori dello sfondo. Un altro esempio è dato dal template rhuk_milkyway (è uno dei temi già presenti nel pacchetto di Joomla) che consente, dal pannello di amministrazione (nella sezione Gestione Template), di cambiare i colori dei bordi, il colore dello sfondo e la larghezza della visualizzazione. La possibilità di avere dei template con dei parametri da impostare è nata, a partire da Joomla 1.5, dall’esigenza di creare template flessibili. Se vogliamo aggiungere dei nuovi parametri è necessario modificare il file templateDetails.xml, aggiungere una riga di codice al file params.ini che conterrà il valore corrente del parametro e del codice al file php del template per il recupero e la modifica del valore del parametro.

Supponiamo di voler modificare il colore dello sfondo del nostro template. In questo caso, bisogna aggiungere al file templateDetails.xml delle righe di codice come queste:

<params>
<param name="sfondo" type="list" default="blue" label="sfondo"
description="Variazione dei colori da usar nello sfondo">
 <option value="green">Verde</option>
 <option value="blue">Blu</option>
 <option value="red">Rosso</option>
 <option value="black">Nero</option>
</param>
</params>

In questo modo dal pannello di modifica del template nel back end del sito potremo impostare il valore del parametro che vogliamo, come possiamo vedere in figura

params.ini

params.ini

In Joomla sono supportati 20 tipi diversi di parametri. Qui sotto è presente un piccolo elenco di essi, in ordine alfabetico:

  • calendar: per fornire un link ad un pop-up di calendario;
  • category: per fornire un elenco a discesa delle categorie di una sezione;
  • editor: per fornire un elenco a discesa delle proprietà dell’editor WYSIWYG;
  • filelist: per fornire un elenco a discesa dei file di una directory specificata;
  • folderlist: per fornire un elenco a discesa delle cartelle di una directory specificata;
  • helpsites: per fornire un elenco a discesa di siti per l’aiuto per l’installazione di Joomla;
  • hidden: per fornire un campo nascosto per il salvataggio di un parametro il cui valore non può essere modificato direttamente da un amministratore, ma solo nel codice o nel file params.ini;
  • imagelist: per fornire un elenco a discesa dei file immagine in una directory specificata;
  • language: per fornire un elenco a discesa di tutte le lingue installate sia per il front-end e back-end del sito;
  • list: per fornire un elenco a discesa di voci personalizzate;
  • menu: per fornire un elenco a discesa di un menu;
  • menuitem: per fornire un elenco a discesa di voci di menu;
  • password: per fornire una casella di testo per una password;
  • radio: per fornire i pulsanti per la selezione di opzioni diverse;
  • section: per fornire un elenco a discesa delle sezioni;
  • SQL: per fornire un elenco a discesa di voci ottenuti eseguendo una query sul database utilizzato dal sito in Joomla;
  • text: per fornire una casella di testo per l’immissione di dati;
  • textare: per fornire un’area di testo per l’ingresso di testo;
  • timezones: per fornire un elenco a discesa del fuso orario;
  • usergroup: per fornire un elenco a discesa di gruppi di utenti.

Di tutti questi parametri (che si possono utilizzare sia nello sviluppo di template sia di estensioni) saranno pochi quelli effettivamente usati, per esempio i pulsanti radio oppure il listato di valori.

 

8 Il file params.ini

I valori correnti dei parametri del template sono memorizzati nel file params.ini. Esso sta dentro la cartella principale del template (nel nostro caso dentro la cartella Template Esempio). Questo vuol dire che se si vuole utilizzare si deve aggiungere questo file anche dentro il tag <files> di templateDetails.xml.

Osservazione: il file params.ini può essere vuoto e i valori di default dei parametri possono essere impostati dentro <pre> <param></pre> del file templateDetails.xml (nel codice sopra abbiamo scritto default=”blue” e questo vuol dire che lo sfondo sarà, per default, di colore blu). La presenza del file vuoto durante l’installazione del template garantisce che è scrivibile. Se invece vogliamo impostare i valori tramite il file params.ini bisogna inserire un parametro per riga. Il nome del parametro e il suo valore sono separati da un segno di uguale, come in questo esempio:

sfondo=blue;

Per recuperare i valori dei parametri affinché vengano utilizzati in ogni pagina del template basta inserire nel file l’istruzione:

<?php $myParam = $this->params->get( 'parameterName' ); ?>

Nel nostro esempio possiamo creare tanti file .css con le diverse combinazioni di colori per lo sfondo. Per esempio per lo sfondo rosso creiamo un file che chiamiamo red_background.css e dentro scriviamo:

#page_background {background: #F00;}

Per lo sfondo verde creiamo il file green_background.css e scriviamo al suo interno:

#page_background {background: #00FF00;}

Dopo aver scritto i file css dobbiamo modificare il file index.php aggiungendo un link ai file css creati, in questo modo:

<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/TemplateEsempio/css/<?php echo $this->params->get('sfondo'); ?>_bg.css" type="text/css" />

e modifichiamo la riga del body:

<body id="page_background" class="background_<?php echo $this->params->get('sfondo'); ?>">

In questo modo ogni volta che da Gestione Template cambiamo il parametro verrà cambiato lo sfondo anche nel sito.

 

Override del template e installazione

9 Browser e validatori

Bisogna stare attenti perché i diversi browser interpretano alcune proprietà dei CSS in maniera diversa, quindi a volte è necessario creare dei file css diversi, in particolare per Internet Explorer. Per esempio se riteniamo necessario dover avere un template adattato a Internet Explorer 7 o 8 basta creare, oltre al file CSS che sarà interpretato da tutti gli altri browser, dentro la cartella alcuni file che possiamo chiamare, per esempio, ie7only.css e ie8only.css e aggiungere queste righe di codice nel file index.php prima della chiusura del tag head (</head>):

<!--[if IE 6]>
        <link href="/<?php echo $this->baseurl ?>/templates/TemplateEsempio/css/ie6only.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    <!--[if IE 7]>
        <link href="/<?php echo $this->baseurl ?>/templates/TemplateEsempio/css/ie7only.css" rel="stylesheet" type="text/css" />
    <![endif]-->

In modo analogo possiamo impostare per tutte le versioni di browser precedenti a quella indicata, come nell’esempio:

<!--[if lte IE 7]>
<link href="/templates/<?php echo $this->template ?>/css/ie7only.css"
rel="stylesheet" type="text/css" />
<![endif]-->

Questo codice vuol dire che per tutte le versioni di Internet Explorer uguali o precedenti alla 7 verrà utilizzato un template particolare.

Alcuni strumenti molto utili durante lo sviluppo dei template sono quelli conosciuti con il nome di validatori del codice HTML. Essi controllano se nel sito c’è conformità con le raccomandazioni sul codice HTML del W3C. Per verificare la conformità basta andare sulla pagina del validatore W3C e inserire l’url del proprio sito. Un sito che è possibile visualizzare bene con ogni browser è un requisito fondamentale per il successo dello stesso.

 

10 Inserire un modulo dentro il template: un modo alternativo

 

È possibile inserire un modulo specifico in una posizione ben precisa. Per farlo basta includere nel template un codice come questo:

<?php if ($this->countModules('left')): ?>
<div id="sidebar_left">
<jdoc:include type="modules" name="left" />
</div>
<?php endif; ?>

In particolare questo codice inserisce nella parte del sito chiamata sidebar_left (che sarà opportunamente descritta nel css del template) tutti i moduli che in “Gestione moduli” sono stati settati con il posizionamento sinistro. Se invece vogliamo inserire un unico modulo (supponiamo che si chiami personal_module) dobbiamo usare questo codice:

<?php if ($this->countModules('left')): ?>
<div id="sidebar_left">
<?php
$arraym=JModuleHelper::getModules('left');
foreach ($arraym as $module){
if($module == 'personal_module') echo JModuleHelper::renderModule($module);
}
?>
</div>
<?php endif; ?>

 

11 Override del template

L’override consiste nella sovrascrittura del layout di moduli e di componenti di Joomla attraverso il template e questo è possibile farlo dalla versione 1.5 di Joomla. È un argomento estremamente interessante perché a volte è proprio richiesto cambiare il layout di componenti predefiniti che spesso a livello di grafica non rispecchiano quella del sito.

Utilizzare un template diverso può essere fatto se viene passato, durante il caricamento della pagina (sia per richieste GET sia POST), il parametro template, infatti basta scrivere: &template=nome_template.

Ma l’override in verità è qualcosa di più nascosto. Uno dei suoi vantaggi è dato dal fatto che se vengono effettuati degli aggiornamenti sul componente non è necessario andare a modificare e a ricordare quali file abbiamo modificato.

Per creare l’override di un componente basta caricare il file che crea la personalizzazione dentro la cartella html del template, più precisamente in nometemplate/html/estensione/

Per esempio se vogliamo modificare l’aspetto di default degli articoli (lo troviamo nel file components/com_content/views/article/tmpl/default.php) basta caricare un nuovo file con lo stesso nome (default.php) in nometemplate/html/com_content/article/ e questo file deve contenere le modifiche che vogliamo inserire. Quando il sito caricherà le pagine con gli articoli, sovrascriverà il layout predefinito con quello creato da noi.

 

12 Installiamo il nostro template

Una volta che il nostro template è pronto, possiamo creare con la cartella un pacchetto e installarlo sul sito. Il pacchetto può essere in formato ZIP (con estensione .Zip), in formato tar-gzip (con estensione .tar.gz), o in bz2 TAR-formato (con estensione .tar.bz). Per installarlo possiamo fare nel solito modo di tutti gli altri template: dal pannello di controllo andare su Estensioni–>Installa/Disinstalla–>cliccare su sfoglia e caricare il file del template–>cliccare su “Carica file & Installa”.

Se poi andiamo su “Gestione Template” e, dopo aver selezionato il nostro template, clicchiamo su modifica vediamo che tra i dettagli ci sono quelli inseriti nel file templateDetails.xml, come in figura

Simple template

simple template

Se abbiamo aggiunto dei parametri da assegnare questi li troviamo nella medesima pagina sulla destra

Parametri template

Parametri template

A questo punto la creazione è fatta e rimane soltanto da utilizzare la fantasia per altri template.