Lezione 3. Joomla 2.5

Transcript

1 Lezione 3 Joomla 2.5

2 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!

3 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).

4 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: Protocollo: sftp User: matec Pass: matec

5 Joomla: CSS e layout [ispettore css] Ispettore/selettore css: chrome ispezione elemento (firefox: firebug, explorer: ie-developer) Aree del sito Elementi Html e css Selettore aree html Elemento selezionato Css (modificabile temporaneamente)

6 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!

7 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à

8 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)

9 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.

10 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; }

11 Modifichiamo il titolo di un solo modulo (module class suffix) Nel caso del template Tillage, il suffisso va inserito nel file grey.css

12 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

13 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;

14 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

15 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;

16 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.

17 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!)

18 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