PASW: Joomla per la scuola e le PA
Il sito della community Joomla! di Porte Aperte Sul Web

Per poter aggiungere un bordo agli articoli è possibile effettuare un override del CSS di Zhong utilizzando il codice che riportiamo sotto.

.item-page {
border: 3px solid #DEDBDB;
border-radius: 4px;
margin-top: 2px;
margin-bottom: 2px;
padding: 4px;
}

Esempio del risultato nell'immagine postata da Claudio Rosselli.

Per consentire una migliore fruibilità delle tabelle dell'albo online da smartphone, suggeriamo di inserire nel template la seguente stringa di personalizzazione:

@media screen and (max-width: 925px) {
#admin_form, #chronoform-atti_vista {
overflow:auto;
}
}

oppure

#admin_form, #chronoform-atti_vista {
overflow:auto;
}

Per fare in modo che oggetti Google (presentazioni, calendari, eccetera) possano essere responsive può essere utilizzata la seguente personalizzazione del template:

.responsiveCal {

position: relative; padding-bottom: 75%; height: 0; overflow: hidden;

}

.responsiveCal iframe {

position: absolute; top:0; left: 0; width: 100%; height: 100%;

}

Inserire nel codice di embed dell'articolo:

<div class="responsiveCal">stringa di embed rilasciata da google</div>

Per poter aggiungere un bordo agli articoli archiviati è possibile effettuare un override del CSS di Zhong utilizzando il codice che riportiamo sotto.

#archive-items [class*="row"] {
border: 3px solid #DEDBDB;
border-radius: 4px;
margin-top: 2px;
margin-bottom: 2px;
padding: 4px;
}

Esempio del risultato nell'immagine postata da Claudio Rosselli che ha richiesto a Salvatore Deias l'implementazione del codice.

Altro codice per la personalizzazione di Zhong! Tramite la personalizzazione dal pannello di amministrazione del template, questo codice consente di assegnare la stessa dimensione ai bordi degli articoli nella home page.

#zf__html#zf--body.mobile-layout .cols-1,
#zf__html #zf--body.mobile-layout .column-1 {
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}

Riassumiamo in questo articolo le indicazioni e le soluzioni per configurare al meglio il template

Sottomenù

Avviso importante per chi usa Zhong 4, a proposito di menù e sottomenù, uno dei piu' grossi cambiamenti portati dalla versione 4:
le voci di menu' "padre" servono solamente come bottone per mostrare le sottovoci, non possono quindi essere cliccate per attivare un link ad un'altra pagina. Queste voci quindi devono essere pensate solamente come descrizione per raggruppare altri link. Nel caso del pacchetto si consiglia di aggiungere un ulteriore sottomenù come.. primo tra i sotto-menù, riguardo la voce di menu: in pratica non fa differenza perche' uno script JS trasforma quella voce in bottone, e quindi puo' essere di qualsiasi tipo. Esiste pero' un problema se l'utente ha JavaScript disattivato (cosa molto molto rara, ma comunque possibile), quindi l'opzione che si consiglia e' di impostare la voce di menu a "Collegamento esterno" e impostare il link esterno a "#".

L'autore del template consapevolmente al fatto che questo cambiamento avrebbe portato dei problemi facendo l'upgrade da versioni precedenti, ha comunque deciso di mantenere questo comportamento in quanto ritenuto la soluzione migliore in termini di usabilita' per dispositivi touch e screenreader.  Per chi volesse al seguente link le scelte con le motivazioni:
http://www.accessibletemplate.com/news/187-a-new-approach

Breadcrumbs 1 (menù a briciole)

Correzione bug visualizzazione modalità mobile, verrà rilasciato un fix per la prossima release minore, per il momento si può risolvere il problema aggiungendo il seguente codice a "Your Custom CSS" (tab "Advanced Options"):

#zf--guest-view--system-messages {
    clear: both;
}

Breadcrumbs 2 (menù a briciole non riporta il giusto percorso)

La soluzione è quella di disabilitare la cache per il modulo Breadcrumbs, recarsi in Estensioni-Moduli selezionare il modulo e nella cartella avanzate selezionare alla voce caching No caching

Modificare la dicitura "Risorse aggiuntive" (attenzione operazione delicata)

Zaniol scrive
E' possibile tramite un override, purtroppo pero' in questo caso entrambi gli elementi utilizzano la stessa variabile di linguaggio e quindi sarebbe necessario un ovverride dell'intera view e non della variabile di linguaggio. E questo tipo di override e' parecchio macchinoso quindi non lo consiglio, a meno che la richiesta non sia davvero importante, 
un'alternativa un po' "sporca" e' quella di fare un'override via JS.  Si dovrebbe attivare, sotto la tab "Advanced Options", l'opzione "override.js", poi provare ad aggiungere il codice sotto all'interno del file   /zf/custom/overrides/assets/js/overrides.js nel template zhong.:

jQuery('html[lang="it"] #zf--aside-left-expand-button-text').text('Menù di sinistra');
jQuery('html[lang="it"] #zf--aside-right-expand-button-text').text('Menù di destra');

Adattare la larghezza del sito

E' stato eliminato il Resize della pagina,

si puo' provare a cambiare le opzioni "Site container max-width" sotto la tab "Main Options", e le opzioni sotto la sezione "SITE LAYOUT" (tab "Custom Style & Colors").

Modificare dimensione pulsanti e/o font menù aside-left, aside-right

Attenzione: per entrambi i codici CSS di override cambiare il valore "90" (per questioni di accessibilità mantenere l'utilizzo della percentuale e non utilizzare valori in px o pt)

Pulsanti

.zf--toolbox-button {
    font-size: 90%;
}

Font

#zf--main-body .zf--menu-container {
    font-size: 90%;
}

Inserire bordo articoli nella home

#zf--body .blog [class*="leading-"],
#zf--body .blog [class*="column"],
#zf--body .blog-featured [class*="leading-"],
#zf--body .blog-featured [class*="column"] {
border: 3px solid #DEDBDB;
border-radius: 4px;
margin-top: 2px;
margin-bottom: 2px;
padding: 4px;
}

Cambiare il colore dei menù

Il colore dei menù può essere cambiato utilizzando le opzioni nella tabella "Custom Style & Colors" , sezione "Main Menù"

Contenuto di subtitle su due righe

Inserisci il testo in subtitle, poi in "Adavanced Options" inserisci la seguente regola:

#zf--site-subtitle {
width: 80%;
}

aumentare/diminuire il valore di width sino a quando il testo va a capo nel punto desiderato

Personalizzare Enable Custom Head Tags

In Zhong 4.0 non è più possibile personalizzare "Enable Custom Head Tags", la funzione che permetteva la personalizzazione dei tags per ottenere, in caso di condivisione sui social, un'anteprima fissa degli articoli (come ad esempio, il logo della scuola)In Zhong 4.0 non è più possibile personalizzare "Enable Custom Head Tags", la funzione che permetteva la personalizzazione dei tags per ottenere, in caso di condivisione sui social, un'anteprima fissa degli articoli (come ad esempio, il logo della scuola).

Nella versione 4 si puo' aggiungere tag custom nell'head usando l'opzione "Custom code before </head>" che si trova sotto la tab "Advanced Options" e, per l'esempio precedente, incollare questo codice all'interno della textarea:
<meta property="og:image" content="url dove si trova immagine"/>

Bug main-menù

se si disattiva il controllo del carattere (icona a destra) e il main-menù è centrato alla scomparsa dell'icona il main-menù (menù orizzontale) si posiziona a sinistra, in pratica in mancanza di icone c'è un bug che si risolve inserendo in "Your Custom CSS":

#zf--main-menu {
    display: block;
}

Il codice va aggiunto solo in questo caso, altrimenti potrebbe dare problemi se i bottoni cerca, login o stile sono presenti.

Riportiamo sotto alcuni codici suggeriti da Salvatore Deias all'interno del gruppo Facebook "Joomla! per la scuola e le PA" che consentono di modificare le dimensioni dei caratteri nel titolo degli articoli e di rimuovere i bordi dagli articoli in homepage.
I codici possono essere inseriti direttamente nel pannello di amministrazione del template, mediante la tab "Your Custom CSS".

Modificare la dimensione del titolo degli articoli in home page:
#zf--main-article .page-header h2 {
font-size: 180%; 
}

Variare la percentuale per ridurre le dimensioni del font

Modificare la dimensione del titolo degli articoli:
#zf--guest-view--main-article h2.item-title {
font-size: 160%;
}

Bordi negli articoli della homepage

body.default-graphic-mode .blog [class*="leading-"],
body.default-graphic-mode .blog [class*="column"],
body.default-graphic-mode .blog-featured [class*="leading-"],
body.default-graphic-mode .blog-featured [class*="column"] {
border: 3px solid #DEDBDB;
border-radius: 4px;
margin-top: 2px;
margin-bottom: 2px;
padding: 4px;
}

/*lista categorie*/
.cat-children h3 {
font-size: 140%;
}

Modifica del colore del footer: variare il codice esadecimale in funzione del colore desiderato

#zf--footer-content--skin {
background-color: #FF4571;
}