guida joomla 9

Continuiamo il nostro discorso occupandoci adesso del sistema dei menù in Joomla!

Il lavoro degli sviluppatori è stato sicuramente imponente,da un lato hanno reso il sistema se
possibile ancora più facile ed intuitivo da utilizzare,dall’altro hanno fornito strumenti di
personalizzazione avanzata del cms senza trascurare il discorso accessibilità. Continua la lettura di “guida joomla 9”

guida joomla 8

Abbiamo inserito delle proprietà per distanziare i “blocchi” usando il margin,impostato un altezza
per le colonne e un bordo perché siano visibili nel browser (successivamente la proprietà height
verrà eliminata poiché non necessaria). Continua la lettura di “guida joomla 8”

guida joomla 7

Continuiamo ora la costruzione della nostra base per il template cominciando a costruire una
struttura tableless nella quale,pezzo per pezzo inseriremo moduli e componenti.
Realizziamo una struttura classica su 3 colonne con header e footer e dunque nel file aperto in
dreamweaver iniziamo inserendo un div contenitor e “wrapper” che avrà il compito di racchiudere
la struttura e gestire la centratura nel browser del template.

E’ sicuramente molto utile scriver e il codice inserendo anche commenti che facilitino
l’individuazione delle zone in previsione di futuri cambiamenti

Ci è possibile lavorare contemporaneamente sia sulla index.php del template sia sul suo foglio di
stile,quindi apriamo topstyle light (versione gratuita) un ottimo programma di editing e inseriamo
di volta in volta le proprietà dei selettori ch e andremo a creare Assegniamo le proprietà generiche della pagine attraverso il selettore body impostando il font e la
sua grandezza,mentre la centratur a del contenitore “wrapper” verrà gestita semplicemente dalla
proprietà margin impostata su “0 auto” av endo cura di definire anche la su a largh ezza,in caso
contrario il div non risulterebbe centrato nella pagina.
Continuiamo inserendo header – colonna sinistra – colonna destra – contenuti e footer

E nel foglio di stile i rispettivi parametri:
#header {
color: #333;
width: 900px;
float: left;
padding: 10px;
border: 1px solid #892105;
height: 100px;
margin: 10px 0px 5px 0px;
}
#colonnasinistra {
color: #333;

border: 1px solid #892105;
margin: 0px 5px 5px 0px;
padding: 10px;
height: 350px;
width: 195px;
float: left;
}
#contenuti {
float: left;
color: #333;
border: 1px solid #892105;
margin: 0px 5px 5px 0px;
padding: 10px;
height: 350px;
width: 456px;
display: inline;
}
#colonnadestra {
color: #333;
border: 1px solid #892105;
margin: 0px 0px 5px 0px;
padding: 10px;
height: 350px;
width: 195px;
float: left;

}
#footer {
width: 900px;
clear: both;
color: #333;
border: 1px solid #892105;
margin: 0px 0px 10px 0px;
padding: 10px;
}