Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Personalizzare il template di default

Modifichiamo il tema grafico preimpostato di Joomla
Modifichiamo il tema grafico preimpostato di Joomla
Link copiato negli appunti

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

Figura g1. Gestione templateGestione template

Supponiamo di usare rhuk_milkyway, il template di default, anche se le seguenti istruzioni si applicano a qualunque template dotato di parametri.

Figura g2. La modifica del templateLa modifica template

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

Figura g3. Editor CSSEditor CSS

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

Figura g4. Cerchiamo la parola logoCerchiamo la parola logo

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.

Figura g5. Il logo modificatoIl logo modificato

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.


Ti consigliamo anche