[Résolu] Personaliser l'affichage du menu a facette

[kokodoko]

>>>> POST RESOLU !!! VOIR LE TUTO ICI !!!

 

Bonjour les amis, 

 

voici ma question, qui, je l'espère, intéressera plus d'un:

 

Sur Prestashop 1.6, j'ai configuré mon menu a facette en colonne de gauche, mais je ne suis pes trsè satisfait du résultat visuel:

 

1) Question 01: J'ai par exemple 11 sous-catégories avec case a cocher (voir image 1), et sur un écran "large", c'est le bazar... au lieu de rester sagement affichées les unes après les autres en alignement à gauche, elles se suicent de manière désordonnée et illisible finalement...

 

Comment les forcer à s'aligner les unes après les autres (comme image 2

 

2) Question 02: Il y a une ascenseur (scrollbar) à droite car l'ensemble des sous categories ne peut pas s'afficher dans le cadre prévu... c'est moche et complique la navigation ! (image03)

 

Comment supprimer cette scrollbar et adapter le cadre au contenu ? (image 04)

 

Voila, si quelqu'un a la solution miracle qu'il s'exprime librement !!!

 

Et je ferais un petit tuto pour la communauté sur cette question une fois la solution trouvée !

 

Merci a tous !!

Edited October 24, 2014 by kokodoko (see edit history)

[S-HAMMANI]

Bonjour:

 

Jet un coup d'oeui ici http://www.prestashop.com/forums/topic/343520-resolu-navigation-facette-et-libell%C3%A9s/

[kokodoko]

Un Stand Ovation pour S-HAMMANI qui m'a appporté la bonne solution !

 

Voici donc un petit tuto qui reprend sa solution:

 

1- L'affichage en front office de votre navigation a facette est désordonne au lieu d'être en colonne, un peu comme çà

 

2- Connectez-vous a votre dossier boutique par FTP (avec filezilla par exemple), et chargez le fichier CSS du module blocklayered de votre thème

 

votresite/themes/default-bootstrap/css/modules/blocklayered/blocklayered.css

 

3 - editez le fichier blocklayered.css (avec notepad++ par exemple) et ajouter ces lignes de code à la fin du fichier

 

 .layered_filter > ul >li{

   width:100% !important;

 }

 

Vous pouvez ajouter un commentaire ( balisé par /* votre commentaire */pour vous souvenir de votre modification le cas échéant, comme

 

 /* ligne 169 modification affichage force en colonne sur front office  */

 

Votre CSS doit ressembler à ça

 

4- Uploadez votre blocklayered.css en remplacement de l'ancien

 

5- Admirez votre front office, il doit ressembler à cela:

 

 

Attention, par sécurité, n'oubliez jamais de sauvegarder vos fichiers originaux avant toute modification

Personnellement, j'ajoute toujours une mention "_old" sur les fichiers que je modifie et que je laisse sur le serveur, comme cela:

 

blocklayered.css  (le fichier modifié)

blocklayered_old.css (l'ancien fichier)

 

je supprime l'ancien fichier ensuite, quand tous les contrôles de fonctionnalités ont été validés

 

 

Tutto réalisé grâce à l'apport de S-HAMMANI

 

 

 

 

 

Edited October 24, 2014 by kokodoko (see edit history)

[3BDiffussion]

Bonjour,

 

Tous comme toi, Je cherche à enlever le scrollbar ....

As-tu réussi ?

 

Je le vois pas dans le tuto.

 

Merci de ton aide

[S-HAMMANI]

Tu peux partager l'url de ta boutique ?

 

 

Trois regles CSS résponsables de cette barre: height, max-height et overflow.

Edited October 24, 2014 by S-HAMMANI (see edit history)

[3BDiffussion]

Salut,

 

J'avais pas vu que tu me répondais

 

Voici l'adresse :

http://www.issika.com/206-votre-cuisine

 

J'ai essayer d'enlever :

max-height et overflow dans #layered_form div div ul  du blocklayered.css

 

J'ai toujours le scroll

[S-HAMMANI]

Bonjour

 

Code à modifier  en blocklayred.css ligne 346

 

#layered_form div div ul {
    max-height: 200px;
    overflow-x: auto;
    margin-bottom: 0px;
}

[3BDiffussion]

Bonjour, 

Je dois pas être au bon endroit, j'ai que 158 lignes ?!

Je modifie le fichier qui est dans /www/modules/blocklayered et ça ne change rien.

Est-ce ce fichier que je dois modifier ?

 

Cordialement.

Mathieu

Edited November 5, 2014 by 3BDiffussion (see edit history)

[S-HAMMANI]

C'est ici que tu dois faire les modifications  {SITE}/themes/starshop/css/modules/blocklayered/blocklayered.css

 

Bon courage

[3BDiffussion]

Encore merci, c'est exactement ça