Modificare un template joomla
In questa Guida imparerete come iniziare a modificare le piccole parti di un template joomla usando Firebug (estensione firefox ) ed un blocco note .
Prima cosa da fare e’ selezionare il template sulla quale si vuole lavorare dall’apposito pannello di amministrazione – Install/Uninstall – Template Manager
A questo punto una volta selezionato lo “stile” come predefinito , apriamo la nostra home page in modo da visualizzarne il contenuto
Apriamo l’estensione firebug in basso a destra e noteremo un piccolo pannello con i dati relativi alla pagina visualizzata. Se non avete firebug potete scaricarlo da QUI . Avremo piu sezioni , ma quella che ci interessa è la parte html e soprattutto CSS .
Cliccando su modifica avremo il codice a portata di mano , scegliamo perciò css e vedremo tutti i valori impostati dal template
La panoramica dei valori attribuiti si presenta cosi , la modifica non comporta la scrittura del file ma soltanto la modifica temporanea locale per tanto ad ogni punto modificato è importante segnare in un blocco note o direttamente nel nuovo file css i nuovi valori .
In questo caso facciamo un esempio su come allargare l’header aggiungendo un valora maggiore all’altezza HEIGHT portandola da 96 a 200 px
Analizzando la parte esterna noteremo come viene segnato il colore di sfondo ( Background ) con un codice associato ad un colore . in questo caso un celeste ed abbinato ad’una immagine dal nome bg_page.png che si trova nella cartella images del template
Modificando il codice colore in #000000 (nero) ed eliminando l’associazione immagine avremo uno sfondo nero o del colore scelto variando il #%var%
Scelta la giusta realizzazione ed apportate tutte le modifiche dobbiamo riscrivere il codice affinche le modifiche siano permanenti . Andiamo nella cartella del template per trovare il codice css
A questo punto sostituiamo i valori che prima abbiamo scelto ad il file . Salviamo e carichiamo sul nostro server il file css appena aggiornato.
Oltre la struttura è possibile gestire il design e le immagini . Analizzando il banner nell’header verrà segnalata la cartella di destinazione dell0immagine con il nome associato , in questo caso banner.jpg con le relative dimensioni .
Nel caso vogliamo modificarlo basterà seguire il percorso prima indicato per poter aprire l’immagine per poi sostituirla con la nuova * ( in genere è consigliato tenere le dimensioni originali)
Una volta effettuate le operazioni su tutte le immagini , carichiamo tramite ftp la cartella in /templates/ sostituendo i vecchi files con i nuovi .
Originale
Modificato
Si consiglia di pulire la cache per verificare le modifiche apportate.
Se hai bisogno di un tema professionale e poco tempo a disposizione, puoi utilizzare questo network sottostante:
27 commenti
Valerio · 7 Marzo 2009 alle 13:25
Questa guida è valida solo per joomla 1.5?
Roberto M. · 7 Marzo 2009 alle 15:24
Grazie dell’interessante guida che mi ha letteralmente semplificato la gestione del mio sito web . Direi che a questo punto non si puo dire che joomla non sia personalizzabile . Grazie ancora
Saluti Roberto
admin · 7 Marzo 2009 alle 15:30
Ciao Valerio , questa guida è stata basata su joomla 1.5 ma le vecchie versioni usano comunque la stessa struttura . Stessa cosa vale per wordpress e altri cms con la variante destinazione cartella template che comunque viene visualizzata nel codice fornito da Firebug .
Massimo dev77 · 7 Marzo 2009 alle 18:01
Come posso allagrgare la dimensione della pagina ? con questo tutorial è possibile ?
admin · 9 Maggio 2009 alle 15:39
Per allargare la pagina dipende dalla strutura utilizzata dal template , in genere ti basta editare la dimensione del body tramite css, ma ciò è relativo alla tipologia della struttura utilizzata
londonart · 19 Maggio 2009 alle 19:18
Ottima ! grazie
MarKonE · 4 Giugno 2009 alle 11:02
Guida molto utile.
Ti ringrazio molto !
admin · 22 Giugno 2009 alle 11:14
@MarKonE
Grazie a lei per averci seguito.
riccardo · 19 Agosto 2009 alle 16:27
Scusatemi ….ma se io volessi avere uno sfondo sfumato alla pagina come devo fare?!?!?! crearmi una texture o qualcosa di molto piu semplice?
grazie
admin · 20 Agosto 2009 alle 13:40
se ha uno sfondo sfumato puoi cambiare la regola al css ( consiglio questa lettura https://www.risorsainformatica.com/blognews/tutorial-limmagine-di-sfondo/ ) sostituendo con ciò che vuole , che sia un pattern o un’immagine o meglio un colore unico .In caso ci siano grosse difficoltà può scrivere sul forum caricando il css in modo da avere un supporto.
dodies · 3 Settembre 2009 alle 15:44
Il pregio maggiore di quanto letto in questo articolo, mi pare la semplicità e chiarezza usata per spiegare i passaggi e i risultati.
Ringrazio per il tempo dedicato e la condivisione delle informazioni.
Non conoscevo l’estensione di ff e ora provvedo ad installarla.
Buon proseguo.
D.
Mario graf · 11 Settembre 2009 alle 19:41
Fantastico ! mi sono dannato per 3 mesi per capire quando mi è bastato leggere la guida per chiarirmi le idee . Grazi per la condivisione , quoto doddies
Giova web · 13 Ottobre 2009 alle 20:47
Devo ringraziarvi ma ho un problema , non riesco a spostare un modulo , centra qualcosa con i template e questa tecnica?
admin · 13 Ottobre 2009 alle 20:55
La gestione delle posizioni dei moduli è sul pannello di amministrazione nel dettaglio del singolo modulo ( opzioni ), consiglio di provare le varie posizioni indicate per allineare poi tramite css nel caso sia necessario .
Giavi · 17 Giugno 2010 alle 08:03
Io stò provando su un template flash ma non vedo nulla
Lorenzo P. · 18 Giugno 2010 alle 10:20
Ma è ovvio , visualizza solo l’output HTML
Silvietta · 26 Ottobre 2010 alle 22:52
Funziona anche con la 1.6 beta ?
admin · 27 Ottobre 2010 alle 22:09
Naturalmente , non è dedicato esclusivamente a joomla quindi a prescindere dalla versione , magari che il template non sia flash questo si.
Gianni · 29 Novembre 2010 alle 13:45
Ho letto l’articolo e ho imparato alcune cose che non conoscevo , andando a fare delle modifiche però mi sono reso conto che cambiando dei colori questi non sono poi uguali a quello che ho scelto ! perché ?
admin · 29 Novembre 2010 alle 13:49
sicuro di utilizzare colori web safe ?
cinzia · 11 Febbraio 2011 alle 15:07
Ho capito come cambiare header a joomla ma non riesco a fare i testi !
Ema · 29 Marzo 2011 alle 21:32
vale per tutti i siti web! 🙂
admin · 29 Marzo 2011 alle 22:53
certo, in questo caso però è stato spiegato su joomla 🙂 dato che è il più richiesto.
revenge · 29 Giugno 2011 alle 16:01
Decisamente di aiuto ! almeno per me lo è stato nel capire il concetto
felix · 5 Maggio 2013 alle 22:49
noto che per modificare X bisogna andare a capire come funziona Y etc etc
bel progresso
Strumenti e tecniche utili per la personalizzazione grafica di un sito joomla 5 | Risorsa informatica - Blognews · 12 Febbraio 2010 alle 16:08
[…] Chiunque lavori nel campo web non può farne a meno […]
Modificare templates in Joomla · 23 Gennaio 2011 alle 16:35
[…] […]
I commenti sono chiusi.