Insky (Créer un compte)

Toutes mes réponses sur les forums

15 sujets de 1 à 15 (sur un total de 30)
  • Auteur
    Messages
  • en réponse à : [Résolu] Contact Form 7 : mettre des images à des boutons radio #2464184
    Insky
    Participant
    Initié WordPress
    40 contributions
    Cette réponse a été marquée comme privée.
    en réponse à : [Résolu] Contact Form 7 : mettre des images à des boutons radio #2464183
    Insky
    Participant
    Initié WordPress
    40 contributions

    Je vois surtout que j’ai encore de beaux progrès à faire sur la compréhension globale. Vos retours sont vraiment instructifs.

    UAEL est une extension d’elementor. Je n’avais jamais utilisé sur le même site CF7 et UAEL mais tout est clair maintenant. UAEL propose un widget pour différentes extensions de formulaires, dont CF7 – qui rajoutent tout un tas d’options de mise en forme etc… dont je n’avais pas besoin mais qui sont toutes actives par défaut!

    J’ai donc pris le problème dans le bon sens, en désactivant les modules de formulaire d’UAEL et bien entendu, tout est rentré dans l’ordre.

    Un immense et sincère merci pour tout ce temps accordé!

    en réponse à : [Résolu] Contact Form 7 : mettre des images à des boutons radio #2464141
    Insky
    Participant
    Initié WordPress
    40 contributions

    Cela fonctionne merci. Par contre, j’hésite au final à revenir en arrière car cela a affecté également le champ RGPD plus bas (checkbox), si bien qu’on ne voit plus du tout la case à cocher (on ne voit que le message) donc niveau UX, çà ne va pas.

    J’ai tenté de lui donner un nom et une classe dans le formulaire CF7 puis de les appeler avec le code suivant dans le CSS mais cela n’a rien changé (j’avais indiqué une largeur grossière de 100px et une bordure rouge juste pour voir si çà fonctionnait) :

    #main .wpcf7-radio input[type="checkbox"][name="rgpd"]{}

    #main .rgpd::before {}

     

    en réponse à : [Résolu] Contact Form 7 : mettre des images à des boutons radio #2464133
    Insky
    Participant
    Initié WordPress
    40 contributions

    Je ne comprenais pourquoi il y avait autant de marge entre la case et le libellé, cela a attiré mon attention.
    En ajoutant le code ci-dessus, cela fonctionnement uniquement pour l’option choisie (les ombres restent pour les autres).

    J’ai tenté de rajouter une autre pseudo-classe (:default et :blank) mais cela n’a aucun effet sur les options non choisies.

    Laurent

    en réponse à : [Résolu] Contact Form 7 : mettre des images à des boutons radio #2464120
    Insky
    Participant
    Initié WordPress
    40 contributions

    Bonsoir @ferman,

    Effectivement, cela fonctionne. Il reste encore un détail étrange, c’est l’affichage d’une ombre en décalé de chaque bouton radio. On le voit en zoomant, à droite de chaque « rond » radio, il y a un autre rond (très légèrement plus bas, en gris très très clair) et ils sont également présents sur les boutons radio avec images (à gauche de l’intitulé) (un peu plus visible lors du survol pour les radio avec image).

    Un immense merci pour tout çà. Je ne pensais pas que çà serait si galère. Pour le coup, WP Forms est bien plus accessible (dommage que çà limite en version gratuite soit plus vite atteinte).

    Si jamais vous voyez d’où provient ces « ombres », je reste bien entendu preneur.

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    en réponse à : [Résolu] Contact Form 7 : mettre des images à des boutons radio #2464085
    Insky
    Participant
    Initié WordPress
    40 contributions

    Re,
    En effet, j’avais oublié de nommer différemment « Garde-corps », merci. C’est corrigé.

    Je viens de modifier le code en reprenant le vôtre mais cela ne change rien (mis à part enlever les bordures autour). Toujours impossible de cliquer. Voici le contenu du code mis à jour.

    Je n’avais pas dans mon code la classe suivante mais je l’ai ajouté :

    .uael-cf7-style

    
    
    input.image-radio {height: 135px; width: 135px;}

    input.image-radio:after {
    background-image: url('https://www.lela3644.odns.fr/wp-content/uploads/2023/11/devis-escalier-droit-simple.jpg');
    content: '';
    width: 135px;
    height: 135px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    }


    #main .wpcf7-list-item-label:before{
    border:none;
    }
    .uael-cf7-style .wpcf7-radio input[type="radio"][name="image-radio"]{
    display:none;}

    .image-radio .wpcf7-list-item-label {cursor: pointer; border:solid 1px #ccc; margin:5px; padding: 135px 0px 0px 0px; height: 135px !important; width:135px !important; background-color: #fff; display: block; opacity: 0.45; text-align: center;}
    .image-radio input[type="radio"]:checked + span.wpcf7-list-item-label, .image-radio .wpcf7-list-item-label:hover {opacity: 1 !important; color: #000; border:solid 1px #000;}
    .image-radio input[value="Escalier droit simple"] + span.wpcf7-list-item-label {background: transparent url("https://www.lela3644.odns.fr/wp-content/uploads/2023/11/devis-escalier-droit-simple.jpg") no-repeat scroll center;}
    .image-radio input[value="Escalier 1/4 tournant"] + span.wpcf7-list-item-label {background: transparent url("https://www.lela3644.odns.fr/wp-content/uploads/2023/11/devis-escalier-quart-tournant.jpg") no-repeat scroll center ;}
    .image-radio input[value="Escalier 2/4 tournant"] + span.wpcf7-list-item-label {background: transparent url("https://www.lela3644.odns.fr/wp-content/uploads/2023/11/devis-escalier-2-quart-tournant.jpg") no-repeat scroll center;}
    .image-radio input[value="Escalier hélicoïdal rond"] + span.wpcf7-list-item-label {background: transparent url("https://www.lela3644.odns.fr/wp-content/uploads/2023/11/devis-escalier-helicoidal-rond.jpg") no-repeat scroll center;}
    .image-radio input[value="Escalier hélicoïdal carré"] + span.wpcf7-list-item-label {background: transparent url("https://www.lela3644.odns.fr/wp-content/uploads/2023/11/devis-escalier-helicoidal-carre.jpg") no-repeat scroll center;}

    en réponse à : [Résolu] Contact Form 7 : mettre des images à des boutons radio #2464058
    Insky
    Participant
    Initié WordPress
    40 contributions

    Bonjour @ferman

    Merci pour ce retour. Le grain de sable était sous mes yeux sans que j’arrive à le voir. En fait l’ensemble du code était bon, c’est la définition de la class sur la ligne du bouton radio qui semble avoir changé. Sur le message original, on peut lire :

    [radio image-radio use_label_element default:1 "Moto" "Auto" "Bus" "Tram"]
    Avant

    Alors que maintenant, l’équivalent doit être :

    [radio vehicules class:image-radio use_label_element default:1 "Moto" "Auto" "Bus" "Tram"]
    Maintenant

    Du coup j’ai pu reprendre le code dont le rendu me convient très bien. J’ai peaufiné un peu en fonction de mes besoins. J’ai mis le résultat ici : lela3644.odns.fr/devis-en-ligne/

    Par contre, hormis ce champ avec les images, tous les autres boutons radio ne semblent pas fonctionner (impossible à cliquer dessus) :-/

     

     

    • Cette réponse a été modifiée le il y a 7 mois et 2 semaines par Insky.
    • Cette réponse a été modifiée le il y a 7 mois et 2 semaines par Insky.
    • Cette réponse a été modifiée le il y a 7 mois et 2 semaines par Insky.
    en réponse à : [Résolu] Personnaliser champ radio avec des images avec Contact Form 7 #2463829
    Insky
    Participant
    Initié WordPress
    40 contributions

    Bonjour,
    Je ne sais pas si je peux ré ouvrir ce message, qui m’intéresse beaucoup.  J’ai tenté la manipulation en vain. Vu que le message date, je ne sais pas si c’est toujours d’actualité.

    Serait-il possible d’avoir un petit coup de pouce ?

    P.S : dans mon cas, après avoir remplacer l’url des images dans le CSS et avoir mis le reste du code, il ne se passe rien (la mise en page du formulaire reste par défaut, avec le texte et sans image

    Insky
    Participant
    Initié WordPress
    40 contributions

    Merci pour ces échanges. Même problème rencontré ce jour et solutionné grâce à ce post !

    en réponse à : Comportement image à la une en guise de header #2417095
    Insky
    Participant
    Initié WordPress
    40 contributions

    Je viens de me rendre compte qu’en fait le carousel se stoppe si on le survole. Comme la zone est grande, si on laisse trainer le curseur dans cette partie de l’écran, çà ne bougera plus.

    Par contre il y avait une transition très simple (fondu) qui n’y est plus et effectivement le défilement est rapide.

    Il n’y a pas d’extension, c’est un carousel issu de bootstrap 5 intégré directement.

    en réponse à : Comportement image à la une en guise de header #2417076
    Insky
    Participant
    Initié WordPress
    40 contributions

    Bonjour,

    Je vous sollicite pour un dernier problème, que nous venons tout juste de détecter : le carousel de la page d’accueil ne défile plus automatiquement (https://www.ferme-sahouret.fr/).

    Nous ne savons pas à quel moment ni quelle modification a fait sauter quelque chose. Le défilement manuel par les flèches du côté ou les tirets en bas du carousel eux fonctionnent. Par contre, plus de transition ni de défilement automatique.

    Approchant de nos examens, nous sommes assez fébriles à tenter des modifications qui pourraient créer d’autres dégâts.

    Auriez-vous une idée ?

    Bon après-midi

    en réponse à : Comportement image à la une en guise de header #2414332
    Insky
    Participant
    Initié WordPress
    40 contributions

    Bonjour @mathieu42,

    Merci pour le retour. Entre temps j’ai réussi à avancer sur le problème de CSS. J’ai joué avec certains media queries. Il me semble que c’est mieux ?

    Pour la parenthèse RGPD, a priori, cela le respecte. J’ai bien relu ce lien que je connaissais. Il est préconisé de faire apparaître un bouton identique pour refuser mais ce n’est pas imposé. Le fond est imposé (l’internaute doit pouvoir exprimer son refus), la forme n’est que conseillée. De préciser d’ailleurs « En revanche, la seule présence d’un bouton « Paramétrer » en complément du bouton « Tout accepter » tend, en pratique, à dissuader le refus et ne permet donc pas de se mettre en conformité ».

    L’absence de conformité est manifeste lorsque il n’y a pas aucun moyen de refuser, mais pas si le moyen de refuse diffère sur la forme que l’acceptation. J’ai néanmoins pris la remarque en compte. Le bandeau a été mis à jour.

     

    en réponse à : Comportement image à la une en guise de header #2414316
    Insky
    Participant
    Initié WordPress
    40 contributions

    Bonjour,

    Je reviens pour un dernier debuggage qui me pose souci. Depuis, nous avons modifié plusieurs fois les formulaires, les titres, padding etc pour avoir un résultat plus homogène. Néanmoins, un bug, sans doute du à du CSS que je n’arrive pas à identifier, reste présent.

    Il se produit uniquement en version mobile – il suffit que le menu de navigation passe en hamburger – et de cliquer dessus, on voit alors que le menu vertical est quasi invisible, avec un voile blanc par dessus.

    Je vais continuer à chercher mais je ne suis pas contre un dernier petit coup de pouce.

    Bonne journée

    en réponse à : Comportement image à la une en guise de header #2412251
    Insky
    Participant
    Initié WordPress
    40 contributions

    Bonjour,

    Je réponds point par point :

    • Concernant les 3 logos. Il y a le logo « normal » quand on arrive sur la page (pleine taille, blanc), puis le logo dès qu’on commence à scroller (marron, plus petit) et enfin celui qui apparait au clic sur le toggle du hamburger en version mobile. Notre petit groupe n’est pas du tout expert en développement web. On a eu pas mal de mal à faire çà déjà (gérer le changement de menu au scroll en JS + css).
    • Ok pour le logo mobile. On va tester çà. Pour le padding, c’était un essai que j’ai fait juste après mon précédent message pour voir si çà pouvait fonctionner.
    • Pour le visuel du bas, il y a en fait 3 images différentes (oiseaux en top left, oiseaux en top right et scène paysanne en bas). Je ne sais pas si on peur assigner des « contain » sur différentes images de fond ?
    • Pour le formulaire, oui on s’en est rendu compte aussi et c’est moins pire que lorsqu’on l’a pris. C’est un formulaire provenant de Sendinblue car les contacts doivent partir directement en base de données sur cet outil, mais il n’est pas au point effectivement. On va essayer d’améliorer encore son comportement.

    Je suis bien d’accord pour les constructeurs, mais dans le cadre de la formation, il est strictement interdit d’utiliser un thème existant, un constructeur de page ou tout autre extension apportant du confort aux outils natifs prévus dans WordPress. Dans le cadre de ce projet, on n’a aucune obligation de résultat, seulement de « galérer » à faire par nous-même (mais forcément, on veut livrer quelque chose d’aussi « propre » que possible.

    Je n’aborde pas encore notre gros morceau : les CPT ! C’est la prochaine grosse étape qu’on doit faire par nous-même (possibilité de les créer par une extension mais pour les afficher, on devra créer nos fichiers en php).

     

    en réponse à : Comportement image à la une en guise de header #2412148
    Insky
    Participant
    Initié WordPress
    40 contributions

    Bonsoir,

    Merci pour la réponse détaillée et pour le lien. Ce n’est pas faute d’avoir déjà utilisé ces instructions pourtant! Cela fonctionne.

    On vient de se rendre compte d’un problème plus gênant. Je ne sais pas si je peux le décrire ici ou s’il vaut mieux que je fasse un autre message ?

    Cette image fixe sur les pages n’est pas responsive (elle ne s’adapte pas à la réduction de la résolution comme le carousel de l’accueil) mais surtout, carousel comme l’image fixe dès que l’on passe sur une résolution inférieure (qui déclenche le menu blanc au lieu du transparent), on ne voit presque plus les visuels. J’ai pensé qu’il fallait peut-être ajouter une règle dans le media querie correspondant à ce breakpoint comme un padding-top pour le décaler, mais ce n’est peut être pas la bonne méthode ?

     

     

15 sujets de 1 à 15 (sur un total de 30)