Comment remplacer du CSS sur un thème enfant ?

WordPress :6.0
Statut : non résolu

Ce sujet contient 13 réponses, 3 participants et a été mis à jour pour la dernière fois par jeromeCRIJ, le il y a 1 année et 3 mois.

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

Auteur

Messages
25 avril 2023 à 14 h 21 min #2453320

jeromeCRIJ
Participant

Initié WordPress
11 contributions

Bonjour,

J’utilise un thème enfant d’Hestia sur mon site http://www.crij.bzh et je suis entrain de le rendre plus responsive.

Afin d’éviter un affichage en deux lignes du header en mode tablette, je tente de supplanter le CSS à l’origine de ce soucis.

Après ajout de CSS dans mon éditeur de fichiers sur mon thème enfant, pas de répercussion sur mon site..

Ceci est le code que je souhaite supplanter (je souhaite changer le min-width: 769px en 991px) :

@media (min-width: 769px) .navbar-toggle {

display: none;

}

@media (min-width: 769px) .navbar-collapse.collapse {

display: block !important;

height: auto !important;

padding-bottom: 0;

overflow: visible !important;

}

Je vous remercie.

26 avril 2023 à 10 h 18 min #2453364

Li-An
Participant

Maître WordPress
28633 contributions

Bonjour, utiliser un thème enfant développé à l’extérieur n’est jamais une bonne solution car elle limite vos possibilités de personnalisation. Vous avez bien modifié les lignes du fichier styles.css du thème enfant (en passant par le FTP pour récupérer le fichier) ? Vous avez bien nettoyé vos caches, testé avec plusieurs appareils ?

2 mai 2023 à 12 h 25 min #2453776

jeromeCRIJ
Participant

Initié WordPress
11 contributions

Merci pour votre réponse.

Je suis passé par l’éditeur du fichier style sur wordpress, est ce que cela peut mal fonctionner ?

2 mai 2023 à 12 h 54 min #2453778

mathieu42
Participant

Maître WordPress
2013 contributions

je ne vois pas de code dans le fichier du thème enfant :
https://crij.bzh/wp-content/themes/hestia_enfant/style.css

est ce que vous avez mis votre code css dans « Apparence » -> « Personnaliser » -> « CSS additionnel » ?

petite parenthèse à voir plus tard quand ce souci de css sera réglé : l’image du logo est beaucoup trop grande.

2 mai 2023 à 15 h 09 min #2453783

jeromeCRIJ
Participant

Initié WordPress
11 contributions

Je l’ai retiré comme je ne voyais pas de modification. J’avais essayé dans CSS additionnel ainsi que dans « Apparence » -> « Editeur de fichiers de theme » -> « style.css »

Trop grande niveau résolution native de l’image ? Je me demandais aussi

3 mai 2023 à 22 h 17 min #2453821

mathieu42
Participant

Maître WordPress
2013 contributions

d’après ce que j’ai vu, c’est une particularité du thème qui produit l’utilisation de cette image en taille maximale.
wordpress produit plusieurs tailles d’image qui pourrait convenir comme la suivante par exemple mais le thème ne l’utilise pas donc il faut choisir une image réduite dans la configuration du logo.

https://crij.bzh/wp-content/uploads/2023/03/MicrosoftTeams-image-1-1-300×150.png

3 mai 2023 à 22 h 22 min #2453822

mathieu42
Participant

Maître WordPress
2013 contributions

je ne peux plus modifier le message précédent pour corriger l’url. l’image est là :

https://crij.bzh/wp-content/uploads/2023/03/MicrosoftTeams-image-1-1-300x150.png

11 mai 2023 à 17 h 11 min #2454282

jeromeCRIJ
Participant

Initié WordPress
11 contributions

Merci pour votre réponse !

En effet l’image avait une très grande résolution, je l’ai remplacée par celle en 300*150

Je n’ai cependant pas réussi à modifier le CSS sur mon thème enfant :/

11 mai 2023 à 17 h 40 min #2454283

mathieu42
Participant

Maître WordPress
2013 contributions

commencez déjà par le mettre dans « CSS additionnel »

15 mai 2023 à 12 h 04 min #2454517

jeromeCRIJ
Participant

Initié WordPress
11 contributions

C’est fait, j’ai ajouté le code dans CSS additionnel !

15 mai 2023 à 14 h 02 min #2454524
mathieu42
Participant

Maître WordPress
2013 contributions
je vois maintenant pourquoi le code ne s’applique pas : la condition « media » est un bloc en elle même donc ça devrait donner quelque chose comme ça :
```
@media (min-width: 769px)
{
	
	.navbar-toggle
	{
		display: none !important;
	}

	.navbar-collapse.collapse
	{
		display: block !important;
		height: auto !important;
		padding-bottom: 0 !important;
		overflow: visible !important;
	}
	
}
```
ensuite le code css en lui même n’a pas l’air de modifier quelque chose dans votre site mais à partir de cette base, vous pouvez utiliser les outils de développement de votre navigateur pour les corriger.
15 mai 2023 à 14 h 07 min #2454525

jeromeCRIJ
Participant

Initié WordPress
11 contributions

D’accord merci c’est plus clair comme cela.

Par contre en effet ça ne supplante pas le code que je trouve dans les outils de dvp et je ne sais pas pourquoi.

16 mai 2023 à 1 h 24 min #2454560
mathieu42
Participant

Maître WordPress
2013 contributions
pour forcer l’affichage du bouton avec les 3 traits quand l’écran est plus petit que 992 px, vous pouvez par exemple ajouter cela :
```
@media (max-width: 992px)
{
	
	.navbar-toggle
	{
		display: block !important;
	}
	
}
```
mais après le menu utilise beaucoup de code css et même du javascript pour faire cela donc c’est encore beaucoup de travail pour modifier cet affichage.
16 mai 2023 à 11 h 32 min #2454583
jeromeCRIJ
Participant

Initié WordPress
11 contributions
Ok cela affiche bien le bouton ! J’ai cherché de mon côté en ajoutant
```
.navbar-collapse.collapse
	{
		display: none !important;
	}
```
à la suite du code que vous m’avez suggéré, ce qui cache les items de menu comme en mode mobile. Cependant il manque le bon fonctionnement du menu déroulant.
Auteur

Messages