[Résolu] Rosemary – Encadrer un élément du menu en haut de page (Créer un compte)

  • WordPress :5.4
  • Statut : résolu
5 sujets de 1 à 5 (sur un total de 5)
  • Auteur
    Messages
  • #2343601
    ETNZ
    Participant
    Initié WordPress
    34 contributions

    Bonjour,

    Ma configuration WP actuelle

    • Version de PHP/MySQL : 5.7
    • Thème utilisé : Rosemary Solo Pine
    • Extensions en place : Akismet Anti-Spam, Bookly, Bookly pro, Bookly Advanced Google Calendar (Add-on), Classic Editor et Maintenance
    • Nom de l’hébergeur : 1&1 IONOS
    • Adresse du site : https://www.laianavia-osteo.com

    Problème(s) rencontré(s) : J’ai un menu en haut de page avec 6 liens dont un qui est “prendre un RDV”. Je souhaiterai que ce lien ressorte plus que les autres pour être identifié au premier coup d’œil. J’aimerai soit l’encadrer (idéalement) soit avoir un fond d’une couleur différente. Exemple avec la page Solo Pine jointe à mon présent message, “start a blog” est encadré.

    Merci d’avance pour votre aide.

    • Ce sujet a été modifié le il y a 1 semaine et 3 jours par ETNZ.
    • Ce sujet a été modifié le il y a 1 semaine et 3 jours par ETNZ.
    • Ce sujet a été modifié le il y a 1 semaine par Flobogo. Raison: déplacé en rubrique "Thèmes"
    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2343608
    ferman
    Participant
    Maître WordPress
    2511 contributions

    Bonjour,

    Si vous voulez que quelqu’un vous aide, il faut que le site ne soit pas en maintenance et que le menu soit visible en situation. Une copie d’écran n’est d’aucune utilité dans ce cas.

    #2343609
    ETNZ
    Participant
    Initié WordPress
    34 contributions

    Merci pour votre réponse. Malheureusement le site ne peut pas être en ligne maintenant et j’aimerai résoudre ce problème avant publication.

    J’ai un autre site avec le même thème, sur lequel je peux faire les tests : https://www.travelsteph.com/ (avec l’onglet “A propos” par exemple).

    Merci encore,

    #2343617
    ferman
    Participant
    Maître WordPress
    2511 contributions

    Dans l’autre site, il faudrait mettre le code CSS suivant pour “à propos”:

    li#menu-item-7132{border-style:solid;
    color:red;
    background-color:yellow;
    border-width:5px;
    height:45px;
    }

    Avec ce code, vous pouvez régler l’épaisseur du cadre,  sa couleur, la couleur de fond et la hauteur. Vous supprimes les lignes dont vous n’avez pas besoin. Il y a d’autres possibilités de style pour ce cadre. Vous copiez/collez les CSS dans la fenêtre des CSS additionnelles de votre thème. (editeur>Apparence >personnaliser>CSS additionnelles)

    Pour trouver où appliquer les CSS pour le site “secret”, cliquez droit sur l’élément de menu à modifier et faites “examiner l’élément”. En bas de la page apparait du code (voir pj). Vous notez la valeur de l’ID et remplacez 7132 par cette valeur. Si les conditions sont les mêmes pour les deux sites, ça devrait marcher.

    Et si vous voulez que ça marche aussi sur mobile, vous ajoutez en plus le code ci-dessous:

    .slicknav_nav li.menu-item-7132{border-style:solid;
    color:red;
    background-color:yellow;
    border-width:5px;
    height:20px;
    width:100px;
    }

     

    • Cette réponse a été modifiée le il y a 1 semaine et 3 jours par ferman.
    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2343629
    ETNZ
    Participant
    Initié WordPress
    34 contributions

    Immense merci Ferman, ça fonctionne parfaitement 🙂 J’ai modifié le code pour l’ajuster à nos besoins, voici ce que j’ai finalement inclus, j’espère que c’est “propre”.

    Encore merci en tout cas! On n’a plus qu’une bannière à créer et le site pourra être en ligne.

    
    li#menu-item-252{border-style:solid;
    		color:#C69F73;
    		border-width:2px;
    		height:47px;
    		padding-left:3px;
    		padding-right:3px;
    	}
    
    .slicknav_nav li.menu-item-252{border-style:solid;
    		color:#C69F73;
    		border-width:2px;
    		height:20px;
    	}

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