Jump to content

[RÉSOLU] Comment centrer horizontalement les images des sous-catégories sur la page ?

Nico95
 Share

Recommended Posts

Nico95 Newbie

Nico95

Posted
Posted (edited)

Hello la communauté,

Je souhaiterais que les images des sous-catégories soient centrées horizontalement sur les pages des catégories.

J'ai effectué de nombreux changements au niveau de la feuille superfish-modified.css mais tout ce que j'ai réussi à faire c'est les centrer sur la version mobile en jouant avec les margin. (bon c'est déjà pas mal... certes ^^)

J'ai fouillé sur les forums francophone et anglais mais je n'ai pas trouvé de solutions.

Je suis sur Prestashop 1.6 et voici le lien de mon projet : www.coeurdemariage.fr/boutique_en_ligne

Je vous remercie par avance pour vos réponses.

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

Ced17

Posted
Posted

:D Balaise, n’exagérons rien!

Alors moi j'ai un écran de 1440x900px et ca me donne ce rendu. Pour modifier voici la marche a suivre.

/themes/default-bootstrap/css/category.css Ligne 45

border-top: 1px solid #d6d4d4;
padding: 15px 0 0px 30%; * Valeur à modifier *

A voir si cela vous convient, car je n'arrive pas a centrer automatiquement.(Vous voyez, déjà tout de suite moins balaise:P)

 

Link to comment
Share on other sites
Nico95 Newbie

Nico95

Posted
  • Author
Posted

J'avais déjà explorer cette piste mais c'est un peu du bricolage qui vise simplement a décaler, mais comme vous l'avez souligné, tout dépend du nombre de catégories... (qui plus est, sur mobile c'est décalé à droite)

Donc, non ce n'est pas la bonne solution et oui je vous trouve tout de suite moins balaise... :D (je plaisante évidemment)

En tout cas, merci pour cette 1ère approche. J'espère qu'elle en appellera d'autres.

Sympa Ced17 ;)

Link to comment
Share on other sites
Ced17 Contributor

Ced17

Posted
Posted

Bonjour Nico95,

J'ai fait une petite recherche pour votre problème, et je n'ai malheureusement pas encore trouvé réponse. Ça M’énerve quand je ne trouve pas.-_-

Vous avez peu-être déjà vu ce post , mais au cas ou, je vous donne le lien.

Il est un peu vieux, mais quelques fois cela fonctionne toujours , là en l’occurrence pour une version 1.6.

Centrer les sous-catégories!

Link to comment
Share on other sites
Nico95 Newbie

Nico95

Posted
  • Author
Posted (edited)

Bonjour Ced17,

J'ai déjà consulté ce post, en effet.

Malheureusement, les lignes de codes, du fichier .tpl mentionné, sont différentes des lignes présentes dans le fichier de la version 1.6. 

Le résultat est donc juste désastreux ! ^^

J'ai un peu retourné la toile pour essayer de trouver une solution à ce casse-tête, en vain.

Je vous remercie de persister dans vos recherches. J'espère que nous allons trouver la solution ! (bon si on nous l'offre sur un plateau, je prends quand même hein... :rolleyes:)

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

Ced17

Posted
Posted

Bonsoir,

Après maintes tentatives, je ne comprends pas :blink:. Bref...

Modifions comme ça et comme vous l'avez surement déjà fait tout comme moi, mais cela ne faisais rien.

/themes/default-bootstrap/css/category.css ligne 53

#subcategories ul {
  margin: 40px auto;
} 

Screenshot_1.thumb.png.58db9f423e8819f3a925a61b06fe6613.png

Ça donne ça, et c'est mieux que le bricolage d'avant, qu'en pensez-vous?

Ça ne dénature pas non plus les autre catégories avec un grand nombre de sous-catégories.

Voila bonne soirée à vous

Link to comment
Share on other sites
Nico95 Newbie

Nico95

Posted
  • Author
Posted (edited)

Bonjour Ced17,

Vous comprennez mieux pourquoi j'ai demandé de l'aide... :D

Je bossais sur la question en même temps que vous, visiblement. La modification que vous m'avez suggéré a eu de l'effet car j'avais dans le même temps ajouter un "display: flex" à la ligne 48.

On peut dire que ça a fonctionné, mais partiellement uniquement. J'ai du revoir un grand nombre de paramètres au niveau des "margin" et "padding" (hé oui encore du bricolage ^^) pour obtenir le résultat actuel qui me semble le mieux pour le moment.

J'ai dû ajouter des lignes "@media: min-width: 1200px" pour appliquer ces changements uniquement aux écrans d'ordinateur car sur la version mobile, tout était décalé. J'ai donc tout ajusté pour que tout soit centré sur ordi, tablette et mobile.

Pour ceux que ça intéresse(rait), voici les lignes de code que j'ai modifié pour obtenir le rendu désiré.

/themes/default-bootstrap/css/category.css (de la ligne 45 à 61) - Il faut remplacer ces lignes par les lignes ci-dessous :

 

#subcategories {
  border-top: 0px solid #d6d4d4;
  padding: 0px;
  display: flex; }
  #subcategories p.subcategory-heading {
    font-weight: bold;
    color: #fff;
    margin: 0 0 15px 40px; }
  #subcategories ul {
    margin: 30px auto; }
    #subcategories ul li {
      float: left;
      width: 145px;
      margin: 20px 80px 60px -33px;
      text-align: center;
      height: 202px; }
    @media (min-width: 1200px) {
      #subcategories ul li {
    margin: 0 100px 103px 0px; } }

 

Il faudra, bien évidemment, modifier les lignes de style de polices et des couleurs en fonction de votre thème.

En revanche, encore une fois, ça n'est que partiellement centré car tout dépend du nombre de sous-catégories. Par exemple, s'il y en a 6, les 2 du dessous seront, malgré tout, collé à gauche. (je n'ai malheureusement pas "encore" trouvé la solution pour ça :()

Si quelqu'un a une idée pour compléter cette "demi" solution, je suis preneur !

Ced17... si vous êtes chaud ?? ;)

Pour ceux qui cherchaient une solution également et qui feraient la modif que j'ai suggéré, je veux bien que vous me disiez si ça fonctionne bien aussi chez vous.

Merci encore en tout cas, Ced17 !

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

Ced17

Posted
Posted

Bonsoir Nico95,

J'avais bien vu que vous aviez modifié les codes, il me semblais bien :). Désolé  pour le silence, mais étant ostréiculteur, c'est en ce moment la pleine saison pour moi.

Je suis chaud, mais le temps me manques je dirais. Je ne sais pas si on peut insérez directement le style dans le TPL pour impacter directement .

Dans #subcategories ul li, ce float left met la zone pour centrer correctement, et pourtant si on le masque, ça se centre en vertical et pas en horizontal .

Affaire à suivre :P. 

Bonne soirée 

Link to comment
Share on other sites
Nico95 Newbie

Nico95

Posted
  • Author
Posted

Bonjour Ced17,

Ne soyez pas désolé, nous avons une vie... Ça ne remplit pas les assiettes de bidouiller du code ! ^^ (bien que, les fêtes de fin d'année approchant, vous allez remplir les assiettes de nombreuses personnes !)

J'ai regardé du côté du fichier .tpl mais je ne trouve pas où il faut agir... De plus, quel fichier .tpl faut-il éditer ? category.tpl ? global.tpl ?

Je ne comprends pas non plus pourquoi les éléments sont centrés verticalement et non horizontalement. Par ailleurs, même si on ajoute un display: inline_block, on n'obtient pas le résultat attendu...

Je lance un appel à la communauté  pour m'aider à trouver cette solution, qui pourra profiter à tous, de surcroît.  Il doit bien y avoir un "killer de codes" qui doit avoir la formule magique... Non ? :lol:

Link to comment
Share on other sites
jcanto Newbie

jcanto

Posted
Posted

Salut à vous :)

Je vous propose cette solution, à tester si elle vous convient !

Enlever le display:flex de #subcategories, et enlever la class clearfix de l'ul

Il faut ajouter les lignes suivantes : 

#subcategories ul{

display:flex;

flex-wrap:wrap;

justify-content:space-around;

}


et modifier comme cela :  

#subcategories ul li {
    width: 145px;
    margin: 20px 25px 60px 25px;
    text-align: center;
    height: auto;
}

Voilà si ça peut t’aider :)
 

  • Thanks 1
Link to comment
Share on other sites
Nico95 Newbie

Nico95

Posted
  • Author
Posted (edited)

Bonjour jcanto,

Alors c'est toi le "killer de codes" qu'on attendait ?? :D

Je me suis inspiré de tes lignes de codes qui m'ont été vraiment utiles pour parfaire le rendu final. Donc, déjà pour ça, je te remercie infiniment.

J'ai adapté ces lignes pour que ça s'adapte sur ordi, sur tablette et sur mobile (les images étaient collées sur la partie droite de l'écran sur mon smartphone). J'ai laissé le display: flex que tu as préconisé d'enlever car il permet de bien centrer au milieu de la page, et j'ai mis justify-content: center au lieu de space-around, je trouve ça plus jolie.

Voici une copie :

#subcategories {
  border-top: 0px solid #d6d4d4;
  padding: 0px;
  display: flex; }
  #subcategories p.subcategory-heading {
    font-weight: bold;
    color: #fff;
    margin: 0 0 15px 40px; }
  #subcategories ul {
    margin: 30px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; }
    #subcategories ul li {
      float: left;
      width: 145px;
      margin: 20px 80px 60px -33px;
      text-align: center;
      height: 202px; }
    @media (min-width: 991px) {
      #subcategories ul li {
        width: 145px;
        margin: 0 100px 30px 0px;
        text-align: center;
        height: auto; } }

Je n'ai plus qu'à vous remercier Ced17 et jcanto pour le temps que vous avez consacré à résoudre cette énigme.

A très bientôt pour de nouvelles aventures... hahaha ;)

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

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