Style CSS du Theme enfant de TwentyTwenty non pris en compte

WordPress :5.8
Statut : résolu

Ce sujet contient 6 réponses, 3 participants et a été mis à jour pour la dernière fois par Nilros, le il y a 10 mois et 3 semaines.

7 sujets de 1 à 7 (sur un total de 7)

Auteur

Messages
29 avril 2022 à 15 h 31 min #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 10 mois et 3 semaines par Nilros.
29 avril 2022 à 18 h 55 min #2401608

Lumiere de Lune
Participant

Maître WordPress
20535 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

29 avril 2022 à 19 h 24 min #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 10 mois et 3 semaines par Nilros.
Fichiers joints :
Vous devez être connecté pour voir les fichiers joints.
29 avril 2022 à 20 h 09 min #2401620

Lumiere de Lune
Participant

Maître WordPress
20535 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

29 avril 2022 à 21 h 14 min #2401624
mathieu42
Participant

Maître WordPress
1959 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;
}
```
30 avril 2022 à 0 h 27 min #2401630
Lumiere de Lune
Participant

Maître WordPress
20535 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
2 mai 2022 à 11 h 06 min #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.
Auteur

Messages