Risorsa informatica – Blognews

facebook rss youtube

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:

condividi su facebook

Categories: Cms, Joomla, Tutorial, Webdesign

27 Commenti

  1. Valerio scrive:

    Questa guida è valida solo per joomla 1.5?

  2. Roberto M. scrive:

    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

  3. admin scrive:

    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 .

  4. Massimo dev77 scrive:

    Come posso allagrgare la dimensione della pagina ? con questo tutorial è possibile ?

  5. admin scrive:

    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

  6. londonart scrive:

    Ottima ! grazie

  7. MarKonE scrive:

    Guida molto utile.

    Ti ringrazio molto !

  8. admin scrive:

    @MarKonE
    Grazie a lei per averci seguito.

  9. riccardo scrive:

    Scusatemi ….ma se io volessi avere uno sfondo sfumato alla pagina come devo fare?!?!?! crearmi una texture o qualcosa di molto piu semplice?

    grazie

  10. admin scrive:

    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.

  11. dodies scrive:

    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.

  12. Mario graf scrive:

    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

  13. Giova web scrive:

    Devo ringraziarvi ma ho un problema , non riesco a spostare un modulo , centra qualcosa con i template e questa tecnica?

  14. admin scrive:

    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 .

  15. Giavi scrive:

    Io stò provando su un template flash ma non vedo nulla

  16. Silvietta scrive:

    Funziona anche con la 1.6 beta ?

  17. Gianni scrive:

    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é ?

  18. cinzia scrive:

    Ho capito come cambiare header a joomla ma non riesco a fare i testi !

  19. Ema scrive:

    vale per tutti i siti web! :)

  20. revenge scrive:

    Decisamente di aiuto ! almeno per me lo è stato nel capire il concetto

  21. felix scrive:

    noto che per modificare X bisogna andare a capire come funziona Y etc etc
    bel progresso

Rispondi