Le prestashop 1.6 de Conan - Comment placer un "border" unique dans superfish-modified.css ?

[Conan le Babar]

 

 

Bonjour. Comme une image vaut milles textes, voilà ce que j'ai obtenu de superfish-modified.css en fonction du but initialement recherché.

 

 

Mais ça ne colle pas avec ce que je veux obtenir au final. Car ce que je voudrais tout simplement, c'est ça.

 

 

J'ai donc cette portion de code à coller quelque part ( border-bottom: 2px solid #fff000; )

dans superfish-modified, mais à chaque inclusion, soit ça me déplace l'action "border" au mauvais endroit, ou bien, pire encore, ça me démultiplie à l'identique l'effet dans des sous-classes que je ne maîtrise absolument pas... [ pour l'instant, le code est dans .sf-menu ul ]

 

.sf-menu ul {
	position: absolute;
	top: -999em;
	border-top-left-radius: 7px;border-top-right-radius: 7px;border-bottom-left-radius: 7px;border-bottom-right-radius: 7px;
	background: #000000; border-bottom: 2px solid #fff000; }
	@media (max-width: 767px) {
	.sf-menu ul {
	position: relative; } } 

 

 

Voilà donc, à votre avis, où dois-je coller ma portion de code pour obtenir l'effet escompté ?

Merci à tous pour vos réflexions et vos contributions sur le sujet.

 

Pour info :

- Version exacte du prestashop : 1.6.1.15

- Date d'installation : Octobre 2018

- Mises à jour bloquées pour que cette version reste une 1.6.1.15 100% d'origine.

- Ajout et adaptation visuelle du thème zKid de Zerocarts

- Aucune modification sur le thème default-bootstrap

- Mon prestashop est hébergé en localhost. Mais je peux fournir des captures d'écran si besoin. No problem !

- Plateforme de travail : Linux Debian 9 64 bits - Geany - Xampp - Firefox 61.0.2

[Performance Agency]

Bonjour,

Mettre le code du border dans ceci :

.sf-menu > ul {

    

}

Edited October 19, 2018 by Performance Agency (see edit history)

[Conan le Babar]

Salut Performance_Agency

Hélas, c'est déjà dans cette catégorie de superfish-modified que j'avais placé mon code. Le problème n'est pas que ça ne marche pas. En effet, le border apparait bien. Mais, pas de bol, il n'apparait pas tout seul. Deux autres "mini-borders" jaunes sont présents sans être souhaités ( voir image 1 de mon post initial ).

Aujourd'hui, après avoir lu ton message, j'ai tenté plusieurs choses sans succès. Mais j'en ai aussi profité pour remettre de l'ordre dans cette catégorie dont voici le code encore tout chaud sorti du four !

.sf-menu ul {
  position: absolute;
  top: -999em;
  background: #000000;
  border-bottom: 2px solid #fff000;
  border-top-left-radius: 7px;border-top-right-radius: 7px;border-bottom-left-radius: 7px;border-bottom-right-radius: 7px; }
  @media (max-width: 767px) {
    .sf-menu ul {
      position: relative; } }

Si tu vois quelque chose qui cloche dans ce que j'ai fait, n'hésite pas à me le dire. Je suis toujours preneur de conseil. A+

 

EDIT : Je n'ai pas ".sf-menu > ul {" dans superfish-modified, mais plutôt ".sf-menu ul {" sans le " > ".

Dois-je créer une catégorie ".sf-menu > ul {" à la suite de ".sf-menu ul {" ?

 

Edited October 19, 2018 by Conan le Babar
Piaf (see edit history)

[Performance Agency]

Bonjour,

Si tu mets ton border dans .sf-menu ul{} tu auras une bordure sur tous tes sous menu.

C'est pour cela que tu dois rajouter un .sf-menu > ul{} et tu met tes border dedans.

.sf-menu ul {
  position: absolute;
  top: -999em;
  background: #000000;
  border-top-left-radius: 7px;border-top-right-radius: 7px;border-bottom-left-radius: 7px;border-bottom-right-radius: 7px;
}
@media (max-width: 767px) {
	.sf-menu ul {
	  position: relative;
	}
}
.sf-menu > ul {
	border-bottom: 2px solid #fff000;
}