[Résolu] Changer la couleur d’un Button unique dont la « class » est multiple

  • WordPress :4.9
  • Statut : résolu
13 sujets de 1 à 13 (sur un total de 13)
  • Auteur
    Messages
  • #2037722
    POLY 3000
    Participant
    Initié WordPress
    9 contributions

    Bonjour,

    Ma configuration WP actuelle

    • Version de PHP/MySQL : 7.0
    • Thème utilisé : Enfold
    • Extensions en place : Simple Custom CSS
    • Nom de l’hébergeur : OVH
    • Adresse du site : http://www.poly3000.fr

    Problème(s) rencontré(s) : Alors le titre n’est peut-être pas explicite, mais je vous explique plus clairement mon souci.

    Sur ma barre de navigation j’ai crée 2 Buttons via le menu Apparence > Menu. (cf « pièce jointe 1 »)

    Comme vous pouvez le voir, les 2 buttons sont de couleur rouge, cependant je voudrais celui de droite d’une autre couleur (bleu).

    J’inspecte donc le code source de ma page et son CSS je retrouve l’élément en question (cf « pièce jointe 2 »)

    Le hic c’est que la class qu’il possède « avia-menu-text » est le même que mon autre button et lorsque je change le CSS évidemment c’est la couleur des 2 buttons qui changent or, vous l’avez compris, je veux que la couleur d’un seul button change.

    J’ai essayé plusieurs choses avec les sélecteurs « + » »> » etc… en vain.

    M’y prends-je mal ?

    Merci.

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2038445
    Flobogo
    Modérateur
    Maître WordPress
    14635 contributions

    Bonjour,

    Essayez ça  :

    #menu-item-1107 .av-menu-button-colored > a .avia-menu-text {
      background-color: blue;
    }

    A insérer dans le CSS additionnel, à partir de Thèmes > Personnaliser.

    #2039351
    POLY 3000
    Participant
    Initié WordPress
    9 contributions

    Bonjour,

     

    Il n’y a aucun changement en rajoutant ces lignes dans le CSS.

    #2039654
    Flobogo
    Modérateur
    Maître WordPress
    14635 contributions

    Bien qu’un peu long, essayez ça :

    #menu-item-1107 .menu-item.menu-item-type-post_type.menu-item-object-page.av-menu-button.av-menu-button-colored.menu-item-top-level.menu-item-top-level-11 > a .avia-menu-text {
      background-color: blue;
    }

    Si ça fonctionne, essayez de supprimer une à une les premières classes

    #2041217
    PhiLyon
    Modérateur
    Maître WordPress
    19588 contributions
    #2044322
    POLY 3000
    Participant
    Initié WordPress
    9 contributions

    Merci pour l’aide que vous m’avez apporté, je me débloque petit à petit mais des problèmes subsistent !

    J’ai rajouté ces lignes dans le css ainsi que la class= »recrutement » grâce à la technique de PhiLyon, dans les menus (cf pièce jointe n°1 et 2)

    Alors les background-color restent rouges mais il semble avoir bien compris ma ligne Css puisque que quand je désactive la ligne (cf pièce jointe n°3) et bien c’est l’autre que j’ai nouvellement rajouté qui prend le relais (cf pièce jointe n°4)

    Quelle ligne faut-il rajouter dans le CSS ?

     

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2044483
    PhiLyon
    Modérateur
    Maître WordPress
    19588 contributions

    Tu n’avais pas dit que cet élément de menu faisait partie de l’extension Ultimate Member, regardes dans les menus settings de cette extension.

    🙂

    #2051677
    POLY 3000
    Participant
    Initié WordPress
    9 contributions

    Désolé pour la réponse tardive, mais quel est le rapport avec l’extension Ultimate Member ? Je ne vois pas de paramètres pour modifier la couleur d’un bouton d’un menu.

    #2052781
    Flobogo
    Modérateur
    Maître WordPress
    14635 contributions

    quel est le rapport avec l’extension Ultimate Member ?

    –> Voir votre pièce jointe n° 2 !!

    Essayez quand même de rajouter !important juste avant le point-virgule dans votre règle CSS :

    .recrutement > a > span.avia-menu-text {
    background-color: blue !important;
    }

    (j’ai également ajouté la balise span dans le déroulé de la règle)

    #2054242
    POLY 3000
    Participant
    Initié WordPress
    9 contributions

    Merci !!! Vous avez trouvé, il s’agissait en effet de rajouter !important pour qu’il le prenne en compte ! Encore une fois merci de votre aide à tous ^^

    #2055300
    POLY 3000
    Participant
    Initié WordPress
    9 contributions

    Je suis dans le regret de vous dire que je rencontre un nouveau problème =/

     

    Alors je me suis emballé trop vite, effectivement lorsque j’ai rajouté les lignes avec !important dans le css, la couleur change comme il faut (pièce jointe n°1)

     

    Cependant une fois que je quitte mon éditeur wordpress pour avoir une vision « visiteur » le bouton reste de couleur rouge (les nouvelles lignes css n’apparaissent pas) ! J’ai effacé le cache et toujours le même problème (manip effectuée sur un autre ordinateur idem). (pièce jointe n°2)

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2055686
    POLY 3000
    Participant
    Initié WordPress
    9 contributions

    Problème résolu ! C’était bel et bien un problème de cache.

    #2057855
    Flobogo
    Modérateur
    Maître WordPress
    14635 contributions

    C’était bel et bien un problème de cache.

    J’allais le dire 😉

    Merci d’avoir marqué « résolu ». 🙂

13 sujets de 1 à 13 (sur un total de 13)
  • Vous devez être connecté pour répondre à ce sujet.