Menu Horizontal personnalisé

[enmoderugby]

Bonjour,

Est-il possible de modifier les menu horizontal (PS 1.6) ?

Je voudrai mettre en valeur (en avant) une rubrique du menu... en changeant la couleur de fond par exemple comme ci-joint.

Est-ce possible ?

Merci de votre aide.

 

[Mediacom87]

Bonjour,

oui cela est possible directement en CSS sans toucher au code du module.

il faut utiliser les :nth-child https://developer.mozilla.org/fr/docs/Web/CSS/:nth-child

[enmoderugby]

C'est un peu barbare pour moi.

Où se trouve cette CSS à modifier ?

Que faut-il faire concrètement ?

[Mediacom87]

Il y a 7 heures, enmoderugby a dit :

Où se trouve cette CSS à modifier ?

certainement que le fichier css du menu est surchargé dans votre template.

Il y a 7 heures, enmoderugby a dit :

Que faut-il faire concrètement ?

identifié l'élément du DOM  qui permet de personnaliser la couleur du background et modifier le 5ème élément à l'aide du css en utilisant le :nth-child dont je parle précédement et dont j'ai communiqué une documentation d'usage.

[enmoderugby]

Merci mais c'est au delà de mes compétences. Je joins la fiche CSS du module si quelqu'un à la gentillesse d'y jeter un oeil.

superfish-modified.css

[Mediacom87]

.sf-menu > li:nth-child(5) > a {
	background-color:#900;
}

#900 vous mettez la couleur que vous voulez.

[enmoderugby]

Merci et c'est un bout de code qu'il faut ajouter au CSS ou remplacer ?

[enmoderugby]

J'ai ajouter ce bout de code au CSS du module mais sans changement

[enmoderugby]

En fait ça fonctionne très bien faut juste prendre le CCS au bon endroit !

prestashop > themes > le nom de la copie de votre thème (test pour nous) > css > modules > blocktopmenu > css > superfish-modified

[enmoderugby]

Bonjour,

Désormais sur 1,7, est-il possible de faire la même chose ? .... car Il n'y a pas de fichier CSS dans le module mainmenu

Merci

[Mediacom87]

Il y a 5 heures, enmoderugby a dit :

Bonjour,

Désormais sur 1,7, est-il possible de faire la même chose ? .... car Il n'y a pas de fichier CSS dans le module mainmenu

Merci

Si le module n'a pas de css, je n'ai pas vérifié, il suffit de déposer cela dans le fichier custom.css du thème enfant utilisé.

[enmoderugby]

juste déposer ce petit bout de code ?

.sf-menu > li:nth-child(5) > a {
	background-color:#900;
}

 

[Mediacom87]

il y a 9 minutes, enmoderugby a dit :

juste déposer ce petit bout de code ?

.sf-menu > li:nth-child(5) > a {
	background-color:#900;
}

 

Le bout de code, je ne sais pas, mais en tout cas l'emplacement de sutom.css me semble bon.

[enmoderugby]

J'ai essayé de bidouiller un peu mais trop complexe pour moi

[Mediacom87]

il y a 23 minutes, enmoderugby a dit :

J'ai essayé de bidouiller un peu mais trop complexe pour moi

Le souci de coller des trucs sans comprendre.

Là, vous vous appuyez sur la classe .sf-menu, sauf que ce nouveau menu est sur la base d'une classe .top-menu

Donc, il faut adapter

.top-menu > li:nth-child(5) > a {
	background: #990000;
}

 

[enmoderugby]

Non je précise que j'ai bien modifié "sf-menu" par "top-menu" est ajouté cela à custom.css dans le fichier 'themes/classic/assets/css'

[Mediacom87]

il y a 3 minutes, enmoderugby a dit :

Non je précise que j'ai bien modifié "sf-menu" par "top-menu" est ajouté cela à custom.css dans le fichier 'themes/classic/assets/css'

Je viens de tester et cela s'applique parfaitement.

Donc, un souci de cache, un rafraîchissement à forcer, ainsi de suite, les trucs habituels qui peuvent bloquer le renouvellement d'un CSS dans le navigateur.

Edited July 29, 2022 by Mediacom87 (see edit history)

[Mediacom87]

Et la version améliorée si vous ne voulez pas appliquer la règle aux sous menus.

.top-menu > li:nth-child(2) > a[data-depth="0"] {
	background: #900;
}

 

[enmoderugby]

Effectivement. problème de cache sans doute. merci en tous cas.

[enmoderugby]

Et peut-on le modifier facilement en changer la police de caractère du menu et plus la couleur de fond de la cellule ?

j'ai tenté de remplacer background par font ou color... mais sans succès.

[Mediacom87]

Il y a 3 heures, enmoderugby a dit :

le modifier facilement

Non, puisque vous n'arrivez pas à le faire.

[enmoderugby]

Si la réponse intéresse certains :

header .header-top li#category-80 a[data-depth="0"] {
    color:#ff0000;
}