[Résolu] background image cache la visibilité du menu déroulant : comment faire ? (Créer un compte)

  • WordPress :5.2
  • Statut : résolu
9 sujets de 1 à 9 (sur un total de 9)
  • Auteur
    Messages
  • #2285087
    Clémentine
    Participant
    Initié WordPress
    47 contributions

    Bonjour,

    Ma configuration WP actuelle

    • Version de PHP/MySQL : 7.0
    • Thème utilisé : Avada
    • Extensions en place : contact form 7, akismet, yoast, easy google font, pop up maker, maxbutton
    • Nom de l’hébergeur : Online
    • Adresse du site : http://yoga.masson-webmaster.com/contact

    Problème(s) rencontré(s) :

    Bonjour,

    J’ai mis ue image de fond pour formulaire de contact, et du coup, on ne voit plus le menu déroulant pour Objet :

    comment pourrais-je faire pour garder l’image de fond y compris sur les lignes de formulaire.

    J’ai mis le code suivant sur mon formulaire Contact form 7 :

    <div style=”background:url(http://yoga.masson-webmaster.com/wp-content/uploads/2019/10/Om-mur-contact-clair-petit-2.jpg) 0 0 no-repeat;
    opacity:0.75″>
    <label> Votre prénom et nom (obligatoire)
    [text* your-name class:image] </label>

    <label> Votre adresse de messagerie (obligatoire)
    [email* your-email class:image] </label>

    <label> Objet
    [select* menu-234 “Inscription” “Cours d’initiation” “Maternité” “Stage” “Atelier” “Retraites d’été” “Yoga thérapeutique” “Entretien Sadhana” “Autres” class:image]
    </label>

    <label> Votre message
    [textarea your-message class:image] </label>

    [submit “Envoyer”]
    </div>

    • Ce sujet a été modifié le il y a 10 mois et 2 semaines par PhiLyon.
    #2285091
    PhiLyon
    Modérateur
    Maître WordPress
    26432 contributions

    Bonjour.

    Je ne pense pas que l’on puisse mettre du HTML dans le corps du formulaire dans Contact Form 7.

    Essaies comme-ça dans ta page peut-être

    <div style=”background:url(http://yoga.masson-webmaster.com/wp-content/uploads/2019/10/Om-mur-contact-clair-petit-2.jpg) 0 0 no-repeat;
    opacity:0.75″>
    Le shortcode du formulaire
    </div>

    🙂

     

    #2285102
    Clémentine
    Participant
    Initié WordPress
    47 contributions

    Je voudrais avoir l’image de fond dans le formulaire, et non dans ma page.

    ok, j’ai enlevé le code du formulaire, et dans CSS options customize j’ai mis :

    .wpcf7{
    background:url(http://yoga.masson-webmaster.com/wp-content/uploads/2019/10/Om-mur-contact-clair-petit-2.jpg) 0 0 no-repeat;
    opacity:0.75;
    }

    Malheureusement, le menu déroulant n’apparaît toujours pas au niveau de Objet…

    Merci pour votre aide,

    #2285110
    Clémentine
    Participant
    Initié WordPress
    47 contributions

    Ah oui, j’ai aussi rajouté de la transparence aux lignes du formulaires pour laisser voir l’image :

    mais du coup on a plus le texte du menu déroulant alors qu’on voit bien les autres textes …

    .image{
    background-color:rgba(0,0,0,0) !important;
    }

    #2285152
    PhiLyon
    Modérateur
    Maître WordPress
    26432 contributions

    Tu parles de quel menu déroulant ?

    Dans le code il n’apparait pas.

    🙂

    #2285158
    Clémentine
    Participant
    Initié WordPress
    47 contributions

    J’ai enlevé la classe image sur le menu, et là vous devriez voir dans le code le menu déroulant.

    Mais du coup on ne voit plus le fond de l’image sur le menu déroulant.

    Aïe

    #2285159
    PhiLyon
    Modérateur
    Maître WordPress
    26432 contributions

    Essaies comme-ça

    .wpcf7-form .wpcf7-select {background: transparent}

    🙂

    #2285160
    Rock4Temps
    Participant
    Chevalier WordPress
    130 contributions

    Bonjour,

    le problème est avec le code du formulaire, essayez ceci

    <label> Objet
    [select* menu-234 class:image “Inscription” “Cours d’initiation” “Maternité” “Stage” “Atelier” “Retraites d’été” “Yoga thérapeutique” “Entretien Sadhana” “Autres” ]
    </label>

    il faut que la class:image soit déclarée juste après le nom du menu: menu-324 sinon le code du menu n’est pas pris en compte.

    bonne soirée

     

    #2285174
    Clémentine
    Participant
    Initié WordPress
    47 contributions

    Génial !! Ca marche nickel avec <span style=”display: inline !important; float: none; background-color: #ffffff; color: #333333; font-family: ‘proxima-nova’,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;”>class:image</span> bien placé dans menu :

    <span style=”display: inline !important; float: none; background-color: #ffffff; color: #333333; font-family: ‘proxima-nova’,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;”><label> Objet</span>
    <span style=”display: inline !important; float: none; background-color: #ffffff; color: #333333; font-family: ‘proxima-nova’,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;”> [select* menu-234 class:image “Inscription” “Cours d’initiation” “Maternité” “Stage” “Atelier” “Retraites d’été” “Yoga thérapeutique” “Entretien Sadhana” “Autres” ]</span>
    <span style=”display: inline !important; float: none; background-color: #ffffff; color: #333333; font-family: ‘proxima-nova’,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;”> </label></span>

     

    Merci beaucoup !

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