[Risolto] Slide Photo responsive su misura

[antjoom]

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




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





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

[alessioa]

Ciao,

servirebbe un link al sito.

[antjoom]

Eccolo


http://www.canonservicesrl.altervista.org/index.php/prodottimenu/mobili-per-ufficio

[alessioa]

Ciao,

aggiungi questo :

Codice: [Seleziona]

.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

[antjoom]

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

[alessioa]

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.

[antjoom]

Perdonami, ma non riesco proprio a capire dove intervenire
Se puoi mi dai un aiuto?


Grazie

[alessioa]

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.

[antjoom]

  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

[alessioa]

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*/
}

[antjoom]

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


ed aggiungere questo?
.home_mod {
margin: 0px auto;
width: 100% !important;
}

.mobili_mod {
margin: 0px auto;
width: 60% !important;
}


Attendo conferma

[alessioa]

esatto, vediamo cosa succede.

[antjoom]

Niente, ho rifatto anche tutti tutti i passaggi

[alessioa]

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

[antjoom]

Questo è il codice del file che mi hai fatto modificare

Codice: [Seleziona]

.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

[alessioa]

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

Codice: [Seleziona]

.home_mod
.mobili_mod

invece deve essere

Codice: [Seleziona]

.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_

[antjoom]

Niente, ti posto i settaggi


[/code]

Codice: [Seleziona]

.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

[alessioa]

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*/
}

[antjoom]

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

Codice: [Seleziona]

.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???

[alessioa]

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

Codice: [Seleziona]


.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

Codice: [Seleziona]

.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