Comment remplacer du CSS sur un thème enfant ? (Créer un compte)

  • WordPress :6.0
  • Statut : non résolu
14 sujets de 1 à 14 (sur un total de 14)
  • Auteur
    Messages
  • #2453320
    jeromeCRIJ
    Participant
    Initié WordPress
    9 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.

    #2453364
    Li-An
    Participant
    Maître WordPress
    28370 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 ?

    #2453776
    jeromeCRIJ
    Participant
    Initié WordPress
    9 contributions

    Merci pour votre réponse.

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

    #2453778
    mathieu42
    Participant
    Maître WordPress
    2010 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.

    #2453783
    jeromeCRIJ
    Participant
    Initié WordPress
    9 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

     

    #2453821
    mathieu42
    Participant
    Maître WordPress
    2010 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

     

     

    #2453822
    mathieu42
    Participant
    Maître WordPress
    2010 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

     

    #2454282
    jeromeCRIJ
    Participant
    Initié WordPress
    9 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 :/

    #2454283
    mathieu42
    Participant
    Maître WordPress
    2010 contributions

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

    #2454517
    jeromeCRIJ
    Participant
    Initié WordPress
    9 contributions

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

    #2454524
    mathieu42
    Participant
    Maître WordPress
    2010 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.

     

    #2454525
    jeromeCRIJ
    Participant
    Initié WordPress
    9 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.

    #2454560
    mathieu42
    Participant
    Maître WordPress
    2010 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.

     

    #2454583
    jeromeCRIJ
    Participant
    Initié WordPress
    9 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.

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