Tutorial Tutorial Joomla 1.5 Come creare un semplice template di Joomla 1.5
Questo tutorial mostrerà come creare un semplice template per Joomla 1.5.
01 Apri la directory "templates" che si trova nella tua installazione di Joomla. Poi crea una sottocartella chiamata "tutorial_template". Tutti i file del template risiederanno qui.
02 Dentro questa nuova directory, crea un file chiamato index.php, e un altro chiamato templateDetails.xml. Poi crea una cartella css e dentro di essa un nuovo file template.css. Per creare questi file puoi usare anche il semplice Notepad, salvare i file sul tuo computer e caricarli in seguito tramite FTP oppure tramite il File Manager di cPanel. Questi sono i file di base che ogni template Joomla deve avere per funzionare correttamente.
03 Dopo aver creato i file, cambia il template predefinito con quello appena creato. Per una guida su come fare questo, dai un'occhiata al nostro tutorial su come cambiare il template di Joomla.
04 Ora vediamo in dettaglio cosa dovrebbe contenere ogni singolo file. index.php dovrebbe iniziare con:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"Queste linee specificano l'inizio dell'output HTML del tuo sito. Il codice PHP
"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" />
</head>
<body>la linea "<jdoc:include type="component" /> " ha il compito di mostrare il contenuto di ogni pagina fornita.
<jdoc:include type="component" />
</body>
</html>
05 Ora controlliamo il nostro template. Salva il file index.php ed effettua il login nell'Area Amministrativa di Joomla. Da lì, rendi il template "tutorial_template" predefinito. Per una guida su come fare questo, dai un'occhiata al nostro tutorial su come cambiare il template di Joomla. La pagina dovrebbe apparire più o meno come questa (a seconda del contenuto della pagina).
06 Adesso aggiungiamo qualche posizione di modulo. Modifica il tuo index.php e cambia le linee tra <body> e </body> in:
<div id="container">La linea <jdoc:include type="modules" name="left" /> dice a Joomla dove inserire i moduli pubblicati nella posizione left. Noi abbiamo solamente inserito le posizioni top, left, right e footer al nostro template. E' da notare che le abbiamo circondate di tag <div> e aggiunto delle informazioni sulle loro classi e ID. Inoltre abbiamo anche inserito tutto il codice in un div con ID "container", ciò permette di impostare le dimensioni di base della tua pagina. Le classi div saranno definite in template.css una volta creato.
<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>
<!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" />
</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>
07 Adesso dobbiamo modificare il file templateDetails.xml. Aprilo e incollaci queste linee:
<?xml version="1.0" encoding="utf-8"?>Diamo un'occhiata approfondita alle linee di questo file:
<!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>SpazioRC</author>
<authorEmail> Questo indirizzo e-mail è protetto dallo spam bot. Abilita Javascript per vederlo. </authorEmail>
<authorUrl>http://www.siteurl.com</authorUrl>
<copyright>SpazioRC</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>
08 Il prossimo passo è aggiungere uno stile al nostro template. Apri il file index.php e aggiungi queste linee prima del tag </head>.
<linkqueste linee dicono al nostro sito da dove caricare il foglio di stile.
rel="stylesheet" href="/templates/tutorial_template/css/template.css"
type="text/css" />
09 Ora dovresti modificare il file css/template.css e aggiungere queste linee:
* {
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 linee aggiungono un po' di stile di base alle diverse parti del sito. Ti servirà un po' di abilità con i CSS per effettuare dei cambiamenti all'aspetto del tuo sito.
10 Il template adesso è completo. A questo punto il sito dovrebbe apparire così:
Da ora in poi tocca alla tua immaginazione creare il design del tuo sito. Puoi aggiungere altre posizioni per i moduli, modificare il file css, aggiungere immagini come sfondo e molto altro ancora. La struttura dei template di Joomla ti da la libertà di creare il sito che hai sempre sognato. Buona fortuna!
