L'uso di un CMS come Joomla fa sì che la grafica possa essere modificata e cambiata attraverso pochi click. Vediamo come possiamo usare il template di default e "cammuffarlo" per rendere il nostro sito un po' diverso dagli altri.
Accediamo al backend di Joomla e selezioniamo il menu "Estensioni | Gestione template".
![Gestione template](https://static.html.it/app/uploads/documenti/guide/img/joomla/img-q1.jpg)
Supponiamo di usare rhuk_milkyway, il template di default, anche se le seguenti istruzioni si applicano a qualunque template dotato di parametri.
![La modifica template](https://static.html.it/app/uploads/documenti/guide/img/joomla/img-q2.jpg)
Assicuriamoci che nel box “Parametri” sia evidenziato come il file params.ini sia scrivibile. In caso contrario, dobbiamo agire sui permessi di tale file usando un client FTP. Ora possiamo modificare i colori del template: il colore usato per i moduli quello per lo sfondo.
Il box “Larghezza Template” ci permette di scegliere la dimensione occupata dal template: fluida (si ingrandisce a seconda della larghezza della finestra del browser), piccola, media o grande.
Fatto questo, vediamo come modificare la grafica per adattarla al nostro sito: immaginiamo di avere un logo e di volerlo sostituire al logo di Joomla. Apriamo il nostro client FTP e colleghiamoci al sito Joomla. Dobbiamo caricare nella cartella templates/rhuk_milkyway/images l’immagine che abbiamo intenzione di usare come logo.
Ora apriamo il menu “Estensioni | Gestione template”. Selezioniamo il template in uso (rhuk_milkyway) e nella pagina successiva premiamo il pulsante "Mod. CSS". Dall’elenco dei file CSS che compongono il template selezioniamo il principale, ovvero template.css, e premiamo il pulsante "Modifica".
![Editor CSS](https://static.html.it/app/uploads/documenti/guide/img/joomla/img-q3.jpg)
La pagina visualizzata è un form che consente di modificare il file CSS del nostro template. Usiamo la funzione "Trova" del browser cercando la parola “logo”.
![Cerchiamo la parola logo](https://static.html.it/app/uploads/documenti/guide/img/joomla/img-q4.jpg)
Ora modifichiamo la definizione di div#logo, scrivendo all’interno della proprietà “background” il percorso del nostro nuovo logo.
Premiamo il pulsante “Applica” in alto a destra ed apriamo l’anteprima del sito. Aggiornando la pagina vedremo come il logo è cambiato.
![Il logo modificato](https://static.html.it/app/uploads/documenti/guide/img/joomla/img-q5.jpg)
Possiamo tornare alla pagina di modifica del file CSS per apportare ulteriori modifiche al file CSS e perfezionare la visualizzazione del nuovo logo: margini, altezza ed ogni altra impostazione utile.