eshiol.it

L'accesso al profilo utente, o più in generale l'accesso ad un'area riservata all'utente, è possibile mediante un semplice sottomenu da inserire nel megamenu.

Rilasciata la prima alpha release del modulo Carousel per Joomla! basato su Web Toolkit Styleguide

Utilizzare un template responsive di per sé non rende tale un sito web. Oltre al template è importante che anche i contenuti siano responsive. Questo semplice snippet css permette di rendere le immagini presenti nel corpo degli articoli responsive.

È possibile realizzare un megamenu in stile design scuole utilizzando ItaliaPA e it Web Toolkit?

Si, ed è anche abbastanza semplice. Basta seguire questa guida passo passo.

Tutto ha un inizio

Ma andiamo con ordine. creiamo un un classico megamenu in stile ItaliaPA con le voci di esempio di design scuole.

Impostiamo il tema scuola e creiamo un menu in posizione mainmenu.

Separati è meglio

Procediamo separando il menu in due, la prima parte con le voci di menu principali sulla sinistra, e la seconda parte con le voci di menu secondarie (argomenti) allineate a destra.

Per suddividere il menu basta aggiungere la classe link "li:u-flexExpandLeft" alla prima voce di menu che vogliamo sulla destra.

Un po' di colore

Il prossimo passo è quello di modificare il colore delle voci di menu.

Possiamo utilizzare le classi colore messe a disposizione del web toolkit oppure caricarne di nuove personalizzando il template.

Nel caso si decida di personalizzare il template, ecco un estratto del file user.css con i colori dello stile design scuole:

.u-color-redbrown {
 color: #D1344C !important;
}
.u-color-greendark {
 color: #0E8A5F !important;
}
.u-color-purplelight {
 color: #B21DD0 !important;
}
.u-color-bluelectric {
 color: #0D00FF !important;
}
.u-color-graydark {
 color: #455b71 !important;
}

Una soluzione alternativa

Se il menu non è proprio come ce lo aspettavamo, nessuna paura. Un piccolo bug non permette una corretta formattazione se si utilizza la classe link.

In attesa che la PR#442 sia resa disponibile in un prossimo aggiornamento, è possibile risolvere con un piccolo workaround. Basta aggiungere la classe link "li:Megamenu-item" a tutte le voci di menu.

Anche le dimensioni hanno la loro importanza

Ci siamo quasi. Aggiungiamo le classi u-textWeight-400 e u-text-xs ai link Argomento 1, Argomento 2 e Argomento 3 per avere esattamente il menu come desiderato.. oppure no?

Il web Toolkit forza la dimensione dei link delle voci del megamenu. Per superare questo vincolo bisogna aggiungere le seguenti righe al file user.css

.Megamenu-item > a.u-textWeight-400 {
 font-weight: 400 !important;
}
.Megamenu-item > a.u-text-xs {
 font-size: 1.6rem !important;
}

Completiamo impostando il padding, sempre nel file user.css, per avere lo stesso distanziamento delle voci di menu della demo di design scuole:

.Megamenu-item > a {
 padding: 10px 17px 10px 17px;
} 

Conclusioni

La procedura per la creazione di un megamenu in stile design scuole è abbastanza semplice anche se richiede un po' di lavoro.

Di seguito il dettaglio della configurazione delle voci di menu

Scuola

u-color-redbrown

Servizi

u-color-greendark

Novità

u-color-purplelight

Didattica

u-color-bluelectric

Argomento 1

u-flexExpandLeft u-textWeight-400 u-text-xs u-color-graydark

Argomento 2

u-textWeight-400 u-text-xs u-color-graydark

Argomento 3

u-textWeight-400 u-text-xs u-color-graydark

Tutti gli argomenti...

u-color-graydark

Come accennato nel paragrafo Una soluzione alternativa, potrebbe essere necessario aggiungere la classe link li:Megamenu-item a tutte le voci di menu.

Di seguito il dettaglio delle classi css da inserire nel file user.css

.u-color-redbrown {
 color: #D1344C !important;
}
.u-color-greendark {
 color: #0E8A5F !important;
}
.u-color-purplelight {
 color: #B21DD0 !important;
}
.u-color-bluelectric {
 color: #0D00FF !important;
}
.u-color-graydark {
 color: #455b71 !important;
}
.Megamenu-item > a.u-textWeight-400 {
 font-weight: 400 !important;
}
.Megamenu-item > a.u-text-xs {
 font-size: 1.6rem !important;
}
.Megamenu-item > a {
 padding: 10px 17px 10px 17px;
}

Il modulo mostra una lista dei mesi del calendario contenenti articoli archiviati. Dopo il cambiamento dello stato di un articolo ad archiviato, viene automaticamente generata questa lista.

Richiede template ItaliaPA 3.8.0.13

Il modulo visualizza una lista di articoli correlati agli articoli che stiamo leggendo. Queste relazioni vengono stabilite grazie alle parole chiave presenti nei Metadata.
Il modulo ricerca le parole chiave inserite nei metadata dell'articolo e visualizza tutti gli altri articoli che hanno una di queste parole chiave nei Metadata. Per esempio, possiamo avere un articolo intitolato "Joomla italiano" e un altro con titolo "Uscito Joomla italiano". Se inseriamo la parola chiave "italiano" nei Metadata di entrambi gli articoli, quando il modulo Articoli Correlati verrà aperto con l'articolo dal titol "Joomla Italiano" verrà messo nella lista anche "Uscito Joomla italiano" e viceversa.

Richiede template ItaliaPA 3.8.0.13

Il modulo mostra la lista degli articoli attualmente pubblicati che hanno il maggior numero di visite.

Richiede template ItaliaPA 3.8.0.13

Il modulo mostra la lista degli articoli pubblicati recentemente che sono ancora visibili.

Richiede template ItaliaPA 3.8.0.13

Il modulo visualizza un campo di ricerca.

Richiede template ItaliaPA 3.8.0.13

Il modulo Chi è online mostra il numero di utenti anonimi (es. visitatori) ed utenti registrati (quelli connessi) che stanno visitando il sito.

Richiede template ItaliaPA 3.8.0.13

Il modulo Cookiebar visualizza il banner informativo sull'utilizzo dei cookie all'interno del sito web.

Il modulo visualizza una lista di articoli appartenenti a una o più categorie.

Richiede template ItaliaPA 3.8.0.13

Il modulo visualizza una lista di categorie da una categoria principale.

Questo modulo mostra le informazioni di Copyright di Joomla!.

Il modulo Smart Syndication (Generatore Feed) crea dei feed nelle pagine dove viene attivato e mostrato il modulo.

In questa pagina di esempio è posto nelle posizioni: owner, languages, socials, footermenu.

Richiede Template ItaliaPA 3.8.0.13

Il modulo Smart Syndication (Generatore Feed) crea dei feed nelle pagine dove viene attivato e mostrato il modulo.

In questa pagina di esempio è posto nelle posizioni: owner, languages, socials, footermenu.

Richiede Template ItaliaPA 3.8.0.13

joomaQuesto modulo mostra un'immagine casuale di una determinata cartella.

Il modulo Informazioni di sistema visualizza le informazioni sul server, le statistiche sugli utenti del sito e il numero dei contenuti nel database.

Questo modulo visualizza la lista delle Lingue Contenuto disponibili (definite e pubblicate nel tab Contenuti della Gestione Lingua) per poterle intercambiare tra di loro e usare Joomla! come un sito multilingua. 
-- Il plugin 'System - Language Filter' dev'essere abilitato. --
Quando si cambia una lingua e se la voce di menu che visualizza la pagina non è associata ad un'altra voce di menu, il modulo redireziona alla Home page definita per la lingua scelta. 
Altrimenti, se il parametro è impostato nel plugin Language Filter, redirezionerà alla voce di menu associata alla lingua scelta. Quindi, la navigazione sarà quella definita per la lingua.
Se il plugin 'System - Language Filter' non è abilitato, potrebbero esserci dei risultati non desiderati.
Metodo:
1. Apri il tab Contenuti in Gestione lingua ed assicurati che le lingue che vuoi utilizzare nei contenuti siano pubblicate e abbiano un prefisso per gli URL e un prefisso per l'immagine utilizzata nel modulo.
2. Crea una Home page per ciascuna lingua pubblicata assegnando una lingua alla voce di menu e definendola come Home page predefinita. 
3. Quindi, puoi assegnare una lingua a qualsiasi articolo, categoria, modulo, newsfeed, link web in Joomla.
4. Assicurati che il modulo sia pubblicato e che il plugin sia abilitato. 
5. Quando utilizzi voci di menu associate, assicurati che il modulo venga visualizzato nelle pagine corrispondenti. 
6. La visualizzazione delle bandiere o dei nomi è definita dall'ordinamento in Gestione lingua - Lingue contenuti.

Se questo modulo è pubblicato, è consigliato pubblicare il modulo amministrativo Stato multilingua.

Il modulo è fornito con due layout: default e header. Il primo, default, può essere usato