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
Questa guida è valida solo per joomla 1.5?
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
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 .
Come posso allagrgare la dimensione della pagina ? con questo tutorial è possibile ?
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
Ottima ! grazie
Guida molto utile.
Ti ringrazio molto !
@MarKonE
Grazie a lei per averci seguito.
Scusatemi ….ma se io volessi avere uno sfondo sfumato alla pagina come devo fare?!?!?! crearmi una texture o qualcosa di molto piu semplice?
grazie
se ha uno sfondo sfumato puoi cambiare la regola al css ( consiglio questa lettura http://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.
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.
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
Devo ringraziarvi ma ho un problema , non riesco a spostare un modulo , centra qualcosa con i template e questa tecnica?
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 .
[...] Chiunque lavori nel campo web non può farne a meno [...]
Io stò provando su un template flash ma non vedo nulla
Ma è ovvio , visualizza solo l’output HTML
Funziona anche con la 1.6 beta ?
Naturalmente , non è dedicato esclusivamente a joomla quindi a prescindere dalla versione , magari che il template non sia flash questo si.
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é ?
sicuro di utilizzare colori web safe ?
[...] [...]
Ho capito come cambiare header a joomla ma non riesco a fare i testi !