Joomla 2.5 - fabiozanchetta

Lezione 3
Joomla 2.5
Joomla: il template
Prima di partire con la modifica del
template, diamo un’occhiata alle
posizioni definite dallo stesso.
Come si può notare LOGO non ha
un’area che lo identifica (ma sarà
sufficiente sovrascrivere l’immagine
per cambiarlo).
Slideshow incece è definito in
index.php (carica il modulo btslideshow nella home, non lo carica
nelle altre pagine).
Alcuni parametri, come le
dimensioni dei moduli, sono
impostati all’interno del file
index.php. Ma anche in questo
caso, dipende dal template!
Joomla: CSS e layout
Tramite backend possiamo modificare il CSS dei template
che stiamo utilizzando.
Extension -> template
manager -> template > (es) Tillage -> nome
del file
Elaborare il CSS
significa mettere mano
alla forma del layout e
degli elementi grafici.
Se vogliamo però agire con più cura ci conviene lavorare con un editor css (es.
dreamweaver), un ispettore / selettore css (es chrome ispettore elemento), un
client FTP (es filezilla) e un software di gestione ed elaborazione delle immagini
(es. photoshop).
Joomla: CSS e layout [ftp]
FTP client:
filezilla
Filezilla permette di
caricare file locali su
un serve remoto.
Passi:
1. File -> site
manager, News
site.
2. Host:
ftp.nomesito.it ,
tipo di accesso:
normale.
username e
password vengono
fornite dal gestore
del server
(provider).
ACCESSO MATEC:
Host: 10.4.2.31
Protocollo: sftp
User: matec
Pass: matec
Joomla: CSS e layout [ispettore css]
Ispettore/selettore css: chrome ispezione elemento (firefox: firebug, explorer: ie-developer)
Aree del sito
Elementi
Html e css
Css
html
Selettore
aree
Elemento
selezionato
(modificabile
temporaneamente)
Joomla: CSS e layout [ispettore css]
Ogni elemento è cliccabile e modificabile in molti modi diversi. E'
assolutamente innocuo fare qualunque modifica, in quanto si lavora
sulla copia in memoria e nessuna delle modifiche viene salvata realmente sul
server
Tuttavia, la possibilità di modificare i contenuti al volo, soprattutto nel foglio di
stile (la parte destra della finestra), diventa fondamentale per poter applicare
la stessa modifica al foglio di stile…
Passi da svolgere per modificare un attributo CSS di un sito joomla:
1. Testo le possibili modifiche del codice su firebug/ispettore css
2. Apro un editor css e modifico il file del template in locale
3. Apro filezilla e sovrascrivo il file css in remoto con il file locale
4. Aggiorno la pagina e verifico il cambiamento
E’ fondamentale avere una copia dei file CSS in locale!
Joomla: CSS e layout [modifica css]
Prova pratica, modifichiamo un’area del layout
Sul lato sinistro
possiamo usare la
barra del percorso
gerarchico dell’html
per spostare
dall’elemento più
esterno all’elemento
più interno.
Le breadcrumbs
(percorso della pagina)
invadono il menù.
Modifichiamo le aree
che includono gli
elementi che si
incrociano (breadcrumbs
e main menù)
Nome del file css e
riga in cui è presente
la proprietà
Joomla: CSS e layout [modifica css]
Modifichiamo un’area del layout
Si procede anche a tentativi,
cercando ci capire qual è la
proprietà dell’elemento che può
essere modificata. In questo caso
ho trovato la proprietà «margin»
del div con ID #pathaway (id
associato ad un div che definisce le
proprietà del breadcrum) del file
template.css alla riga:74
(margin: 40px, 15px)
Joomla: CSS e layout [modifica css]
Modifichiamo i titoli dei moduli
Usando il
selettore ci
posiamo sul
titolo del
modulo.
Verifichiamo
che la forma
del titolo
dipende dal tag
h3 contenuto in
un div #sidebar
(#sidebar
div.moduletabl
e h3)
Variando h3
varieremo tutti
i titoli dei
moduli del sito.
Joomla: CSS e layout [modifica css]
Modifichiamo il titolo di un solo modulo (module class suffix)
La classe per i
moduli
di joomla è
.moduletable
Per creare una
diversa
formattazione
per un
modulo, è necessario
immettere nel css la classe
.moduletable_nomescelto
dandogli attributi che vogliono.
Nel modulo, nella parte relativa
all'assegnazione del modulo,
inserisci il valore "_nomescelto.
(es _mysponsor)
div .moduletable_mysponsor {
attributi;
}
Joomla: CSS e layout [modifica css]
Modifichiamo il titolo di un solo modulo (module class suffix)
Nel caso del template
Tillage, il suffisso va inserito
nel file grey.css
Joomla: CSS e layout [modifica css]
Modifichiamo lo stile di ultime news (suffisso modulo).
Proviamo a personalizzare il
modulo ultime news.
Attiviamo un ultime news
(modulo di default).
Ricordiamoci che il modulo
funziona se ci sono articoli
pubblicati dall’id coperto da
ultime news.
Andiamo su grey.css e
scriviamo il codice degli
attributi (es: _light).
Ricordiamoci di impostare
_light in corrispondenza di
module class suffis nel
modulo ultime news
Joomla: CSS e layout [modifica css]
Modifichiamo lo sfondo:
Anche in questo caso è
sufficiente selezionare
l’area di codice in cui
viene richiamato lo
sfondo, aprire il file (nel
caso del nostro template
è grey.css) è aggiungere le
righe di codice che
seguono.
Per completare il quadro dobbiamo inserire
uno sfondo di colore uniforme sotto lo sfondo
sfumato (sfondo.jpg):
background-color: #57656d;
Joomla: CSS e layout [modifica css]
Modifichiamo logo e banner:
Ogni template gestisce differentemente posizioni ed estensioni. In
questo caso banner è contemplato come area modulo, logo no.
La larghezza e l’altezza
dello spazio div
#logo sono definite
su index.php!
Selezionando le opportune porzioni possiamo verificare gli attributi delle singole aree.
Per sovrascrivere immagini a logo e al banner possiamo:
• Sovrascrivere delle immagini a quelle esistenti (tramite ftp)
• Creare dei moduli e impostarli in posizione #banner
Joomla: CSS e layout [modifica css]
Modifichiamo lo sfondo non globale (#wrap)
Proviamo a verificare se c’è un div che
ci permette impostare uno sfondo ai
contenuti. In genere lo sviluppatore
dei template tende a inserire un
involucro (wrap) per contenere tutta
l’area del sito.
Se volessimo creare l’effetto del foglio
bianco contenitivo con lieve
ombreggiatura sui bordi?
• Creo un’immagine bianca
orizzontale con l’ombreggiatura ai
bordi di 980px
• Css in #wrap: backgroundimage:url(‘../images/ombra.jpg');
background-repeat:repeat-x;
Joomla: CSS e layout [modifica css]
Modifichiamo la barra laterale:
Abbiamo diversepossibilità di modificare la barra laterale:
• Div #sidebar e relative proprietà.
• Modificare il CSS dei moduli presenti nella sidebar
• Inserire moduli HTML
In questo esempio ho modificato il colore di sfondo di tutta la barra.
Joomla: CSS e layout [modifica css]
Modifichiamo la barra laterale tramite css
La larghezza della banda, poiché genererebbe problemi di gestione degli spazi, è
contenuta nel file PHP e non nel foglio di stile:
$leftColumnWidth = $this->params->get("leftColumnWidth", "190");
Si può reimpostare da qua, tenendo conto anche della righcolumn.
Padding e margin dipendono dalle due sidebar e dall’area contenuti (#content60).
Se aggiungiamo
un padding:
10px alla
#sidebar
aumentiamo di
20px la
larghezza totale
della barra
stessa,
spostando in
basso la
#sidebar-2 !
#sidebar-2 è
scesa! Per
sopperire a
questo problema,
verifico margin e
padding dei
contenuti e di
sidebar-2 (oppure
la rimuovo!)
Joomla: CSS e layout [modifica css]
Modifichiamo la barra laterale tramite css di un modulo
Ogni singolo modulo è impostato secondo le
indicazioni del proprio foglio di stile che si
integra all’interno del layout del template.
In questo caso il modulo è un last-news con
slide immagini (bt-contentslider).
Se vogliamo modificare, ad esempio, il colore
della linea del bordo delle immagini dobbiamo
aprire btcontentslider.css
Per verificare la URL del foglio di stile ci basta
cliccare sul nome del file tramite selettore CSS