eshiol.it

Componente per la visualizzazione di sezioni espandibili e richiudibili al click.

Il Web Toolkit definisce 4 tipologie di Alert: Error, Warning, Success e Info. L'inserimento può avvenire tramite codice HTML oppure utilizzando l'apposito pulsante nell'editor TinyMCE.

Il Web Toolkit definisce 4 tipologie di Callout: Must, Should, Could, Example. L'inserimento può avvenire tramite codice HTML oppure tramite l'apposito pulsante nell'editor TinyMCE.

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

Il Web Toolkit mette a disposizione il componente Dialog per la visualizzazione di finestre modali per mostrare contenuti in evidenza, notifiche agli utenti, o contenuti personalizzati.

Componente di navigazione basato su tiles (piastrelle)

Nella versione base le tiles vengono disposte 3 per riga. In modalità mobile vengono disposte su una unica colonna.

Si tratta di un menu ad un solo livello associato ad un modulo con layout Entrypoint.

Di default il colore della singola tile è u-background-compl-80 e dipende dal tema scelto. Il colore può essere modificato intervenendo su Classe CSS del link della singola voce di menu.

L'elenco dei colori disponibili per il background è consultabile qui. Background

La variante multilivello permette di disporre più tiles in colonna sulla stessa riga.

Bisogna strutturarlo con voci di menu di sistema “separatore” che permettono di distribuire gli Entrypoint su più colonne separate (nell'esempio tre colonne differenti).

Per rendere il nostro Entrypoint più accattivante aggiungiamo qualche dettaglio nella formattazione.

Possiamo modificare dimensione e colore del carattere agendo sul parametro Classe CSS del link della singola voce di menu.

Anche nel caso delle voci entrypoint è possibile aggiunge una icone agendo sul campo Classe Immagine della singola voce di menu.

L'elenco delle icone disponibili è consultabile qui: Icone

Nel caso si voglia dare particolare importanza ad una voce di menu è possibile associare una immagine. Siccome di default l'immagine è posta a sinistra del titolo del link, tramite il parametro Classe CSS del link è possibile modificarne la formattazione.

li:u-textCenter allinea immagine e testo al centro mentre li:u-imageTitleNoWrap posizione il titolo su una sola linea.

Ultimo dettaglio la possibilità di formattare le singole colonne affinché occupino tutto lo spazio disponibile.

Il risultato può essere ottenuto lavorando sulle singole voci di menu oppure aggiungendo la classe u-flex al parametro Suffisso classe menu del modulo

Il Web Toolkit definisce il componente Leads come una lista orizzontale di link; generalmente è usato per presentare una serie di link utili. Nel template ItaliaPA ai menù "leads" è assegnata una posizione specifica, posta in fondo alla pagina, prima del footer.

Nella versione base il lead è costituito da una lista orizzontale di link testuali.

Si tratta di un menu ad un solo livello associato ad un modulo con layout Lead.

Le singole voci sono link testuali.

Una versione un po' più accattivante può essere realizzata utilizzando immagini al posto dei testi./p>

Anche in questo caso le voci di menu sono tutte simili e semplici da creare

Basta inserire l'Immagine menu e disabilitare la voce Aggiungi titolo menu.

Il modulo fin qui creato è anche responsive, ma bisogna fare molta attenzione.

Come si può vedere, le dimensioni eccessive delle immagini "rompono" la visualizzazione responsive su dispositivi mobile. Serve quindi un piccolo accorgimento per dire al modulo di ridimensionare le immagini nel caso siano troppo grandi. 

In questo caso basta aggiungere il suffisso classe CSS modulo Arrange-sizeFill, come mostrato in figura.

È 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 Cookiebar visualizza il banner informativo sull'utilizzo dei cookie all'interno del sito web.

L'inserimento dei componenti previsti da it web toolkit, tra i quali accordion, alert, callout, sottoforma di codice HTML, è una operazione abbastanza laboriosa e complessa. Questo potrebbe scoraggiare o impegnare oltre misura chi deve creare e aggiornare i contenuti del sito web. Per semplificare l'inserimento dei contenuti ci viene in aiuto plugin System - ItaliaPA Toolbar for TinyMCE, la toolbar Joomla! specifica per TinyMCE.

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

Il Modulo Carousel entra nella fase beta di sviluppo. Si tratta di una versione completamente riprogettata.

Rilasciata la prima release stabile del Template ItaliaPA 3.10.

Rilasciato Template ItaliaPA 3.10.1 Beta. Si tratta di una versione beta, che aggiunge nuove funzionalità, miglioramenti nella visualizzazione e correzione di piccoli errori.

Rilasciata la undicesima alpha release del Template ItaliaPA 3.8. Si tratta di un rilascio di manutenzione che corregge alcuni bug, include miglioramenti e nuove funzionalità.

Rilasciata la dodicesima alpha release del Template ItaliaPA 3.8. Si tratta di un rilascio di manutenzione che corregge alcuni bug, include miglioramenti e nuove funzionalità.

Rilasciata la tredicesima alpha release del Template ItaliaPA 3.8. Si tratta di un rilascio di manutenzione che corregge alcuni bug, include miglioramenti e nuove funzionalità.

Rilasciata la quattordicesima alpha release del Template ItaliaPA 3.8. Si tratta di un rilascio di manutenzione orientato alla accessibilità, include miglioramenti, nuove funzionalità e la correzione di alcuni bug.