defaliz Posted December 11, 2023 Share Posted December 11, 2023 (edited) bonjour en cliquant sur l'image principale du produit on obtient un agrandissement de celle-ci mais les petites images sont en lignes alors qu'elles devraient être en colonne... comment régler le problème ? je vous remercie Edited December 14, 2023 by defaliz (see edit history) Link to comment Share on other sites More sharing options...
Mediacom87 Posted December 11, 2023 Share Posted December 11, 2023 Bonjour, comparez le css de votre site avec le css du thème d'origine pour obtenir le même résultat. Link to comment Share on other sites More sharing options...
defaliz Posted December 11, 2023 Author Share Posted December 11, 2023 Merci, j'ai vérifié déjà ça sans succès mais j'ai l'impression que c'est au niveau des autres fichiers CSS, il y en a pas mal ... De plus avec l'outil "inspecter" du navigateur je n'arrive pas à voir le code de ce block... Link to comment Share on other sites More sharing options...
Mediacom87 Posted December 11, 2023 Share Posted December 11, 2023 il y a 48 minutes, defaliz a dit : je n'arrive pas à voir le code de ce block... Nous, encore moins que vous. Link to comment Share on other sites More sharing options...
defaliz Posted December 11, 2023 Author Share Posted December 11, 2023 le bout de code est dans le fichier product-images-modal.tpl le bloc des vignettes correspond au div : ....<div class="js-modal-mask mask {if $imagesCount <= 5} nomargin {/if}"> <ul class="product-images js-modal-product-images"> {foreach from=$product.images item=image} <li class="thumb-container js-thumb-container">..... mais je ne vois pas comment passer les vignettes de la ligne à la colonne... est-ce lié à la taille de la div qui contraint les images ? Link to comment Share on other sites More sharing options...
defaliz Posted December 11, 2023 Author Share Posted December 11, 2023 bon j'ai trouvé dans le theme.css la ligne 2183 j'ai commenté {*display: flex;*} et les vignettes sont en colonne... voila Link to comment Share on other sites More sharing options...
Mediacom87 Posted December 11, 2023 Share Posted December 11, 2023 il y a 25 minutes, defaliz a dit : dans le theme.css la ligne 2183 On ne doit strictement jamais toucher ou modifier ce fichier. Si vous souhaitez personnaliser votre thème au niveau CSS ou JS vous devez mettre les modifications dans le fichier custom.css ou custom.js qui doivent être enregistrés au même niveau que theme.css et theme.js. Link to comment Share on other sites More sharing options...
defaliz Posted December 11, 2023 Author Share Posted December 11, 2023 Oui je sais, j'ai un custom.css.. C'est juste une info ... Link to comment Share on other sites More sharing options...
Mediacom87 Posted December 11, 2023 Share Posted December 11, 2023 Il y a 2 heures, defaliz a dit : C'est juste une info ... L'URL de votre site serait une information beaucoup plus pertinente pour regarder. Link to comment Share on other sites More sharing options...
defaliz Posted December 13, 2023 Author Share Posted December 13, 2023 (edited) c'est ici https://plantandstories.com/substrats-et-accessoires/115-cache-pot-vibes-fold-rond-elho.html quand on agrandit le produit en fait si on modifie le mode display:flex flex-direction: column ; dans le css, on modifie aussi dans la page du produit... ce que j'essaie c'est d'avoir les vignettes en colonne uniquement dans le mode agrandissement du produit... donc mon souci n'est pas résolu... Edited December 13, 2023 by defaliz (see edit history) Link to comment Share on other sites More sharing options...
defaliz Posted December 13, 2023 Author Share Posted December 13, 2023 bon, correction, je suis moyennement satisfait mais ça fonctionne... je n'ai pas touché au css mais modifé le fichier product-images-modal.tpl en insérant la balise style comme ceci : <ul class="product-images js-modal-product-images" style="display:flex; flex-direction:column"> je sais que c'est pas bien pour les maj mais j'ai pas mieux... si il y a une autre astuce... au passage je cherche à améliorer la loupe pour avoir quelque chose de plus visible... merci Link to comment Share on other sites More sharing options...
Mediacom87 Posted December 13, 2023 Share Posted December 13, 2023 Bonjour, mettez ceci dans custom.css plutôt : ul.product-images { display: inherit; } Pour la loupe, pareil, on regarde le thème d'origine et votre thème pour comparer. Link to comment Share on other sites More sharing options...
defaliz Posted December 13, 2023 Author Share Posted December 13, 2023 Merci beaucoup ! ça fonctionne parfaitement c'est plus élégant que ma modif... pour la loupe, je reprend le site, le précédent dev à modifé pas mal de trucs.. si je prends une install presta 1.7.8 de base on a une belle loupe, j'imagine que c'est du javascript..(cf copie) mais dans mon cas j'ai une loupe avec le style "cursor: zoom-in" Link to comment Share on other sites More sharing options...
Mediacom87 Posted December 13, 2023 Share Posted December 13, 2023 Non, c'est du css tout simple. Link to comment Share on other sites More sharing options...
defaliz Posted December 13, 2023 Author Share Posted December 13, 2023 oui mais difficile de trouver où se situe les attributs dans le css car en chargeant l'outil de dev "inspecteur" du navigateur la loupe disparait... Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now