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.