[Résolu] Style CSS du Theme enfant de TwentyTwenty non pris en compte (Créer un compte)

  • WordPress :5.8
  • Statut : résolu
7 sujets de 1 à 7 (sur un total de 7)
  • Auteur
    Messages
  • #2401589
    Nilros
    Participant
    Initié WordPress
    3 contributions

    Theme Bonjour,

    Je me permets de vous écrire un message, car j’ai découvert votre forum en essayant de trouver une réponse à mon problème.
    J’ai essayé les solutions proposés dans le sujet (https://wpfr.net/support/sujet/style-css-enfant-non-pris-en-compte/)
    mais la résolution finale, ne me convient pas. Je n’ai pas envie de changer de thème de base… Je veux rester sur un thème par défaut de wordpress très léger sans trop de fioriture…

    Ma configuration WP actuelle : 5.9.3

    • Version de PHP/MySQL : 7.4.1
    • Thème utilisé : twentytwenty / twentytwenty-child
    • Extensions en place : Akismet (Désactiver), Hello Dolly (Désactiver), Stackable (désactiver)
    • Nom de l’hébergeur : Localhost

    Problème(s) rencontré(s) :  Mon CSS enfant n’est pas pris en compte.

    Voici mes fichiers :

    CSS de twentytwenty-child :

    /*
    Theme Name: Theme de Milliet.FR
    Theme URI: 
    Description: Theme sur mesure via la base du theme for Twenty Twenty.
    Author: Fernagut Antoine
    Author URI: https://www.antoine-fernagut.fr
    Template: twentytwenty
    Version: 3.0
    License: GNU General Public License v2 or later
    License URI: https://www.gnu.org/licenses/gpl-2.0.html
    */
    
    
    body:not(.overlay-header) .primary-menu > li > a {
        color: #000000;
    }
    CSS de twentytwenty-child

    Functions.php de twentytwenty-child :

    <?php
    add_action( 'wp_enqueue_scripts', 'twentytwenty_styles');
    /* enqueue scripts and style from parent theme */        
    function twentytwenty_styles() {
    	wp_enqueue_style( 'twentytwenty', get_template_directory_uri() . '/style.css' );
    }
    functions.php du theme twentytwenty-child

     

    Merci d’avance de votre aide.

    • Ce sujet a été modifié le il y a 2 semaines et 4 jours par Nilros.
    #2401608
    Lumiere de Lune
    Participant
    Maître WordPress
    20207 contributions

    Bonjour

    C’est toujours difficile – voire impossible – de régler ce genre de problèmes sur un site non accessible.

    Via l’inspecteur (ctrl+k) tu peux vérifier :

    1- si ta feuille de style est bien chargée
    2- quel est le style css calculé pour l’élément que tu cherches à modifier et quelles sont les règles utilisées

    #2401609
    Nilros
    Participant
    Initié WordPress
    3 contributions

    Merci pour ta réponse, j’imagine bien que ce n’est pas facile sans avoir accès au site. Je ne peux pas faire autrement pour l’instant, navré.

    Alors  :

    Je ne sais pas trop si ALT+CMD+I est la même chose que l’inspecteur mais j’imagine que oui. je vois bien le CSS chargé. Je le vois bien aussi sur l’éléments que je cherche a modifier mais il passe au « second » plan (comme tu peux voir sur le screenshot en pièce jointe)

    Si je mets « !important » ça fonctionne mais je ne peux pas mettre !important à chaque fois si ? :/

    J’aimerai que le css du thème enfant soit pris en compte en priorité. Est-ce possible ?

     

    • Cette réponse a été modifiée le il y a 2 semaines et 3 jours par Nilros.
    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2401620
    Lumiere de Lune
    Participant
    Maître WordPress
    20207 contributions

    !important implique qu’il y a des css qui contredisent ta règle. Soit tu mets des selecteurs plus spécifiques, soit tu mets !important

    #2401624
    mathieu42
    Participant
    Maître WordPress
    1143 contributions

    je crois que le code css du thème parent à la priorité parce que c’est du code « inline » et non du code qui vient d’un fichier css.

    l’autre possibilité comme disait Lumiere de Lune, est de mettre un sélecteur plus spécifique en rajoutant « ul » par exemple :

    body:not(.overlay-header) ul.primary-menu > li > a {
        color: #000000;
    }

    #2401630
    Lumiere de Lune
    Participant
    Maître WordPress
    20207 contributions

    @mathieu42 « théoriquement » le code du thème parent est un fichier css chargé avant celui du thème enfant, mais là tu as raison, c’est du inline dans le fichier.

    le code inline provient au choix :

    • des personnalisations du thème (évidemment, on ne corrige pas une personnalisation du customizer par un css enfant, mais en modifiant la personnalisation)
    • des builders divers et variés, c’est une horreur (et là aussi il y a des options, qu’on peut modifier, et des trucs qui se chargent « au bloc » et c’est galère)
    • de thèmes ou de plugins mal construits, mais ce n’est pas le cas de twentytwenty, je pense ?

    Donc il faut voir ce qui génère ce style dans index.php (dans le code source)


    @Nilros
    le css du thème enfant est chargé « après » celui du thème parent, ça veut donc dire qu’il l’écrase (ce n’est pas vraiment une question de priorité), mais il y a les règles du css qui jouent aussi.

    1- plusieurs déclarations css, c’est la dernière qui est prise en compte
    2- l’id l’emporte sur la classe
    3- un sélecteur plus spécifique l’emporte sur un sélecteur plus général

    Si dans ton thème parent tu as par exemple div#toto p.monparagraphe

    et que tu ne mets que p.monparagraphe c’est le style du thème parent qui sera pris en compte.

    C’est pour ça que résoudre des problèmes de CSS sans VOIR le code source et pouvoir tout explorer au lieu d’avoir des copies d’écrans, c’est difficile

    #2401755
    Nilros
    Participant
    Initié WordPress
    3 contributions

    Bonjour,

    Merci pour vos réponses.

    Je n’ai pas utilisé le module de personnalisation de wordpress a part pour mettre le logo du site. et je n’ai pas de plugin d’installé à part Akismet (Désactiver), Hello Dolly (Désactiver), Stackable (désactiver)

    En effet en ciblant mieux avec « ul.primary » ça fonctionne. J’aurai du tester ça au lieu de douter de la configuration du thème enfant.

    Merci beaucoup de votre réactivité et vos conseils.

     

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