[Résolu] Problème affichage plugin sur moitié de single-post (Créer un compte)

  • WordPress :5.8
  • Statut : résolu
13 sujets de 1 à 13 (sur un total de 13)
  • Auteur
    Messages
  • #2411040
    alexdjordjic
    Participant
    Chevalier WordPress
    107 contributions

    Bonjour,

    Ma configuration WP actuelle :
    – Version de WordPress : 6.0.1
    – Version de PHP / MySQL : 7.4.25 / 5.7.38
    – Thème utilisé : PenNews Child (slug : pennews-child)
    – Thème parent : PenNews (slug : pennews)
    – Thème URI : http://pennews.pencidesign.com/
    – Extensions en place : Actirise (1.1.0), AddQuicktag (2.6.1), Ad Inserter (2.7.17), Advanced Custom Fields (5.12.3), Advanced Editor Tools (previously TinyMCE Advanced) (5.6.0), Akismet Anti-Spam (4.2.5), AnWP Football Leagues (0.14.6), AnWP Football Leagues Premium (0.14.6), Bing Webmaster Url Submission (1.0.13), ChoicePlugin (1.0), Classic Editor (1.6.2), Classic Widgets (0.3), CMB2 (2.10.1), Content Views (2.4.0.7), Edit Author Slug (1.8.4), Enhanced Plugin Admin (1.16), Envato Market (2.0.7), EWWW Image Optimizer (6.6.0), Flexible SSL for CloudFlare (1.3.1), GDPR Data Request Form (1.6), Infosite (0-015), Inline Related Posts (3.0.9), Insert PHP Code Snippet (1.3.3), Jetpack (11.1.1), Loco Translate (2.6.2), NextGEN Gallery (3.26), Penci Framework (6.6.0), Penci PenNews AMP – WordPress Complete AMP (1.4), Penci PenNews Slider (2.1), Plugin Activation Date (1.1), Publicize With Hashtags (0.1.4), Quantcast Choice (2.0.4), Recently Registered (3.5), Scheduled Post Trigger (3.0), SiteOrigin CSS (1.5.3), TinyMCE Spellcheck (1.3), UpdraftPlus – Backup/Restore (1.22.14), User Role Editor (4.63), User Submitted Posts (20220517), Vafpress Post Formats UI (1.7), Wordfence Security (7.5.11), WP All Import (3.6.8), WPBakery Page Builder (6.9.0), WPForms Lite (1.7.5.2), WPide (2.6), WProofreader (2.6.5), Yoast Duplicate Post (4.5), Yoast SEO (19.3)
    – Adresse du site : https://peuple-vert.fr
    – Hébergeur : OVH

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

    Bonjour,

    Je ne parviens pas à obtenir le résultat que je souhaite afin d’afficher un plugin correctement dans un article.

    En effet, j’ai un plugin qui me permet d’afficher les notes des joueurs de football et de faire voter les visiteurs afin qu’il évaluent également les joueurs après une rencontre.

    Problème : Ce plugin ne s’affiche que sur la moitié de l’article (alors que si j’écris du texte dans ce même article, il s’affichera en pleine largeur de façon normale).

    Je pensais que c’était un souci du CSS du plugin, mais il semblerait que tout se situe dans le CSS du thème Pennews que j’utilise. Cela reste toutefois à confirmer.

    Je vous livre quelques images :

    • Une image du résultat souhaité
    • Une image de ce que j’obtiens aujourd’hui

    Je vous remercie d’avance pour votre aide…

    Alexandre

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2411046
    mathieu42
    Participant
    Maître WordPress
    1313 contributions

    montrez nous une page qui présente ce souci.

    #2411050
    alexdjordjic
    Participant
    Chevalier WordPress
    107 contributions
    #2411053
    Lumiere de Lune
    Participant
    Maître WordPress
    20419 contributions

    Bonjour,

    c’est le

    <article class="row item slide" data-id="79428" style="display: flex;">

    qui pose problème.

    Est-ce que vous retrouvez la chaine style= »display: flex » dans le plugin ?

     

    #2411062
    alexdjordjic
    Participant
    Chevalier WordPress
    107 contributions

    Absolument. Lefichier « Modal » du dossier CSS comporte ces lignes :

     

    .card {
    display: flex;
    width: 100%;
    flex-direction: row;
    height: max-content;
    justify-content: flex-end;

     

    et également celles-ci plus loin :

    .profile-item {
    display: flex;
    }
    .profile-item img {
    width: 70px;
    }
    .profile-item label {
    font-size: 20px;
    }
    .profile-item {
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: beige;
    margin: 5px;

    #2411072
    Lumiere de Lune
    Participant
    Maître WordPress
    20419 contributions

    ça c’est du css, mais ce que je vous ai montré c’est du html, un peu plus compliqué à corriger, regardez dans les fichiers php

    #2411077
    ferman
    Participant
    Maître WordPress
    5243 contributions

    Bonjour,

    Je pense que rajouter :

    .row.item.slide{
    width:200%;}

    dans les CSS additionnelles du thème (éventuellement en ajoutant  » !important  » après 200%) devrait fonctionner.

    Je ne vois pas pourquoi ce « 200% » et ça ne me plaît pas trop mais je ne vois pas « d’effet secondaire non désiré  » sur le site.

     

    • Cette réponse a été modifiée le il y a 3 semaines et 1 jour par ferman.
    #2411079
    alexdjordjic
    Participant
    Chevalier WordPress
    107 contributions

    Vous êtes un magicien !!

    Pour que je comprenne bien, que fait cette commande ? Je crois saisir qu’elle double la largeur…

    Maintenant je vais essayer de travailler les polices et les espaces entre chaque joueur car ça fait un peu empilement….

    Je bosse et si j’ai du mal je me permets de revenir vers vous 🙂

    Encore merciii à vous tous !

    #2411084
    ferman
    Participant
    Maître WordPress
    5243 contributions

    Vous êtes un magicien !!

    Non, un bidouilleur tout au plus et comme je le disais cette solution ne me plaît pas énormément . Elle double la largeur de l’élément parent « .row.item.slide ». Il faudrait plutôt arriver à ce que les éléments contenus dans « .row.item.slide » remplissent tout l’espace disponible au lieu de s’arrêter à la moitié. Pour le moment je n’ai pas encore trouvé comment faire.

    #2411085
    ferman
    Participant
    Maître WordPress
    5243 contributions

    Bon, je pense avoir une meilleure solution. Dans vos CSS, vous avez

    .row::after, .penci-row::after {
    	content: " ";
    	display: table;
    	width: 100%;
    }

    Cette règle ajoute un espace vide de largeur 100% après « .row et donc la partie utile (image.text) ne peut pas faire plus de la moitié de la largeur  totale. Quand on fait « .row.item.slide » = 200%  on double la largeur totale de cet élément flex et aussi des éléments intérieurs .  C’est assez artificiel.

    Une meilleure solution est de porter la largeur des « after à 0%. Comme ci-dessous :

    .row::after, .penci-row::after {width:0%}

    A mon avis, il vaut donc mieux que vous remettiez la valeur que vous avez changée précédemment à 100% et que vous colliez le code ci-dessus dans les CSS additionnelles. Le résultat sera le même mais c’est plus logique.

     

     

    #2411126
    alexdjordjic
    Participant
    Chevalier WordPress
    107 contributions

    Merci Ferman,

    Votre solution fonctionne très bien !

    Je poursuis après plusieurs tentatives :

    Ci-joint un image numérotée. J’essaye de bosser mon CSS (choice.css). Il en existe 2 dans mon dossier de plugin :

    • 1 dans un dossier « view »
    • 1 dans un dossier « assets/CSS »

    Je trouve déjà cela étrange…

    Les deux semblent identiques.

    Voici ce que je souhaiterais faire :

    n°1 : Diminuer la taille de la police de « Note de la rédaction » et rapprocher ce texte de la jauge correspondante (celle avec la note « 6 »)

    n°2 : Diminuer la taille de la police de « Note des lecteurs » et rapprocher ce texte de la jauge correspondante (celle avec la note « 8 Moyenne de 2 notes ») et l’éloigner de la jauge du n°1

    n°3 : Diminuer la taille de la police de « Votre note » et rapprocher ce texte de la jauge correspondante (celle avec la note « 8 modifier la note ») et l’éloigner de la jauge du n°2

    n°4 : Eloigner le bloc de celui du haut (E. Green) et de celui du bas (A. Briançon).

    J’ai déjà essayé de changer les couleurs (dans les 2 fichiers « choice.css)  mais rien ne se met à jour… Je ne comprends pas…

    Merci pour votre aide

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2411150
    ferman
    Participant
    Maître WordPress
    5243 contributions

    Bonjour,

    Essayez les CSS suivantes (à mettre dans les CSS additionnelles du thème, pas de « choice »), et réglez les dimensions et couleurs comme vous voulez.

    .choice-plugin .choice-holder .choice-item h4 {margin-bottom:5px;
    margin-top:10px;
    font-size:12px;
    color:red;
    }
    .choice-item button {position:relative;
    	top:10px;
    } 
    .row.item.slide{margin-top:40px;
    }

    • Cette réponse a été modifiée le il y a 3 semaines par ferman.
    #2411155
    alexdjordjic
    Participant
    Chevalier WordPress
    107 contributions

    Merci Ferman,

    Tout fonctionne à la perfection.

    J’étais en train de bidouiller mais encore loin de votre solution… On est spécialiste ou on ne l’est pas !

    Un grand merci à vous. Je pense avoir obtenu le résultat escompté !!

    Bon dimanche

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