Menu dependent item - tutorial

dependent menu itemQuante volte abbiamo avuto la necessità di dare un aspetto particolare a una determinata pagina del nostro sito realizzato con Joomla? Un titolo pagina, un font, una dimensione, un particolare grafico, ecc, diversi dagli altri per una determinata categoria o un determinato articolo. Con questo modulo potremo associare rapidamente un foglio di stile a una voce di menu. Il modulo c'è sia per la versione 2.5 che per la versione 1.5 di Joomla!


Il modulo si chiama Menu Dependent Item e si installa come al solito dal pannello di amministrazione di Joomla! da Estensioni/Gestione Estensioni/ Installa selezionando con Sfoglia... il file zippato nel nostro computer e cliccando infine su Carica & Installa.

Cerchiamo adesso in Estensioni>Gestione moduli il modulo Menu Dependent Item ed apriamolo.
Il suo settaggio potrebbe sembrare a prima vista un poco complesso ad un neofita ma è invece assai semplice se seguite queste indicazioni. Dobbiamo intanto stabilire se vogliamo utilizzare questo modulo per pubblicare una immagine, per esempio l'immagine dell'header, o per caricare un foglio di stile e quindi per modificare per esempio il colore di un titolo.

Associare una immagine

Se dovete semplicemente cambiare una immagine di sfondo in qualsiasi punto del vostro template, io consiglio di utilizzare quest'altro modulo che abbiamo visto qui e che ci consente di inserire immagini di sfondo in ogni div del template mentre con il modulo che stiamo esaminando l'immagine verrà pubblicata nella posizione modulo in cui pubblicheremo il modulo stesso. Comunque si può fare anche con questo modulo.

Andiamo quindi in Opzioni di base e impostiamo come segue:

- in Module Class Suffix lasciate in bianco. Si tratta dell'opzione presente nei moduli per poterli personalizzare, che lo sviluppatore ha lasciato qui quasi solo per rispetto dello standard;

- in File Type scegliamo Image;

- in Include Menu Name lasciamo impostato su Si;

- in Name Files Like lasciamo impostato su ItemID che è preferibile e più sicuro dell'Alias.

- in Folder lasciamo la cartella images se metteremo nella cartella images principale di Joomla le nostre immagini, oppure inseriamo il percorso diverso. Per esempio se le vogliamo mettere nella cartella images del template scriveremo templates/nome_tuo_template/images ;

- in File Prefix scriviamo il nome del prefisso che useremo per le nostre immagini. Per esempio mie_immagini_ ;

- In Default File potremmo scrivere il nome che daremo ad una immagine che verrà caricata di default se non vengono trovate immagini con il prefisso che abbiamo stabilito sopra. Potete intanto lasciare in bianco.

Adesso impostiamo la parte relativa a Advanced Image Options

- in Image Extension scriviamo l'estensione delle nostre immagini che possono essere jpg, png o gif e che se intendiamo usare tutte possiamo scrivere nel box distanziandole di uno spazio in questo modo: jpg png gif (senza il puntino davanti) ;

- in Image Alt Text scriveremo il testo descrittivo dell'immagine, indispensabile per ottenere la validazione w3c;

- in Image Link potremo associare un link all'immagine;

- In Image Size potremo scegliere nel menu a tendina se attribuire le dimensioni all'immagine, se le stesse saranno quelle originali, oppure quelle massime od assolute, e nei box sottostanti potremo scrivere i valori di larghezza ed altezza. Possiamo lasciare tutto in bianco se mettiamo una immagine di dimensioni adeguate a quelle della posizione del modulo dove la vogliamo far apparire;

Abbiamo terminato con le impostazioni. Adesso prepariamo le immagini che vogliamo far apparire associate a una determinata voce di menu. Per esempio se vogliamo che un'immagine appaia in tutte le pagine linkate dalle voci del mainmenu la chiameremo mie_immagini_mainmenu.jpg (o .png o .gif). Se invece la vogliamo associare solo ad una voce di menu la chiameremo mie_immagini_101.jpg (o .png o .gif). Il numero 101 corrisponderà all'itemID della voce di menu alla quale vogliamo associare l'immagine. Va da sé che se cambiate tale numero con l'itemID di un'altra voce di menu l'immagine apparirà associata a quella voce di menu.
Ma dove appariranno queste immagini? Semplice: appariranno nella posizione modulo dove abbiamo pubblicato il modulo di cui stiamo parlando: il Menu Dependent Item. Che potrà essere pubblicato in tutte le pagine, ma apparirà solo nella pagine con itemID uguale a quello di una immagine. (Edit: attenzione che se il modulo viene pubblicato in tutte le pagine in una posizione collassabile potrebbe provocare il mancato collassamento, e quindi l'apparizione di uno spazio vuoto, nelle pagine dove il modulo non appare. Forse è meglio allora pubblicarlo solo nelle pagine dove deve apparire effettivamente).
Se devo esser sincero il modo in cui questo modulo associa le immagini non mi ha entusiasmato granché, perché, se le voglio far apparire in un determinato punto, devo predisporre una posizione modulo. A questo punto potrei quindi anche pubblicare una immagine in un modulo di tipo html personalizzato ed associare questo a una o più voci di menu, con un lavoro non molto diverso, e persino meno laborioso, che non utilizzando questo modulo.

Ma dove il modulo Menu Dependent Item è veramente straordinario è nell'associazione di uno o più fogli di stile, come vedremo adesso.

Associare un foglio di stile

In Opzioni di base:

- File Type sceglieremo stavolta Style Sheet;

- lasciamo Include Menu Name sempre su SI;

- lasciamo anche Menu Name Like su ItemID;

- su Folder impostiamo il percorso dove collocheremo i nostri fogli di style, in modo del tutto analogo a quanto fatto per le immagini;

- in File Prefix metteremo il nome del nostro prefisso, ad esempio mio_css_ ;

- in Default File valgono le stesse considerazioni fatte per le immagini e lo possiamo lasciare vuoto.

Adesso impostiamo la parte relativa a Advanced CSS Options

- in CSS Extension lasciamo scritto css;

- in CSS Media Type lasciamo impostato su All Media Types (potremo, se ci serve, anche impostarlo solo per la versione stampabile o solo per lo schermo);


Abbiamo terminato con le impostazioni e andiamo a realizzare il nostro css con le regole che vogliamo applicare a una o più pagine del nostro sito.


Creare il foglio di stile

mdi1Con un qualsiasi editor di testo (blocco note, notepad++, PSPad, non con word per carità!) create un foglio di stile con dentro le regole da applicare. Un foglio di stile non è altro che un semplice foglio di testo salvato in formato .css . Per esempio la regola che nel template di default modifica il titolo di un articolo potrebbe essere questa:
#main h2 { color:#F79009; font-size: 2.5em;}. Una volta create queste regole andiamo a nominare il file nel modo seguente, osservando nella gestione menu i nomi degli stessi e gli ItemID delle singole voci:

- se vogliamo applicare le regole css a tutte le voci del Menu Principale chiameremo il file mio_css_mainmenu.css . Scriveremo cioè dopo il prefisso il nome che abbiamo messo in Tipo menu;

- se vogliamo applicare le regole css a una sola voce di menu chiameremo il file mio_css_ItemID.css, sostituendo ad ItemID il valore numerico dell'ID della voce di menu interessata;

mdi2- per esempio chiameremo il file mio_css_1.css per applicarlo solo alla voce Home, oppure mio_css_41.css per applicarlo alla voce FAQ. In questo modo anche tutte le sottovoci erediteranno queste regole. Se non ci garba ciò potremo di nuovo applicare regole diverse creando un altro foglio di stile per quelle. per esempio per applicarle alla pagina FAQ>Page2>Page2.1 chiameremo il foglio di stile mio_css_56.css.

Pubblicare il modulo

Non ci dobbiamo scordare di pubblicare il modulo in una posizione esistente del nostro template e di pubblicarlo in tutte le pagine.

A questo punto il modulo avrà due comportamenti:

- apparirà nella posizione modulo in cui lo abbiamo messo quando gli abbiamo assegnato la funzione image in File Type solo nella pagina con ItemID corrispondente al nome dell'immagine che troverà. Quindi un unico modulo può far apparire immagini diverse per ciascuna voce di menu;

- mentre quando abbiamo assegnato la funzione CSS in File Type il modulo non apparirà mai ma assocerà a ciascuna voce di menu il file css che ha nel suo nome quel determinato ItemID;

E se avessimo bisogno di avere immagini diverse in diverse zone del template e contemporaneamente volessimo applicare anche regole css a diverse pagine?
Nessun problema. Il modulo Menu Dependent Item può essere duplicato a volontà ed applicato a quante voci di menu vogliamo.

Qui potete vedere una demo del modulo. Un ringraziamento a Conti Web che me lo ha segnalato.

Menu Dependent Item per Joomla 1.5

Menu Dependent Item per Joomla 2.5

 

 

babbo natale