Come cambiare il colore dello sfondo di un menu in un template Joomla

Oggi vediamo come individuare fail e il codice CSS che crea l'aspetto finale del nostro menu in un template Joomla per puoi cambiare questo aspetto riportando delle modifiche diretamente nel codice CSS.

  1. 12 passi da fare subito dopo aver instalato CMS Joomla
  2. Modificare lo sfondo di un sito Joomla
  3. Creare una nuova posizione in un templatdi Joomla
  4. Inviare e-mail da joomla
  5. Recuperare la pasword del aministratore Joomla
  6. Come nasondere una parte del articolo in Joomla
  7. Come creare uno spoiler in joomla
  8. File manager direttamente in Joomla
  9. Come rispetare la Cookie law in Joomla
  10. Suffiso classe modulo Joomla.
  11. K2 di Joomla guida ai template.

1.Instalazione plugin aggiuntivi per browser

Per cambiare colore dello sfondo del menu e non solo avremo bisogno di 3 pugin aggiuntivi per il nostro browser, Firebug, ColorZilla e MisuraIT per il browser di Mozzila se state utilizzando un browser diverso ci sono dei plugin simili.

Questi plugin li potete trovare sulla pagina di componenti aggiuntivi https://addons.mozilla.org. In oltre vi consiglio di installare anche ultimo plugin che mi aiuta nel lavoro e che si chiama Screengrab, che permette di fare screenshot. Per esempio immagini per questo articolo ho fatto tramite questo plugin.

A questo punto vediamo di fare nostri primi cambiamenti del codice CSS del nostro template predefinito. Facciamo partire Firebug e vediamo di cambiare per primo colore dello sfondo background-color del nostro menu, il vostro templates di prova può essere anche uno preinstallato del pacchetto Joomla, come per esempio Protostar. La tecnica di cambiamento di colore o di qualche altra proprieta CSS non cambia. Richiamando la finestra di Firebug dal pannello di strumenti in alto sulla sinistra vedremo che si aprirà in basso un altra finestra con il codice della nostra pagina. Cliccando sulla freccia per selezionamento dei elementi sulla pagina scegliamo l'elemento che ci interessa e sulla desta vediamo gli stili CSS legati a questo elemento.

 

dis1

2.Prova diretta di modifica del colore del menu del template in browser

Possiamo fare delle prove direttamente nel Firebug! Proviamo di agiungere diretamente nella finestra di Firebug come mostrato sotto al elemento scelto una nuova proprieta del css backgroun-color. Per sapere di piu su come scegliere un elemento dalla pagina per vedere le sue proprieta CSS  scopri il nostro corso "CSS pratica"
dis2

3. Riportimo delle modifice al fail CSS del template .

Ma vediamo che dopo che chiudo la pagina e la ricarico  il colore dello sfondo del menu  ritorna come prima - bianco, perché non ho cambiato codice del template ma ho fatto soltanto la prova per vedere come esce. A questo punto devo aprire il rispettivo fail css, nel nostro caso template.css dalla cartella template/protostar/css come indicato nella immagine
dis3modificareTemaJoomla

Apro il mio fail di stili css nel Notepad++ passo alla riga 7016 nel nostro caso, guarda disegno sopra, e cambio il codice gia nel fail originale. Aggiungendo il colore dello sfondo del menu tramite proprietà CSS background-color: e scegligo un colore tramite plugin ColorZilla.
dis4modificareTemaJoomla

dis5modificareTemaJoomla

4.Come modificare altri stili predifiniti di un  tema Joomla

La stessa technica puo essere utilizzata per modifficare qualsiasi proprieta css di un elemento scelto del template Joomla. Per esempio colori, tipo di font ,distanze fra gli elementi e tanto altro. Vediamo subito di cambiare anche il colore del testo perché adesso le voci del menu sono diventati uguali come colore allo sfondo del nostro menu, facciamo delle prove direttamente nel Firebug. Prima di tutto dobbiamo individuare tag html che racchiude il nostro elemento e gia dopo vediamo gli stili di esso.
dis6modificareTemaJoomla

5. Modificare colore del testo e gli spazzi nel menu del sito

vediamo di inserire una nuova proprietà che corrisponde per il colore del testo color: e vediamo il risultato
dis7modificareTemaJoomla
A questo punto vediamo di cambiare magari gli spazzi  del menu e peso delle lettere aggiungendo o modificando proprietà padding e font-weight:
dis8modificareTemaJoomla

Conclusione

Okey! Abbiamo raggiunto il risultato voluto! Provate di modificare template Joomla facendo delle prove anche voi installando un copia di CMS Joomla sul vostro server locale. Fate delle prove prima nel Firebug (Come fare questo e tanto altro nel corso "CSS pratica" )e puoi non dimenticate di fare tutti i cambiamenti nel vostro fail di stile del template scelto. Utilizzate Notepad++, e individuate la riga esatta con il codice. Altrimenti tutti i cambiamenti saranno persi , potete subito aggiungere dei commenti al vostro fail di stile per magari ricordarsi cosa avete aggiunto. Alla prossima!

Letto 2082 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso