Questo sito utilizza i cookie per personalizzare i contenuti e gli annunci (Google AdSense), fornire le funzioni dei social media (condivisione degli articoli) e analizzare il traffico (Google Analytics). Inoltre fornisce informazioni sul modo in cui utilizzi il sito alle agenzie pubblicitarie, agli istituti che eseguono analisi dei dati web e ai social media miei partner (Google). Il proseguimento nella navigazione implica un tacito assenso all'utilizzo dei cookies. Se non sei d'accordo sull'utilizzo, ti invito ad allontanarti da questo sito. Visualizza i dettagli.

Venerdì 9 Dicembre 2016

Valutazione attuale: 5 / 5

Stella attivaStella attivaStella attivaStella attivaStella attiva
 

Con le nuove versioni di Joomla i nostri siti hanno un comportamento di tipo "responsive", ovvero cambiano aspetto in base alla risoluzione dello schermo. In questo modo non avremo necessità di cambiare template per i dispositivi mobile, come si faceva prima, ma un solo template è ottimizzato per tutti i device. Però potrei voler non visualizzare alcuni moduli su determinati dispositivi. Come posso fare?

Iniziamo col capire come funziona un template rsponsive.

Mentre prima occorreva far capire al server web quale browser e quale versione  stessi usando per la navigazione, ora basta impostare delle dimensioni.

E poi dicono che le dimensioni non contano! ;-)

Più è bassa la risoluzione, più è piccolo il display che sto usando, quindi probabilmente sto navigando con un cellulare.

Viceversa, più è altra la risoluzione, più è grande il display, quindi starò usando un computer desktop. 

Normalmente il range delle dimensioni è preimpostato nella configurazione del nostro template, nella gestione dei template potremmo infatti vedere i "paletti" impostati per le risoluzioni:

 

superiore a 768px sto usando un desktop o un tablet in orizzontale

da 767px a 481px sto usando un tablet in verticale

sotto i 480px sto usando un cellulare.

Detto questo è facile capire che chi ha scritto per noi il nostro template ha studiato un sistema che in base alla risoluzione applica automaticamente uno stile ad un oggetto, in questo modo vediamo i menù trasformarsi in menù a tendina, le immagini rimpicciolirsi, i tasti cambiare d'aspetto.

Me se volessi proprio far sparire un modulo in una determinata visualizzazione?

Magari uno slider flash che mi infastidisce se navigo sulla homepage con un cellulare, o un banner ottimizzato per mobile che non deve esser visibile sulla versione desktop?

Basta agire sui fogli di stile! Sempre chi ha scritto per noi il nostro template a messo a disposizione determinati stili che fanno sparire i moduli in determinate visualizzazioni. 

Per applicare questi stili occorre impostarli nella gestione del modulo, nell'opzione suffisso classe css modulo.

Gli stili disponibili sono:

hidden-desktop per nascondere in visualizzazione pc

hidden-tablet per nascondere in visualizzazione tablet

hidden-tablet-landscape per nascondere in visualizzazione tablet orizzontale

hidden-tablet-portrait per nascondere in visualizzazione teblet verticale

hidden-mobile o hidden-phone per nascondere in visualizzazione telefono

N.B. a volte è necessario inserire uno spazio bianco davanti al nome della classe perchè alcuni moduli non lo inseriscono da soli. Per applicare più stili css al modulo basta scriverli nel campo separati dal uno spazio.