[Résolu] CSS personnalisé ou thème enfant ? (Créer un compte)

  • WordPress :6.1
  • Statut : résolu
15 sujets de 1 à 15 (sur un total de 23)
  • Auteur
    Messages
  • #2434656
    Broussaille
    Participant
    Chevalier WordPress
    297 contributions

    Bonjour à toutes & à tous.

    Une question que je me pose depuis un moment : est-il encore utile de créer un thème enfant pour y ajouter du css en « petite » quantité, puisqu’on peut le faire via le css personnalisé du customizer ? J’avais lu sur ce forum (mais je ne sais plus où), qu’utiliser le css personnalisé (du customizer), ce n’était valable que pour peu d’ajout. D’accord mais… combien de lignes, etc… L’avantage certain du customizer, c’est le changement effectif direct qui est fait dès l’enregistrement. Mais sinon ? Là, par exemple j’ai ajouté ça :

    body{font-family: Comic Sans MS;}
    .colors-dark .site-content-contain {background: #58909d;}
    .colors-dark .navigation-top {background: #58909d;}
    .colors-dark .main-navigation ul {background: transparent;}
    a {font-size: 15px;}
    .navigation-top {
    background: #58909d;
    border-bottom: none;
    border-top: none;}
    .page-header, .entry-meta {
    display: none;}
    .entry-title, .navigation-top a, .wpcf7 form.sent .wpcf7-response-output {
    border: 1px solid #1b72bd;
    border-radius: 10px;
    max-width: max-content;
    padding: 5px;}
    .more-link {display: flex;justify-content: center; border: 1px solid; border-radius: 10px; border-radius: 10px;max-inline-size: max-content;
    padding: 3px;}
    .colors-dark .entry-content a, .colors-dark .entry-title a, .colors-dark .site-info a {box-shadow: none;}
    .site-header .navigation-top .menu-scroll-down {color: #0be7fd;}
    .colors-dark .single-featured-image-header,.colors-dark .entry-content a {
    background-color: #58909d;}
    .colors-dark .single-featured-image-header, .colors-dark .navigation-top, .colors-dark .main-navigation li, .colors-dark .entry-footer, .colors-dark #comments {
    border-bottom-color: #58909d;}
    .single-featured-image-header img {
    border-radius: 20px;}
    .colors-dark .post-navigation a {box-shadow:none;}
    .nav-subtitle, .nav-title-icon-wrapper {display: none;}
    .colors-dark .entry-content a img, .colors-dark .comment-content a img, .colors-dark .widget a img {
    -webkit-box-shadow: 0 0 0 8px #326864;
    box-shadow: 0 0 15px #326864;}
    .colors-dark input[type="text"], .colors-dark input[type="email"], .colors-dark input[type="url"], .colors-dark input[type="password"], .colors-dark input[type="search"], .colors-dark input[type="number"], .colors-dark input[type="tel"], .colors-dark input[type="range"], .colors-dark input[type="date"], .colors-dark input[type="month"], .colors-dark input[type="week"], .colors-dark input[type="time"], .colors-dark input[type="datetime"], .colors-dark input[type="datetime-local"], .colors-dark input[type="color"], .colors-dark textarea, .colors-dark select, .colors-dark fieldset, .wpcf7 input[type="file"], .colors-dark input[type="submit"] {background: #F5F6CE;
    border: 2px solid #2E2EFE;
    border-radius: 10px;
    color: black;}
    .colors-dark input[type="text"]:focus, .colors-dark input[type="email"]:focus, .colors-dark input[type="url"]:focus, .colors-dark input[type="password"]:focus, .colors-dark input[type="search"]:focus, .colors-dark input[type="number"]:focus, .colors-dark input[type="tel"]:focus, .colors-dark input[type="range"]:focus, .colors-dark input[type="date"]:focus, .colors-dark input[type="month"]:focus, .colors-dark input[type="week"]:focus, .colors-dark input[type="time"]:focus, .colors-dark input[type="datetime"]:focus, .colors-dark input[type="datetime-local"]:focus, .colors-dark input[type="color"]:focus, .colors-dark textarea:focus, .colors-dark select:focus, .colors-dark fieldset{color: black;}
    .pswp {
    --pswp-bg: #8cd4e6;}
    .wpcf7-form.init a {
    color: #2e2efe;
    font-size: large;}

    Ce n’est pas énorme, et ça fonctionne très bien évidemment, mais je suis old school, et pour moi le thème enfant ça reste un peu le B.A / BA (J’ai fait mes premières modif avec l’aide de Philyon, Flobogo, et quelques autres…ça ne nous rajeunit pas !)

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

    la différence entre les 2 endroits est que le code css du thème enfant est dans un fichier séparé.
    cela permet au navigateur de mettre ce fichier dans le cache pour afficher la page un peu plus vite.

    et à l’inverse le code css mis dans « CSS additionnel » est mis dans le code html de la page et est donc présent sur chaque page.

    #2434812
    Broussaille
    Participant
    Chevalier WordPress
    297 contributions

    Bonjour mathieu42.

    Il me semblait que j’avais lu quelque chose comme ça quelque part, mais j’avais un doute. Merci donc pour la réponse. Je viens de « rebasculer » mon css dans mon thème enfant. Bon, évidemment, tant que ça se « mette » en place, le look a un peu changé, mais rien d’insupportable. Et bonnes fêtes de fin d’année (si je ne reviens pas poser une question d’ici là… ).

    #2435010
    Flobogo
    Modérateur
    Maître WordPress
    19084 contributions

    Bonjour,

    Je suis du même avis que Mathieu42. Inutile d’aller afficher tout un tas de CSS (ou même juste un peu) dans le HTML des pages du site.

    Je dirais que le seul avantage du CSS personnalisé, c’est qu’on peut le tester plus vite qu’en éditant/modifiant un fichier de style avec Notepad++ et envoi du fichier modifié via FTP. Mais une fois que la modif vous convient, il suffit de l’intégrer au thème-enfant.

    Je viens de « rebasculer » mon css dans mon thème enfant (…) tant que ça se « mette » en place

    C’est immédiat. Sauf si vous avez une extension de cache, qu’il faut vider pour que les modif soient visibles.

    _______________________________________________

    PS : « ça ne nous rajeunit pas ! » … Ah ben, merci !! 👵

    #2435104
    Broussaille
    Participant
    Chevalier WordPress
    297 contributions

    Bonjour mathieu42, et bonjour Flobogo 👵.

    Bon, ben non ça ne fonctionne pas. Quand je colle mon code dans le customizer, effectivement c’est pris en compte immédiatement. Mais quand je le mets dans mon thème enfant, rien n’est pris en compte (si ce n’est les bordures des titres, allez savoir pourquoi… et pas dans tous les navigateurs !). J’ai vérifié le code d’activation de mon thème enfant dans mon functions.php, il est bon. Ou je suis aveugle :

    <?php
    /**
    ** activation theme (so.blog)
    **/
    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
    function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );}
    // logo personnalise
    function childtheme_custom_login() {
    echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/login.css" />';}
    add_action('login_head', 'childtheme_custom_login');
    function year_shortcode () {
    $year = date_i18n ('Y');
    return $year;
    }
    add_shortcode ('year', 'year_shortcode');
    // Modifier l'URL du logo de connexion sur la page d'administration

    add_filter( 'login_headerurl', 'wpm_custom_login_url' );

    function wpm_custom_login_url($url) {
    // On définit la nouvelle URL du lien ici
    return 'https://so.broussaillestore.fr/';
    }
    ?>

    Et mon code style.css (que j’ai mis dans mon premier post) est bon aussi, a priori. Je ne comprends pas. D’habitude ça marche !

    #2435105
    Broussaille
    Participant
    Chevalier WordPress
    297 contributions

    Ah, au cas où… vous auriez du temps à perdre…

    So.Broussaille

    #2435107
    mathieu42
    Participant
    Maître WordPress
    1855 contributions

    je vois ça, j’ai l’impression que le code css du thème enfant est pris en compte :
    https://wtf.roflcopter.fr/pics/ISWwuZIZ/cxpVza3r.png

    c’est peut-être votre navigateur qui a une ancienne version en cache ?

    #2435108
    mathieu42
    Participant
    Maître WordPress
    1855 contributions

    pour utiliser le numéro de version qui est dans le fichier css du thème enfant, chargez les fichiers css avec ce code :

    add_action("wp_enqueue_scripts", function () {

    wp_enqueue_style(
    "style-parent"
    , get_template_directory_uri() . "/style.css"
    , []
    , wp_get_theme()->parent()->version
    );

    wp_enqueue_style(
    "twentyseventeen-style"
    , get_stylesheet_uri()
    , ["style-parent"]
    , wp_get_theme()->version
    );


    });

     

     

    #2435141
    Broussaille
    Participant
    Chevalier WordPress
    297 contributions

    Alors pour votre « capture » (c’est quoi l’outil ?), justement vous voyez la version du thème sans modif de couleurs de fond, etc… Mon css devrait donner un fond bleu…

    Et votre code, je le colle dans mon functions.php (thème enfant), mais version ? Il faut que je mette une version, ou je laisse comme ça ?

    #2435142
    Broussaille
    Participant
    Chevalier WordPress
    297 contributions

    Et sinon, merci. Le nez dans le code, on en oublie les bonnes manières !

    #2435162
    mathieu42
    Participant
    Maître WordPress
    1855 contributions

    pour le code, il est à mettre à la place du « wp_enqueue_style » qui est dans functions.php.

    pour la capture, je l’ai faite avec firefox.

    et au sujet du fond bleu, le fichier css est bien pris en compte, c’est le code css en lui même qui n’est pas bon puisqu’il y a l’autre couleur qui a une priorité plus haute. vous pouvez voir cela avec la console de développement de votre navigateur.

     

    #2435176
    Broussaille
    Participant
    Chevalier WordPress
    297 contributions

    Ok, merci, je vais regarder ça. Je ne suis pas très performant avec les priorités dans le css.

    Bonne soirée.

    #2435178
    Broussaille
    Participant
    Chevalier WordPress
    297 contributions

    Et bien voilà, je n’y comprend rien. Dans la console, je vois bien que les couleurs du thème prennent le pas, mais il me semblait que les priorités étaient définies par des chiffres. Là je ne vois pas ce qui donne la priorité aux couleurs du thème.

    #2435220
    Flobogo
    Modérateur
    Maître WordPress
    19084 contributions

    Sinon, question bête, vous avez essayé avec !important ?

    #2435281
    Broussaille
    Participant
    Chevalier WordPress
    297 contributions

    Bonjour Flobogo. Ben non je n’ai pas tenté le !important. C’est généralement pas « recommandé », d’aprsè ce qu’en disent les pros, et les inspecteurs du code ! Mais là, je ne vois pas comment faire autrement. J’ai bien tenté de « voir » dans la console du navigateur, comme me le disait mathieu42, mais je ne vois pas comment la priorité joue sur le css. Donc je vais revenir au !important.

    PS : il me semble qu’avant on se tutoyait, quand mon pseudo était ah.olstrya ? non ?

    PS 2 : bonjour à Philyon.

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