Joomla.it Forum
Joomla! 3 => Joomla! 3 => : Antonio Tripodi 16 May 2017, 10:44:31
-
Salve a tutti, utilizzo at_grafic come template e ho creato vari stili in base alle esigenze del sito. Il template comprende Helix 3 che mi consente di personalizzare il template a mio piacimento. Gli stili creati vanno bene per la visualizzazione da desktop ma nei mobile vorrei che l'ordine di visualizzazione delle colonne fosse diverso. Su desktop le colonne sono in questo ordine 1.left 2.component 3.right, su mobile voglio che la prima colonna che si veda sia la component dove è presente l'articolo. sapete indicarmi come ordinare le colonne su mobile? In allegato lo screen-shot del settaggio della colonna che helix mi da.
Grazie
-
Nessuno mi può aiutare?
-
Duplichi i moduli e li fai visualizzare nella posizione che ti interessa solo nei media desiderati.
-
Duplichi i moduli e li fai visualizzare nella posizione che ti interessa solo nei media desiderati.
Geniale! ;)
-
Se ho capito bene devo duplicare i moduli ed inserirli in colonne che vengono visualizzati solo su mobile.
Ad esempio nel mio caso ho 1.left (devo spuntare l'opzione nascondi mobile) 2. component, 3 right e poi aggiungere un'altra riga con una nuova posizione ad esempio posizione1 visibile solo su mobile sulla quale inserisco il modulo duplicato. In questo modo in mobile ho prima component poi right ed infine posizione1.
é una possibile soluzione, non quello che speravo ma comunque da considerare.
Grazie mille
-
Devi duplicare solo i moduli e non anche le pisizioni che restano le stesse. Poi in ogni modulo decidi se pubblicarlo in base al device. Se il template non prevede assegnazione in base al device puoi sempre agire da suffisso classe ed agire da css.
-
Se il template non prevede assegnazione in base al device puoi sempre agire da suffisso classe ed agire da css.
Helix 3 lo permette
-
Si ma il consiglio può essere applicato in generale a prescindere dal template, perciò ho specificato. :)
-
Si ma il consiglio può essere applicato in generale a prescindere dal template, perciò ho specificato. :)
Ottima osservazione
-
Adesso mi è più chiaro, posso scegliere se far vedere o nascondere un modulo a secondo dei media. Per poter nascondere il modulo, ad esempio sul desktop, inserisco hidden-desktop come Suffisso classe CSS modulo, il problema è che con il template protostar me lo accetta, ma con il template at_grafic no, non riesco a capire il motivo. Vi allego il link con un esempio http://www.calabriaprova.joomlafree.it/province/vibo-valentia.html qui il modulo con la foto vibo valentia è impostato come nascosto su desktop ma continua a comparire. Forse deve essere modificato il file index
Grazie comunque dei consigli
-
http://www.calabriaprova.joomlafree.it/province/vibo-valentia.html
Ho corretto il link, avevo sbagliato, grazie ancora a abbia voglia di aiutarmi
-
Adesso mi è più chiaro, posso scegliere se far vedere o nascondere un modulo a secondo dei media. Per poter nascondere il modulo, ad esempio sul desktop, inserisco hidden-desktop come Suffisso classe CSS modulo, il problema è che con il template protostar me lo accetta, ma con il template at_grafic no, non riesco a capire il motivo.
Il tuo template, che come dici è realizzato su Helix 3, dovrebbe quindi utilizzare le classi Bootstrap 3, grazie alle quali puoi realizzare molto facilmente quello che stai cercando di fare.
Ho fatto una piccola prova e puoi vedere il risultato qui (https://disegnareilweb.it/gallerie-immagini/b3-carousel): da desktop vedrai un modulo a sx e uno a dx del content, da smartphone vedrai incolonnati prima il content (come vuoi tu) e sotto un modulo "replica" di quello che nella visualizzazione desktop stava a sx, seguito da un altro modulo.
Procedura:
- al modulo che vuoi visualizzare da desktop (e solo da desktop) a sx del content (nel mio template messo in "posizione left) applichi la classe visible-lg
- al modulo "copia" che invece vuoi far visualizzare da mobile sotto al content applichi la classe visible-xs (e che nel mio template ho messo quindi in "posizione right")
Questo è tutto. E il tutto è racchiuso in una "tabellina" che puoi consultare al paragrafo "Responsive utilities" in questa pagina di documentazione (http://getbootstrap.com/css/) di Bootstrap 3.
-
Grazie mille Limma, adesso ho risolto sei stato chiarissimo, io avevo capito la procedura ma non riuscivo ad ottenere il risultato poichè inserivo il suffisso hidden-desktop e non visible-lg. In nessuna guida online avevo trovato tale suffisso e quelli che inserivo evidentemente non erano adatti al mio template. Grazie ancora a tutti, questo forum è davvero utilissimo ;D