Grazie tonicopi e r-evolving e scusate per la lunghezza dell'articolo.
Ho la cattiva abitudine di essere prolisso nello scrivere ma mi piace avere come obiettivo la chiarezza.
L'articolo poteva essere molto più lungo perchè sarebbero tante le cose da dire e da chiarire. Sto meditando di scrivere una guida molto più completa. In realtà l'ho già iniziata ma il lavoro va molto a rilento.
@justvins
Comprendo la tua difficoltà nel non riuscire a capire dove posizionare una nuova zona. Io nel mio esempio l'ho posizionata sotto la zona footer perchè era la soluzione più semplice
Credo che il "trucco" sia nel disegnare idealmente (magari le prime volte si può farlo su carta) i vari container div che si trovano nel template. Come guida si possono usare i nomi delle classi del css che vengono assegnati ai vari container e le funzioni <jdoc> di Joomla che riportano i nomi delle diverse zone moduli.
Quello che può far confondere eventualmente sono le istruzioni php condizionali if
<div id="leftcolumn">
<?php if($this->countModules('left')) : ?>
<jdoc:include type="modules" name="left" style="rounded" />
<?php endif; ?>
</div>
In questo caso il container div "leftcolumn" verrà riempito con i moduli pubblicati nella zona moduli left solo SE ci saranno moduli pubblicati.
Ma questo non significa che non dobbiamo tenerne conto. Io consiglierei di ignorare le istruzioni condizionali if.
Piccolo esercizio:
Supponiamo di avere questo codice:
<style>
.uno{
width:400px;
height:200px;
border: solid 1px blue;
padding: 10px 10px 10px 10px;
}
.due{
width:150px;
height:160px;
float: left;
border: solid 1px green;
padding: 5px 5px 5px 5px;
margin-right: 10px;
}
.tre{
width:140px;
height:150px;
border: solid 1px red;
}
.quattro{
width:150px;
height:170px;
float: left;
border: solid 1px black;
}
</style>
<div class="uno">
<div class="due">
<div class="tre">
</div>
</div>
<div class="quattro">
</div>
</div>
Disegna su carta la disposizione dei container div considerando che il container di classe "due" e quello di classe "quattro" sono affiancati.
Non visualizzare il codice che ti ho scritto inserendolo in un file .html prima di aver disegnato la disposizione dei container div.
Una volta fatto il disegno lo confronterai con quello che ti viene visualizzato sul browser.
Adesso prova a modificare il codice html e le classi del foglio di stile per inserire un container di classe "cinque" (che devi creare) a destra del container di classe "tre" dentro il container di classe "due".
