Appunti su Joomla

La visualizzazione dei template con Joomla è basata, come quasi tutti i Content Management System, sullo utilizzo di template specifici. Disegnare da zero un template per Joomla non è facile per via delle rigide regole da seguire; ovviamente in cambio questa metodologia ci permette di modificare in ogni momento l’aspetto del nostro sito. Molto comune la pratica di partire da un template esistente, in genere il classico “rhuk_milkyway”. Per meglio studiare HTML e CSS dei siti Firefox e le sue estensioni sono strumenti insostituibili.

Dopo aver installato Firefox attraverso il menù Strumenti/Componenti aggiuntivi istalliamo l’estensione “Web Developer”.

Vediamo, come esempio, come utilizzare la web developer toolbar per trovare dove si trova il logo del template “rhuk_milkyway”. Una volta abilitata la Web Developer toolbar abilitare la visualizzazione dei nomi del componenti del file CSS (menu CSS/Visualizza informazioni sullo stile).

Muovendosi all’interno della pagina è possibile visualizzare i nomi e le classi CSS (id= class=)presenti su qualunque pagina Web.

Cliccando sul logo quando evidenziato si vede il foglio di stile corrispondente.

Leggendo il foglio di stile si vede  che il logo, piuttosto che essere definito come immagine, è lo sfondo di un DIV che trova nell’header. Nello foglio di stile è anche indicato il percorso per raggiungere l’immagine:

background-image: url(../images/mw_joomla_logo.png);

Nei Css i path (percorsi) sono relativi al foglio di stile e quindi visto che il file CSS si trova in

http://10.1.1.43/templates/rhuk_milkyway/css/template.css

Si deduce che l’immagine si trova in

http://10.1.1.43/templates/rhuk_milkyway/images/mw_joomla_logo.png

Per cambiare l’immagine del logo ci sono quindi varie possibilità:

• Sostituire l’immagine nel path specificato
• Cambiare il CSS e impostare il path dove si trova un’altra immagine
• Modificare il foglio di stile direttamente ed invece del DIV impostare una immagine con il tag <IMG />