Jump to content

Comment modifier la taille du slider ?

Les Bijoux de JADE
 Share

Recommended Posts

Les Bijoux de JADE Newbie

Les Bijoux de JADE

Posted
Posted (edited)

Bonjour à toutes et à tous,

 

Comme le titre l'indique, j'aimerais savoir comment modifié le taille de mon slider car quand je mets une image , elle n'apparaît pas entièrement.

Du coup , je suis obliger de la réduire à la taille max , et forcément la qualité s'en fait ressentir .

 

PS : ce n'est pas le slider "DIAPORAMA" d'origine Prestashop mais celui de mon thème 

 

En vous remerciant pour vos futures réponses 

 

cordialement

Edited by Les Bijoux de JADE (see edit history)
Link to comment
Share on other sites
Ced17 Contributor

Ced17

Posted
Posted (edited)

Bonjour,

Désactiver vos 3ccc et cache prestashop pour pouvoir identifier le dossier, en faisant un clic droit sur votre slider et inspecter sous Chrome par exemple. Un thème de chez Redfox non?

.camera_wrap {

width : 80%;

margin : auto ;

}

Edited by Ced17 (see edit history)
Link to comment
Share on other sites
Les Bijoux de JADE Newbie

Les Bijoux de JADE

Posted
  • Author
Posted
Il y a 7 heures, Ced17 a dit :

Bonjour,

Désactiver vos 3ccc et cache prestashop pour pouvoir identifier le dossier, en faisant un clic droit sur votre slider et inspecter sous Chrome par exemple. Un thème de chez Redfox non?

.camera_wrap {

width : 80%;

margin : auto ;

}

Bonjour, j'ai trouver le module hier :  Simpleslider .

Oui en effet , c'est Redfox :) 

J'ai modifié le 80 % en 100 % , rien ne change .

Link to comment
Share on other sites
Ced17 Contributor

Ced17

Posted
Posted

Re,

Screenshot_2.png.aee5d8195bff66182d62a84420e3f056.png

Screenshot_3.thumb.png.f08ba13b0c497567e1c581b8d42ecaf7.png

 

pour modifier le height, taper directement dans le tpl du module où vous trouverez normalement le code ci-dessus.

ensuite il faudra commenter le float left et mettre un margin auto quand vous modifierez le width a votre convenance.

Link to comment
Share on other sites
Les Bijoux de JADE Newbie

Les Bijoux de JADE

Posted
  • Author
Posted

5b0c82c08868b_SLIDER2.thumb.png.9bc4e28241f825606908666247f8be4b.png

5b0c82eaca802_SLIDER3.thumb.png.af5e8168f325a7a07abfc1511faae4ef.png

5b0c82ff656e2_SLIDER4.thumb.png.78dbd9e1a9257d3d5364e201698a475a.png

Voici le code complet . je ne vois pas ou le modifier exactement

et pour : ensuite il faudra commenter le float left et mettre un margin auto quand vous modifierez le width a votre convenance. 

Je n'ai pas compris . 

 

J'étais sous le prestashop cloud avant, j'avais choisi cette solution car je n'y connais rien en code . donc veuillez m'excuser pour ma "novicité"

 

Link to comment
Share on other sites
Ced17 Contributor

Ced17

Posted
Posted (edited)

Bonjour,

Il faudrait désactiver vos caches le temps de vous dire quelle fichier modifié, car ce que vous me donner ne correspond pas,ce sera plus simple.

Ceforum est la pour aider justement quand on s'y connait pas trop, on ne peut pas tout savoir rassurez vous, mais un minimum est nécessaire malgré tout pour faire ce genre de manipulation pourtant très simple.

Désactiver les caches que ce soir,car je ne rentre que le soir tard 😉. 

Bonne journée

Edited by Ced17 (see edit history)
Link to comment
Share on other sites
Les Bijoux de JADE Newbie

Les Bijoux de JADE

Posted
  • Author
Posted (edited)
Il y a 5 heures, Ced17 a dit :

Bonjour,

Il faudrait désactiver vos caches le temps de vous dire quelle fichier modifié, car ce que vous me donner ne correspond pas,ce sera plus simple.

Ceforum est la pour aider justement quand on s'y connait pas trop, on ne peut pas tout savoir rassurez vous, mais un minimum est nécessaire malgré tout pour faire ce genre de manipulation pourtant très simple.

Désactiver les caches que ce soir,car je ne rentre que le soir tard 😉. 

Bonne journée

Bonjour @Ced17 ,

 

Les caches étaient désactivés . donc je ne sais pas quoi dire .

D'ailleurs le smarty n'est jamais activé car cela m'enlève le slider et les images produits . 

 

Bonne journée et à ce soir 

Edited by Les Bijoux de JADE (see edit history)
Link to comment
Share on other sites
Ced17 Contributor

Ced17

Posted
Posted

Bonsoir,

Voici le chemin à suivre:

/modules/simplesliders/views/css/camera.css ligne 7 

.camera_wrap {
    direction: ltr;
    display: none;
    /* float: left; */      Commenter comme ceci avec les/* */
    position: relative;
    z-index: 0;
    margin-bottom:25px !important;
    width:100%;     Modifier cette valeur comme vous le désirez pour réduire la largeur
    background:#fff;
}

 

Pour la hauteur, vérifier dans le module simple slider où il doit y avoir un TPL avec ce code :   style=" display: block;   height: 427px;"

Link to comment
Share on other sites
Les Bijoux de JADE Newbie

Les Bijoux de JADE

Posted
  • Author
Posted
il y a 31 minutes, Ced17 a dit :

Bonsoir,

Voici le chemin à suivre:

/modules/simplesliders/views/css/camera.css ligne 7 

.camera_wrap {
    direction: ltr;
    display: none;
    /* float: left; */      Commenter comme ceci avec les/* */
    position: relative;
    z-index: 0;
    margin-bottom:25px !important;
    width:100%;     Modifier cette valeur comme vous le désirez pour réduire la largeur
    background:#fff;
}

 

Pour la hauteur, vérifier dans le module simple slider où il doit y avoir un TPL avec ce code :   style=" display: block;   height: 427px;"

Re Bonsoir ,

 

Merci pour votre réponse, alors j'ai enfin trouver ce fichier, je n'allais vraiment pas dans le bon ^^ .

à quoi sert exactement la modification du bout de code svp ? car je ne vois pas de différence

 

Je cherche toujours l'autre  "  style=" display: block;   height: 427px;" mais pour l'instant rien du tout 

Link to comment
Share on other sites
Ced17 Contributor

Ced17

Posted
Posted

si vous voulez modifier surtout la hauteur(height) il est directement dans votre tpl simple sliders et c'est le smarty qui le gère. pour le bout de code plus haut, le width servira a réduire la largeur en fonction de ce que vous mettrez en largeur.

Link to comment
Share on other sites
Ced17 Contributor

Ced17

Posted
Posted

Alors, on va contourner le problème, essayer d'ajouter ce code dans le fichier suivant:\modules\simplesliders\views\css\camera.css

#camera_wrap{
    height:  200 px !important;             200 px étant un exemple mettre votre taille choisi
}

ça change la hauteur normalement

Link to comment
Share on other sites
Ced17 Contributor

Ced17

Posted
Posted

puis ajuster la largeur avec le code suivant

/modules/simplesliders/views/css/camera.css ligne 7 

.camera_wrap {
    direction: ltr;
    display: none;
    /* float: left; */      Commenter comme ceci avec les/* */
    position: relative;
    z-index: 0;
    margin-bottom:25px !important;
    width:100%;     Modifier cette valeur comme vous le désirez pour réduire la largeur
    background:#fff;
}

Ça devrait le faire. 

Link to comment
Share on other sites
Les Bijoux de JADE Newbie

Les Bijoux de JADE

Posted
  • Author
Posted (edited)
il y a 6 minutes, Ced17 a dit :

Alors, on va contourner le problème, essayer d'ajouter ce code dans le fichier suivant:\modules\simplesliders\views\css\camera.css

#camera_wrap{
    height:  200 px !important;             200 px étant un exemple mettre votre taille choisi
}

ça change la hauteur normalement

je colle : #camera_wrap{
    height:  200 px !important;           
}

 

tout à la fin ?

Edited by Les Bijoux de JADE (see edit history)
Link to comment
Share on other sites
Les Bijoux de JADE Newbie

Les Bijoux de JADE

Posted
  • Author
Posted

Bon j'ai tester, j'ai pas trouver le problème de largeur mais le soucis le plus important pour moi est que le module n'est pas RESPONSIVE .

Donc je vais plutôt rester sur celui de base en espérant trouver une solution , et que si quelqu'un à une solution , qu'il puisse nous la partager .

Link to comment
Share on other sites
Les Bijoux de JADE Newbie

Les Bijoux de JADE

Posted
  • Author
Posted (edited)

Bonsoir, 

Bien sûr que je vide mon cache Prestashop et celui de chrome :) 

Je le fais à chaque changement avec google chrome pour être sur 

c'est bien placer ? Ce code la : 

  1. /**************************
  2. *
  3. * GENERAL
  4. *
  5. **************************/
  6.  
  7. #camera_wrap{
  8. height: 700 px !important;
  9. }
  10.  
  11. .camera_wrap {
  12. direction: ltr;
  13. display: none;
  14. /* float: left; */
  15. position: relative;
  16. z-index: 0;
  17. margin:auto;
  18. width:100%;
  19. background:#fff;
  20. }
  21.  
  22. .camera_fakehover {
  23. height: 100%;
  24. min-height: 60px;
  25. overflow: hidden;
  26. position: relative;
  27. width: 100%;
  28. z-index: 1;
  29. }
  30.  
  31. .cameraContent {
  32. bottom: 0;
  33. display: none;
  34. left: 0;
  35. position: absolute;
  36. right: 0;
  37. top: 0;
  38. width: 100%;
Edited by Les Bijoux de JADE (see edit history)
Link to comment
Share on other sites
Ced17 Contributor

Ced17

Posted
Posted (edited)

mettez celui-ci car je crois voir une erreur dans ! important, il doit être rouge normalement et il n'y a pas de maj.

#camera_wrap{
    height:700px !important;

}

.camera_wrap {
   
    direction: ltr;
    display: none;
    /*float: left;*/
    position: relative;
    z-index: 0;
    margin-bottom: 25px !important;
    margin-top: 10px !important;   * j'ai rajouté ceci pour le décoller du menu, je trouve + esthétique à vous de voir*

    width: 90%;
    background: #fff;
    overflow: hidden;
    margin:auto;
}

Edited by Ced17 (see edit history)
  • Thanks 1
Link to comment
Share on other sites
Ced17 Contributor

Ced17

Posted
Posted

encore un petit réglage ici les flèches pour changer de photos sont pas au bon endroit non plus:

/modules/simplesliders/views/css/camera.css ligne 290

.camera_prev, .camera_next, .camera_commands {
    cursor: pointer;
    height: 56px;
    margin-top: -40px;
    position: absolute;
    top: 30%;   * Valeur à modifier*
    width: 56px;
    z-index: 2;
}

Link to comment
Share on other sites
Ced17 Contributor

Ced17

Posted
Posted

Bonsoir,

Je m'excuse, mais je suis perfectionniste :) ce serait quand même mieux ces flèches bien centré au milieu du slide qu'en pensez-vous?

Screenshot_1.thumb.png.8681ded84c716a1c87b5ac3a5c968728.png

j'ai mis le top que vous avez réglé a 50% plutôt a 40% c'est mieux.

Je dis ça je dis rien (rire) ;) 

A+

Link to comment
Share on other sites
Les Bijoux de JADE Newbie

Les Bijoux de JADE

Posted
  • Author
Posted (edited)

Bonjour Ced17,

 

à 40% , ce n'est pas centré du tout

 je n'arrive pas à mettre l'image par contre ( problème de réseaux )

 

J'ai mesuré sur mon écran ( lol ) et à 50% , du haut en bas, c'est bien centré alors tout dépends peut être des écrans ? je ne sais pas

 

Edited by Les Bijoux de JADE (see edit history)
Link to comment
Share on other sites
Les Bijoux de JADE Newbie

Les Bijoux de JADE

Posted
  • Author
Posted (edited)

Bonjour @ced17 ,

 

l'envoi d'image remarche, regardez à 40 % le résultat chez moi

 

Ps : j'ai un peu le même problème d'image dans les catégories, les images ne sont pas coupées mais plutôt zoomées et du coup pas de la taille voulue, elle ne le sont que quand je fais inspecter dessus : https://www.lesbijouxdejade.com/fr/58-bracelet-argent-925  .

Pourriez vous m'indiquer comment faire aussi svp . en vous remerciant

slider_a_40%_non_centré.png

Edited by Les Bijoux de JADE (see edit history)
Link to comment
Share on other sites
Ced17 Contributor

Ced17

Posted
Posted

Quelle taille fait l'image de votre catégorie en réelle? c'est a dire quand vous l'avez modifié pour cette utilisation. Car on dirait qu"elle est grossi pour rentrer dans le cadre justement.

Link to comment
Share on other sites
Ced17 Contributor

Ced17

Posted
Posted

Autre point que je remarque, sur la version mobile du coup je pense que le width 700px !important modifie la mise en page. On va donc aussi essayer de corriger cela en remplaçant: 
#camera_wrap{
    height:700px !important;
} 

par

@media (min-width:768px) {
#camera_wrap{
    height:700px !important;
} }

Cette action fera en sorte que quand l’écran sera supérieur à 768px, cela s'affichera comme demandé.

A voir ce que cela donne niveau mobile par la suite pour le slide mais je pense que ça va le faire.

Link to comment
Share on other sites
Ced17 Contributor

Ced17

Posted
Posted

Je travaille avec ce plugin très bien pour voir en version mobile. Le slide s'affiche et on voit bien que ce sont les flèches qui déconnent un peu.

Le fichier ou je vous donne le code a modifier est le même que celui d'avant, c'est a dire celui la:

/modules/simplesliders/views/css/camera.css ligne 7

remplacer: 

#camera_wrap{
    height:700px !important;
} 

par

@media (min-width:768px) {
#camera_wrap{
    height:700px !important;
} }

 

Screenshot_1.png.63b11d4708923ef521aa3995eebc27ea.png

Link to comment
Share on other sites
  • 2 weeks later...
  • 1 month later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...