Joomla.it Forum
Joomla! 3 => Joomla! 3 => : antjoom 27 Dec 2014, 15:17:45
-
Ciao ragazzi, devo risolvere questo piccolo problema
Utilizzo protostar come template ed ho creato un articolo dove ho inserito di base un'immagine di sfondo e poi ho aggiunto un modulo slide photo responsive.
Il problema e che vorrei che questo modulo slide non occupasse orizzontalmente tutto lo spazio disponibile nel template
Cerco di spiegarmi meglio:
Nella prima foto ho cercato di stilizzare la mia situazione attuale con il modulo foto
(http://uppix.com/f-A549ebd4000182948.jpg)
Come vedete la banda verde occupa tutto lo spazio del template in orizzontale, quindi mi divide in 2 parti l'immagine di sfondo che ho inserito (in questo caso è l'area celeste)
Quest'altra foto rappresenta quello che dovrebbe essere il risultato che vorrei ottenere, e cioè un modulo slide photo più piccolo
(http://uppix.com/f-B549ebe1f00182949.jpg)
Nei vari moduli che ho testato, esiste la possibilità di inserire in maniera manuale le dimensioni dello slide photo, ma una volta impostata, riesco ad ottenere il mio risultato perdendo però la proprietà responsive.
Risolvibile?
Grazie mille
-
Ciao,
servirebbe un link al sito.
-
Eccolo
http://www.canonservicesrl.altervista.org/index.php/prodottimenu/mobili-per-ufficio (http://www.canonservicesrl.altervista.org/index.php/prodottimenu/mobili-per-ufficio)
-
Ciao,
aggiungi questo :
.vt_nivo_slider {
margin: 0px auto; /*questa proprietà centra il modulo*/
width: 60% !important; /*regola come meglio credi la larghezza*/
}
in questo file http://www.canonservicesrl.altervista.org/media/mod_vt_nivo_slider/css/nivo-slider.min.css
-
Ti ringrazio per la cortesia, solo che c'è un problema
Adesso con questa stringa ho cambiato l'impostazione generica di tutti i "vt_nivo_slider" che andrò ad installare
Infatti se guardi nella home, il modulo si è rimpicciolito
A questo punto posso inserire questa stringa css solo dove vorrei che il modulo venisse personalizzato nelle dimensioni?
Ancora grazie
-
Ciao,
infatti credevo che il modulo fosse in home, mi sono basato sul link che hai postato.
Comunque non è un problema, se lo vuoi applicare solo ad un determinato modulo, duplica N moduli per quanti te ne servono ed aggiungi classi css diverse e poi formatti da css solo quelle che ti interessano.
-
Perdonami, ma non riesco proprio a capire dove intervenire
Se puoi mi dai un aiuto?
Grazie
-
Si non c'è problema.
Da quanto ho capito hai la necessità di inserire più slideshow nel sito, ma solo alcuni devono avere una determinata formattazione, quindi in questo caso è necessario agire in questo modo :
- creare tanti moduli slideshow quanti te ne serviranno, per fare ciò :
estensioni\gestione moduli\ selezioni il modulo (per esempio quello in home page), e premi il tasto duplica (lo trovi in alto di fianco a nuovo e modifica), in questo modo joomla ti crea una mera copia del modulo e te la mette nello stato "sospeso"
- ora attivi il modulo, decidi in quale posizione del template vuoi farlo apparire e decidi in quale pagine
- nel tab avanzate avrai un campo che si chiama suffisso classe css del modulo, scrivi per esempio modulo-home
- clicca salva e chiudi
il motivo per cui è necessario assegnare una classe diversa al modulo è molto semplice, con il primo css che ti ho passato, giustamente mi hai detto che in questo modo TUTTI i moduli sarebbero stati formattati, invece assegnando una nuova classe al modulo, si ha la possibilità di formattare SOLO un determinato modulo, mi segui ?
una volta che hai assegnato la classe al modulo, posta il link della pagina in cui è pubblicato e poi vediamo.
-
:) :) Grazie
In pratica avevo già duplicato i moduli
Per adesso ne sono due, ma credo di inserirne sicuramente degli altri
Tu mia detto giustamente una cosa
Nella sezione "Assegnazione meu" ->"Assegnazione Modulo", io in entrambi i moduli ho selezionato "Su nessuna pagina"
Questo perchè ho inserito i moduli all'interno di un articolo con la stringa del tipo {module [114]}
In pocher parole:
Menù principale->Home->Articolo con codice modulo{module [114]}
Menù principale->Prodotti->Mobili per Ufficio->Articolo con codice modulo{module [128]}
Spero sia stato chiaro
Attendo te
-
ok, adesso assegna due classi diverse ai moduli, esempio
modulo in home : home_mod
moduli prodotti : products_mod
poi al modulo a cui vuoi adattare le dimensioni, scrivi il css
.products_mod {
margin: 0px auto; /*questa proprietà centra il modulo*/
width: 60% !important; /*regola come meglio credi la larghezza*/
}
-
Ho assegnato i due nomi nel css avanzato di ogni modulo
A questo punto dovrei editare il file che mi hai indicato prima
http://www.canonservicesrl.altervista.org/media/mod_vt_nivo_slider/css/nivo-slider.min.css (http://www.canonservicesrl.altervista.org/media/mod_vt_nivo_slider/css/nivo-slider.min.css)
ed aggiungere questo?
.home_mod {
margin: 0px auto;
width: 100% !important;
}
.mobili_mod {
margin: 0px auto;
width: 60% !important;
}
Attendo conferma
-
esatto, vediamo cosa succede.
-
Niente, ho rifatto anche tutti tutti i passaggi
-
ma ti manca il css.....
io vedo queste classi nel modulo ma non le vedo nel css
vt_nivo_slidermobili_mod
vt_nivo_sliderhome_mod
-
Questo è il codice del file che mi hai fatto modificare
.nivoSlider{position:relative;width:100%;height:auto;overflow:hidden}
.nivoSlider img{position:absolute;top:0;left:0;max-width:none}
.nivo-main-image{display:block!important;position:relative!important;width:100%!important}
.nivoSlider a.nivo-imageLink{position:absolute;top:0;left:0;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none;background:white;filter:alpha(opacity=0);opacity:0}
.nivo-slice{display:block;position:absolute;z-index:5;height:100%;top:0}
.nivo-box{display:block;position:absolute;z-index:5;overflow:hidden}
.nivo-box img{display:block}
.nivo-caption{position:absolute;left:0;bottom:0;background:#000;color:#fff;width:100%;z-index:8;padding:5px 10px;opacity:.8;overflow:hidden;display:none;-moz-opacity:.8;filter:alpha(opacity=8);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.nivo-caption p{padding:5px;margin:0}
.nivo-caption a{display:inline!important}
.nivo-html-caption{display:none}
.nivo-directionNav a{position:absolute;top:45%;z-index:9;cursor:pointer}
.nivo-prevNav{left:0}
.nivo-nextNav{right:0}
.nivo-controlNav{text-align:center;padding:15px 0}
.nivo-controlNav a{cursor:pointer}
.nivo-controlNav a.active{font-weight:bold}
.home_mod{margin: 0px auto;width: 100% !important;}
.mobili_mod{margin: 0px auto;width: 60% !important;}
Cosa manca? fammi capire meglio
-
1- c'è ancora la vecchia regola che ti avevo postato, eliminala altrimenti colpirà di nuovo tutti gli slide
2- questa è quella che ha inserito tu
.home_mod
.mobili_mod
invece deve essere
.vt_nivo_slidermobili_mod
.vt_nivo_sliderhome_mod
la classe che scrivi nel modulo all'interno di joomla deve essere identica a quella che scriverai nel css.
aggiornamento:
verifica sempre con firebug se le classi che aggiungi sono corrette, alcuni moduli prevedono l'aggiunta di un loro prefisso, in questo nivoslider aggiunge vt_nivo_
-
Niente, ti posto i settaggi
[/code].nivoSlider{position:relative;width:100%;height:auto;overflow:hidden}
.nivoSlider img{position:absolute;top:0;left:0;max-width:none}
.nivo-main-image{display:block!important;position:relative!important;width:100%!important}
.nivoSlider a.nivo-imageLink{position:absolute;top:0;left:0;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none;background:white;filter:alpha(opacity=0);opacity:0}
.nivo-slice{display:block;position:absolute;z-index:5;height:100%;top:0}
.nivo-box{display:block;position:absolute;z-index:5;overflow:hidden}
.nivo-box img{display:block}
.nivo-caption{position:absolute;left:0;bottom:0;background:#000;color:#fff;width:100%;z-index:8;padding:5px 10px;opacity:.8;overflow:hidden;display:none;-moz-opacity:.8;filter:alpha(opacity=8);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.nivo-caption p{padding:5px;margin:0}
.nivo-caption a{display:inline!important}
.nivo-html-caption{display:none}
.nivo-directionNav a{position:absolute;top:45%;z-index:9;cursor:pointer}
.nivo-prevNav{left:0}
.nivo-nextNav{right:0}
.nivo-controlNav{text-align:center;padding:15px 0}
.nivo-controlNav a{cursor:pointer}
.nivo-controlNav a.active{font-weight:bold}
.vt_nivo_sliderhome_mod{margin: 0px auto;width: 100% !important;}
.vt_nivo_slidermobili_mod{margin: 0px auto;width: 60% !important;}
http://uppix.com/f-home549ff843001829fc.jpg
http://uppix.com/f-mobili549ff85e001829fd.jpg
-
togli il punto dalle classi che hai inserito nel modulo del css, se no stiamo qui fino a capodanno del 2015 ;)
lo dicevo qui....
ok, adesso assegna due classi diverse ai moduli, esempio
modulo in home : home_mod
moduli prodotti : products_mod
poi al modulo a cui vuoi adattare le dimensioni, scrivi il css
.products_mod {
margin: 0px auto; /*questa proprietà centra il modulo*/
width: 60% !important; /*regola come meglio credi la larghezza*/
}
-
Ho rifatto tutto ma niente
Nei due moduli che avevo dupliacto, ho assegnato un css diverso
Per la home: home_mod
per i mobili per ufficio: mobili_mod
Aggiunto le due righe nel file (anche se cliccandoci sopra non me le fa vedere, ma ti assicuro che le ho inserito)
http://www.canonservicesrl.altervista.org/media/mod_vt_nivo_slider/css/nivo-slider.min.css (http://www.canonservicesrl.altervista.org/media/mod_vt_nivo_slider/css/nivo-slider.min.css)
.nivoSlider{position:relative;width:100%;height:auto;overflow:hidden}
.nivoSlider img{position:absolute;top:0;left:0;max-width:none}
.nivo-main-image{display:block!important;position:relative!important;width:100%!important}
.nivoSlider a.nivo-imageLink{position:absolute;top:0;left:0;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none;background:white;filter:alpha(opacity=0);opacity:0}
.nivo-slice{display:block;position:absolute;z-index:5;height:100%;top:0}
.nivo-box{display:block;position:absolute;z-index:5;overflow:hidden}
.nivo-box img{display:block}
.nivo-caption{position:absolute;left:0;bottom:0;background:#000;color:#fff;width:100%;z-index:8;padding:5px 10px;opacity:.8;overflow:hidden;display:none;-moz-opacity:.8;filter:alpha(opacity=8);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.nivo-caption p{padding:5px;margin:0}
.nivo-caption a{display:inline!important}
.nivo-html-caption{display:none}
.nivo-directionNav a{position:absolute;top:45%;z-index:9;cursor:pointer}
.nivo-prevNav{left:0}
.nivo-nextNav{right:0}
.nivo-controlNav{text-align:center;padding:15px 0}
.nivo-controlNav a{cursor:pointer}
.nivo-controlNav a.active{font-weight:bold}
.home_mod{margin: 0px auto;width: 100% !important;}
.mobili_mod{margin: 0px auto;width: 60% !important;}
Ma cosa mi manca???
-
Attiva la modalità io ti dico cosa fare e tu esegui...
1- apri il file http://www.canonservicesrl.altervista.org/media/mod_vt_nivo_slider/css/nivo-slider.min.css
2- elimina completatemente queste stringhe di codice
.home_mod{margin: 0px auto;width: 100% !important;}
.mobili_mod{margin: 0px auto;width: 60% !important;}
3- alla fine del file css che hai aperto inserisci
.vt_nivo_slidermobili_mod {margin: 0px auto;width: 60% !important;}
.vt_nivo_sliderhome_mod {margin: 0px auto;width: 100% !important;}
4- salva, chiudi e sovrascrivi il file
-
Mi dispiace farti perdere del tempo, ma anche facendo questa modifica non va
(http://uppix.com/f-home54a0084e00182a12.jpg)
(http://uppix.com/f-Mobili54a0088000182a13.jpg)
.nivoSlider{position:relative;width:100%;height:auto;overflow:hidden}
.nivoSlider img{position:absolute;top:0;left:0;max-width:none}
.nivo-main-image{display:block!important;position:relative!important;width:100%!important}
.nivoSlider a.nivo-imageLink{position:absolute;top:0;left:0;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none;background:white;filter:alpha(opacity=0);opacity:0}
.nivo-slice{display:block;position:absolute;z-index:5;height:100%;top:0}
.nivo-box{display:block;position:absolute;z-index:5;overflow:hidden}
.nivo-box img{display:block}
.nivo-caption{position:absolute;left:0;bottom:0;background:#000;color:#fff;width:100%;z-index:8;padding:5px 10px;opacity:.8;overflow:hidden;display:none;-moz-opacity:.8;filter:alpha(opacity=8);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.nivo-caption p{padding:5px;margin:0}
.nivo-caption a{display:inline!important}
.nivo-html-caption{display:none}
.nivo-directionNav a{position:absolute;top:45%;z-index:9;cursor:pointer}
.nivo-prevNav{left:0}
.nivo-nextNav{right:0}
.nivo-controlNav{text-align:center;padding:15px 0}
.nivo-controlNav a{cursor:pointer}
.nivo-controlNav a.active{font-weight:bold}
.vt_nivo_slidermobili_mod {margin: 0px auto;width: 60% !important;}
.vt_nivo_sliderhome_mod {margin: 0px auto;width: 100% !important;}
-
questo è il css che vedo caricato online
.nivoSlider{position:relative;width:100%;height:auto;overflow:hidden}
.nivoSlider img{position:absolute;top:0;left:0;max-width:none}
.nivo-main-image{display:block!important;position:relative!important;width:100%!important}
.nivoSlider a.nivo-imageLink{position:absolute;top:0;left:0;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none;background:white;filter:alpha(opacity=0);opacity:0}
.nivo-slice{display:block;position:absolute;z-index:5;height:100%;top:0}
.nivo-box{display:block;position:absolute;z-index:5;overflow:hidden}
.nivo-box img{display:block}
.nivo-caption{position:absolute;left:0;bottom:0;background:#000;color:#fff;width:100%;z-index:8;padding:5px 10px;opacity:.8;overflow:hidden;display:none;-moz-opacity:.8;filter:alpha(opacity=8);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.nivo-caption p{padding:5px;margin:0}
.nivo-caption a{display:inline!important}
.nivo-html-caption{display:none}
.nivo-directionNav a{position:absolute;top:45%;z-index:9;cursor:pointer}
.nivo-prevNav{left:0}
.nivo-nextNav{right:0}
.nivo-controlNav{text-align:center;padding:15px 0}
.nivo-controlNav a{cursor:pointer}
.nivo-controlNav a.active{font-weight:bold}
.vt_nivo_sliderhome_mod{margin: 0px auto;width: 100% !important;}
.vt_nivo_slider134{margin: 0px auto;width: 60% !important;}
come puoi notare manca la regola che si riferisce allo slide della pagina prodotti, mentre invece quella in home è presente.
controlla bene e con la dovuta calma
-
Ma io ti ho fatto il copia e incolla del file che mi hai chiesto di modificare ed il file è corretto
Vorrei capire cosa modificare, ma già è tutto ben fatto
Non so se rendo l'idea
Ma ci mette tempo per aggiornarsi?, in effetti anche a me da il codice che hai postato tu
-
Risolto, o meglio era il css del modulo che richiedeva tempo per l'aggiornamento
Non so se dipende dal fatto che sito si trovi sul server altervista o dipende proprio dal modulo che ho scelto
Comunque ho capito il sistema, e magari proverò qualche altro modulo con la speranza di ottenere un refresh più veloce
Grazie ancora Alessio per la tua pazienza :)