Modificare un template Joomla attraverso fogli di stili CSS

In questo breve articolo vediamo dove mettere le mani per fare delle piccole o grandi modifiche al tuo template predefinito di Joomla attraverso fogli di stili CSS.

Risposte alle domande piu frequenti

  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 template di 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.

Vediamo subito un esempio di modifica di un tema Joomla nativa della casa produttrice e il risultato dopo i cambiamenti riportati.

Il disegno nativo del template

E dopo cambiamenti fatti.

mdificaretemajoomla 3

mdificaretemajoomla 1

1. Come procedere nella modifica di un template Joomla?

Prima di tuto qualsiasi modifica di un tema Joomla comincia dal panelo di aministrazione con definire la futura strutura del nostro sito, scelta dei moduli e la loro posizione sulla pagina. Dopo di che posiamo cambiare aspetto di questi moduli se è  possibile lo posiamo fare diretamente dal editore del modulo che ci interessa e se questo non basta allora andimo a coregere il fail css o la struttura html.

La pagina del articolo da vendita.

mdificaretemajoomla 2 mdificaretemajoomla 4
Con questo esempio ho voluto mostrare che puoi adattare qualsiasi tema Joomla alla scema del tuo futuro sito, puoi fare qualsiasi modifica a condizioni che conosci linguaggi CSS, Html, e un puo di PHP almeno al livello medio. Se queste abilita ti mancano ti invito di studiare i nostri corsi “CSS pratica” e “Sito web da 0 “ . Perché la preparazione è tutto come si dice.

2. Semplici cambimenti.  Cambiare colore

Oggi vediamo di cambiare colore della barra del  menu, non parlerò di come creare menu e le sue rispetive voci ne come utilizzare varie moduli. Toccheremo solo il codice css interno.

2.1 Strumenti necessarie per modificare un tema Joomla.

Per poter procedere dovremo installare sul nostro browser dei plugin che ci aiuteranno nel nostro lavoro, io personalmente utilizzo come browser preferito  Fierfox quindi tutte le mosse vediamo su questo browser. Per la prima cosa dobbiamo installare plugin che si chiama Firerbug, come installarlo e utilizzarlo puoi scoprire nel corso “CSS pratica”.  Noi faremo tutto su un server locale. Io direi di creare due siti sul server locale uno con la ultima versione di CMS Joomla e con il tuo template in essa instalato e creare altro sito usando il parchetto quickstart del  template scelto. Perche? Perché con il parchetto quickstart potremo sempre vedere e analizzare varie elementi pensati dalla casa produttrice per questo template e nel primo sito senza dati di esempio avremo un sito completamente vergine e pulito

 

mdificaretemajoomla 5
Non dimentichare di installare  varie plugin del template  Joomla scelto, che di solito vengono forniti separatamente dal template stesso o incorporati nel pachetto di quickstart.

A questo punto siamo quasi pronti, manca un editore del codice io preferisco per tipo di cambiamenti che faremo un semplice Notepad ++ che è gratuito, come utilizzarlo sempre nei nostri corsi Html e CSS che anche loro sono gratuiti e accessibili dal nostro sito.  
E in piu avremo bisogno di Total commander anche esso è gratuito. Un programma molto utile e secondo me lo devi avere sul tuo computer sempre, per gestire non solo  fail del sistema(Windows ), ma anche i fail remoti .

Vediamo di aprire le rispetive cartelle dei nostri siti instalati su server locale nel Total Commander

mdificareTemaJoomla 6

2.2 Modificare stili CSS del template Joomla

Dopo di che pasiamo alle cartelle del nostro template scelto, quella basato su quickstart teniamo come riferimento e su quello vergine  vediamo di fare dei cambiamenti, prima di tutto ci intereseranno i fail CSS del template

mdificareTemaJoomla 7
 

Le modifiche faremo direttamente nel fogli di stili CSS, vediamo di cambiare colori del tema scelto. Nel mio template esiste la possibilità di cambiare colore dello tema direttamente dal panello di amministrazione, ma noi vediamo di fare questa modifica nel codice del fail CSS che corrisponde per questo stile.

mdificareTemaJoomla 8

2.2.1 Come individuare fail con gli stili da modifficare

E per individuare questo fail utilizzeremo plugin Fierbug di Firefox come avevo gia accenato sopra.  Se non hai ancora  instalato guarda questo video

animatedDude

video prevui

Quindi dopo aver scelto qualsiasi ellemento dal frontend del sito con aiuto di  Fierbug posso individuare il fail di stili css che mi interessa.

mdificareTemaJoomla 91

 

 A questo punto vediamo di aprire questo fail che si chiama "template-yellow.css" dalla cartella CSS del nostro tema predefinito Joomla

mdificareTemaJoomla 10

nel Notepad++

mdificareTemaJoomla 11

Ora potei cambiare il colore del menu sotituendo il colore dello sfondo  attuale background: #666 con qualche altro

3. E dopo...

 La tecnica descritta puo essere aplicata a qualsiasi ellemento del vostro template predefinito. Si identifica lo stile del ellemento che vogliamo modifficare si apre rispetivo fail CSS e si cambiano proprieta del ellemento. Ovio che per poter cambiare lo stile dovrei sapere il linguago CSS, sapere cosa sono i seletori e come si scrivono varie proprieta di stili, nonche quali ci sono. Se vuoi seriamente dedicarsi a webmastering dedichi 2-3 setimane ai linguaggi CSS e HTMl   e potrai fare qualsiasi  cambiamento al  tuo tema Joomla o qualsiasi altro sito. Altrimenti ogni volta che dovresti cambire qualcosa spenderai un saco di tempo per cercare informazioni su web. Potrai transformare qualsiasi tua idea in un risulto visivo.  Modificare template  Joomla non è difficile!

Guarda anche come creare una nuova posizione per un modulo in un tema Joomla. Clica QUI!

Letto 1685 volte