Sviluppo siti web con i cms – guida joomla 12

Costruzione siti web con i cms – guida joomla 11
9 agosto 2010
Sviluppo siti web con i cms – guida joomla 13
9 agosto 2010
Want create site? Find Free WordPress Themes and plugins.

Personalizzazione dei moduli
Chi ha già maturato una piccola esperienza con il ns CMS ha già sicuramente sentito parlare della
possibilità di personalizzare l’output dei moduli,e parlando sempre a livello di codice tableless
ricorderà gli stili
-1
-2
-3
Semplici numeri che ci permettono di ottenere risultati differenti e tali da coprire ogni circostanza
di pubblicazione.
Questo forse è l’ambito che ha ricevuto cambiamenti minori rispetto al resto,un semplice cambio
di sigle può sicuramente essere ritenuto tale.
Di seguito una tabella comparativa che evidenzia i cambiamenti:
versione 1.0.x Versione 1.5
-1
none
-2
Xhtml
-3
Rounded
Mod_Chrome
Cambiamenti semplici……..tranne per l’introduzione di una nuova possibilità di
personalizzazione evidenziata in rosso e chiamata Mod_Chrome.
Vediamo comunque nel dettaglio e con esempi pr atici cosa è possibile ottenere utilizzando gli stili
dei moduli.
scelta dello stile
<jdoc:include type=”modules” name=”user2″ style=” ” />
Con I relativi stili
Copyright © 2008 https://www.joomlaskin.it rilasciato sotto licenza Creative commons 3.0 non commercial
Vuoi leggere i nuovi articoli di livello avanzato sulla creazione dei template per joomla 1.5? Vieni a trovarci!
none
xhtml
rounded
modChrome
omettiamo volutamente di far riferimenti agli stili che generano un output di tipo
tabellare.
Ma quale è l’esatto significato di questa espressione? o perlomeno quali sono gli effetti
tangibilmente visibili delle variazioni?

Lo stile “none” sembra essere graficamente meno accattivante rispetto agli altri due,ma
non è del tutto vero come vedremo più avanti.
Stile xhtml

div.moduletable {
padding:
margin:
border:
}
div.moduletable h3 {
margin:
padding:
color:
font-size:
background:
}
Copyright © 2008 https://www.joomlaskin.it rilasciato sotto licenza Creative commons 3.0 non commercial
Vuoi leggere i nuovi articoli di livello avanzato sulla creazione dei template per joomla 1.5? Vieni a trovarci!
Stile xhtml
L’esempio è ovviamente solo un riferimento l’immagine seguente mostra quali sono le
aree di pertinenza del modulo:
L’immagine è una forzatura,serv e solo a distinguere le due zone,nella realtà dobbiamo
tener presente ch e esiste un contenitore princip ale div.moduletable al cui interno è
presente uno spazio,un blocco che mostra il titolo del modulo.
A livello di gestione grafica e di impaginazione a questo punto possiamo:
impostare un immagine di sfondo,un colore di sfondo,un padding e degli attributi di
testo al titolo del nostro modulo come in questo esempio:
Copyright © 2008 https://www.joomlaskin.it rilasciato sotto licenza Creative commons 3.0 non commercial
Vuoi leggere i nuovi articoli di livello avanzato sulla creazione dei template per joomla 1.5? Vieni a trovarci!
div.moduletable h3 {
padding: 0;
color: #FFFFFF;
font-size: 1.2em;
text-indent: 8px;
}
E nel corpo dell’intero modulo impostare larghezza,inserire bo rdi,colore/immagine di
sfondo,padding e gestire attributi del testo.
div.moduletable {
padding: 2px 3px;
margin: 3px 0 22px;
border: 1px solid #C6DBE9;
background: #FFFFFF;
width: 180px;
}
La struttura ovviamente si adatta al contenuto in altezza e ciò và considerato se
decidiamo di utilizzare immagini di sfondo,ad esempio una piccola clipart in basso a
destra o uno sfondo ripetuto,utilizzando le adeguate impostazioni nel foglio di stile.
Copyright © 2008 https://www.joomlaskin.it rilasciato sotto licenza Creative commons 3.0 non commercial
Vuoi leggere i nuovi articoli di livello avanzato sulla creazione dei template per joomla 1.5? Vieni a trovarci!
Lo stile “rounded”
La struttura che racchiude e definisce questo stile del modulo è la più
complessa,permette di gestire livelli grafici articolati con una regolazione molto fine
dell’output.
E’ infatti possibile strutturare moduli ad attabili sia in altezza che in largh ezza rispetto ai
contenuti degli stessi.Per capire meglio il concetto si pensi ad un modulo estensibile per
l’intera larghezza disponibile (ovviamente rif erita alle specifich e della zona di
pubblicazione)

Esistono almeno tre diverse possibilità di strutturazione del layout con strutture di
questo tipo,la scelta è ovviamente legata alle necessità finali e và consider ata nella
prima fase di stesura grafica del layout.
Questa impostazione di stile nei moduli permette soprattutto l’uso di immagini
maggiormente rifinite come ad esempio box con angoli arrotondati.

Analizziamo il codice css prendendo come riferimento 3 diversi tipi di strutture:
Modulo a larghezza fissa con angoli arrotond ati

Trova la sua applicazione principale in colonne left – right o comunque in zone ad
estensione verticale,il listato css utilizzato è il seguente:
div.module h3 {
margin: 0;
font-size: 1em;
margin-top: 5px;
margin-bottom: 20px;
color: #000;
}
div.module {
width: 200px;
background: url(../images/media.gif) repeat-y;

margin-bottom: 2px;
margin-right: 15px;
}
div.module div {
background: url(../images/bottom.gif) bottom left no-repeat;
}
div.module div div {
background: url(../images/top.gif) top left no-rep eat;
padding: 7px 10px 15px 12px;
}
div.module div div div {
background: none;
padding: 0;
width: auto !important;
width: 100%;
}
In questa realizzazione inseriamo immagini di background solo in 3 div ed impostando
la larghezza del modulo in 200 px.
Realizzare moduli dall’aspetto grafico migliore è abbastanza semplice seguendo le
impostazioni del css e l’immagine in alto
Modulo ad altezza e larghezza variabile
Se il nostro intento è invece quello di realizzare un box con grafica particolare e che
abbia nel contempo la possibilità di adattarsi in larghezza ed altezza al contenuto
(sempre riferito all’area di pubblicazione) è possibile sfruttare in maniera più ampia il

listato css e le sue proprietà di sovrapposizione delle immagini

div.module h3 {
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: bold;
color: #333;
margin: -2px -8px 0 -8px;
padding-left: 10px;
padding-bottom: 2px;
}
div.module {
background: url(../images/1.gif) 0 0 no- repeat;
margin: 0;
padding: 0;

margin-bottom: 20px;
}
div.module div {
background: url(../images/2.gif) 100% 0 no -repeat;
}
div.module div div {
background: url(../images/3.gif) 0 100% no -repeat;
}
div.module div div div {
background: url(../images/4.gif) 100% 100 % no-r epeat;
padding: 8px;
width: auto !important;
width: 100%;}
I due metodi descritti risultano utilissimi nella personalizzazione grafica dei moduli ma
è possible ottenere risultati altrettanto gradevoli utilizzando due sole immagini

Did you find apk for android? You can find new Free Android Games and apps.