thème-enfant et CSS personnalisé + plusieurs feuilles de style (Créer un compte)

  • Statut : non résolu
14 sujets de 1 à 14 (sur un total de 14)
  • Auteur
    Messages
  • #547008
    Flobogo
    Modérateur
    Maître WordPress
    20131 contributions

    Bonjour,

    Ma configuration WP actuelle (pour le site d’un ami)
    – Version de WordPress : 4.1
    – Version de PHP/MySQL : 5.3
    – Thème utilisé : Market et market-enfant
    – Extensions en place : Akismet / Contact-Form7 / Download Monitor / Email Address Encoder / MailPoet Newsletter / Media Rename / Menu Items Visibility Control / Polylang / Simple Lightbox / TinyMCE Advanced / SEO WordPress / WP-Optimize (toutes à jour)
    – Nom de l’hebergeur : archive-Host
    – Adresse du site : http://architectes.pro

    Problème(s) rencontré(s) :
    Pour le site d’un ami, j’ai créé un thème-enfant de market avec l’import de la feuille de style du thème-parent de manière classique.

    Mais nous avons deux problèmes de CSS. :(

    1er problème : le thème prévoit la possibilité d’insérer du CSS personnalisé dans les réglages / options du thème. Je voulais tout mettre dans le fichier style.css du thème-enfant, mais certaines modif’ ne sont pas prises en compte si elles sont dans le style du thème-enfant, alors qu’elles sont prises en compte si je les mets dans les options de CSS personnalisé. 😉
    Exemple frappant : le fond bleu de la bande du logo. (voir le site : c’est en bleu #10069f suite à nos modif’)

    Je me dis que peut-être, ce problème pourrait se résoudre avec les nouvelles bonnes pratiques d’appel de feuille de style d’un thème-enfant :
    –> le Codex français relatif aux thèmes-enfants a récemment été mis à jour, pour prendre en, compte les nouvelles bonnes pratiques de création de thème-enfant. (voir aussi cette discussion )

    La première ligne de la functions.php de votre thème enfant sera une balise d’ouverture de PHP ( function theme_enqueue_styles() {
    wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );

    }

    Cette méthode résoudra-t-elle mon problème de CSS personnalisé non pris en compte dans la feuille de style, mais pris en compte dans les options ? :rolleyes:

    Car même si ce n’est pas gênant, puisque cette règle est prise en compte dans le CSS personnalisé, il y a certaines versions d’Internet Explorer qui ne le prennent pas en compte. Bon, OK, on s’en fout d’IE … sauf que là, il s’agit d’un site à visée professionnelle, c’est dommage si certains clients potentiels ne voient pas le logo tel qu’il est prévu :rolleyes:

    D’où le 2ème problème : je voudrais créer une feuille de style spécifique pour Internet Explorer.

    Mais j’ai besoin d’aide, car je ne comprends pas tout dans le Codex : :boulet:

    Si votre thème a plus d’un fichier .css (par exemple ie.css, style.css, main.css) alors vous devrez vous assurer de maintenir toutes les dépendances du thème parent. Configurer le ‘style-parent’ comme une dépendance veillera à ce que les chargements des feuilles de style du thème enfant se fasse après.

    Je suis bien dans le cas où on veut plusieurs feuilles de style (par exemple, pour IE) …
    Bon, mais que dois-je faire concrètement, si j’ai une 2ème feuille de style appelée style-ie.css par exemple ?

    Merci d’avance pour votre aide.

    #994032
    ouistiti.net
    Participant
    Maître WordPress
    1879 contributions
    #994033
    Flobogo
    Modérateur
    Maître WordPress
    20131 contributions

    Bonjour Ouistiti,

    Merci de t’intéresser au problème.

    Moi aussi, j’ai vu cette page hier soir. Si, si … c’est vrai, et j’aurais dû y faire référence. 😳

    Mais il y a plusieurs solutions proposées, et je ne sais pas trop laquelle choisir 😇 –> celle qu’il appelle Gentlemen Explorers ? (… on peut l’utiliser, nous qui sommes des « women » ? 😆 )
    Alors, pourquoi y en a-t-il une autre après ?

    Et ça ne résoud pas mon 1er problème, qui est lié (je pense) au fait que Market-parent comporte plusieurs feuilles de style dans des sous-dossiers.
    –> faut-il reproduire la même architecture dans le thème-enfant, et les appeler dans le fichier function ( avec wp_enqueue_style ?) pour éviter d’avoir du CSS personnalisé dans les options du thème.
    Euh, d’ailleurs, est-ce grave docteur, d’avoir trop de CSS personnalisé dans les options de thème ?

    D’autre part, je pense que j’aurais aussi besoin d’une feuille de style pour Chrome, dont le rendu est identique à celui de IE (en terme de « taille » de police et hauteur du bandeau-header)

    En fait, ma vraie question, c’est : comment combiner et appeler plusieurs feuilles de style différentes ? 😇

    J’ai bien compris que pour IE, on peut utiliser wp_enqueue_style mais pourquoi le Codex dit-il qu’on ne peut pas appeler plusieurs feuilles de style de cette façon ?
    C’est cette partie que je ne comprends pas :

    Codex wrote:
    Si votre thème a plus d’un fichier .css (par exemple ie.css, style.css, main.css) alors vous devrez vous assurer de maintenir toutes les dépendances du thème parent. Configurer le ‘style-parent’ comme une dépendance veillera à ce que les chargements des feuilles de style du thème enfant se fasse après.

    Kesako ? 😉

    #994034
    Luca
    Membre
    Padawan WordPress
    61 contributions

    Coucoucou mesdames merci de votre aide bien précieuse. Il est vrai que je suis à la rue en ce moment :rolleyes:

    #994035
    ouistiti.net
    Participant
    Maître WordPress
    1879 contributions

    @Luca Je comprends la situation, mais il n’est pas si évident de mettre un site en place …


    @Flobogo
    J’essayerai cette partie

    Gentlemen Explorers:

    add_action( ‘wp_head’, ‘load_ie_styles’ );
    function load_ie_styles() {
    global $wp_styles;
    wp_register_style( ‘ie-seulement’, ‘/css/style-ie.css’ );
    $wp_styles->add_data( ‘ie-seulement’, ‘conditional’, ‘lte IE 8’ );
    wp_enqueue_style( ‘ie-seulement’ );
    }

    Maintenant, si vous regardez le de votre site vous devriez voir ceci :

    <!--[if lte IE 8]>-->

    Réf: http://boiteaweb.fr/wp_enqueue_style-conditionnel-ou-comment-ajouter-une-feuille-de-style-conditionnelle-proprement-7326.html

    Si, il y a un problème ou un doute, pourquoi ne pas poser la question directement sur le blog boiteaweb via les commentaires…. (il faut être un peu téméraire, même si on est des « women » :D )

    En ce qui concerne la première partie (question N1), je ne me suis pas penchée dessus et vu l’heure ^^…

    #994036
    ouistiti.net
    Participant
    Maître WordPress
    1879 contributions
    Flobogo wrote:
    Euh, d’ailleurs, est-ce grave docteur, d’avoir trop de CSS personnalisé dans les options de thème ?

    Ben non… vu que c’est conçu pour.. Sauf, gardez une copie avec votre éditeur préféré, au cas où…

    Flobogo wrote:
    En fait, ma vraie question, c’est : comment combiner et appeler plusieurs feuilles de style différentes ?

    J’ai jeté un œil dans le fichier functions.php. L’appel des feuilles de styles dans le header sont au conditionnel, c’est une première pour moi, alors honnêtement, je ne peux vous aider plus. Et faire des tests, je n’ai malheureusement pas trop de temps à disposition en ce moment.

    Par contre j’ai un vague souvenir que cette question a été posée par vous même concernant un feuille de style pour un plugin (slider), dont Didier07 avait répondu. Possible que ce souvenir soit erroné.

    Flobogo wrote:
    D’autre part, je pense que j’aurais aussi besoin d’une feuille de style pour Chrome, dont le rendu est identique à celui de IE (en terme de « taille » de police et hauteur du bandeau-header)

    Je suis vraiment étonnée en ce qui concerne Chrome, normalement c’est IE qui pose vraiment problème. Il n’y a pas besoin que cela fonctionne avec des navigateurs de l’époque de notre grand-mère (sauf pour la Chine (expérience vécue pour un site (IE6)). En général les clients potentiels (ni trop jeunes, ni trop vieux) mettent à jour leur navigateur (surtout dans le domaine ciblé), sauf si il y a une restriction environnementale et structurelle.

    #994037
    WillPerf
    Membre
    Chevalier WordPress
    122 contributions

    Bonjour, le premier problème est peut-être du aux différents « poids » des sélecteurs css, a savoir, celui qui est le plus lourd l’emporte, quel que soit son rang d’apparition dans les styles css.
    Cordialement

    #994038
    ouistiti.net
    Participant
    Maître WordPress
    1879 contributions

    J’ai oublié de mentionner qu’il est aussi possible de mettre un message pour avertir l’utilisateur que le site est optimisé pour tel navigateur et tel version …

    Voili Voilà!! 🙂

    #994039
    ouistiti.net
    Participant
    Maître WordPress
    1879 contributions

    RoooOOo!! le forum bug complétement..

    Bonjour,

    WillPerf wrote:
    le premier problème est peut-être du aux différents « poids »

    Que voulez-vous dire -> « poids »??

    Il me semble pas vu que ça fonctionne dans l’éditeur qui se situe dans les options du thème…

    #994040
    WillPerf
    Membre
    Chevalier WordPress
    122 contributions

    un id vaut je crois 10 par exemple et une classe vaut 1.
    En caricaturant,
    .autreclasse.uneclasse { color: red; }
    .uneclasse { color: green; }

    le texte est rouge, pourtant uneclasse est défini en second

    #994041
    ouistiti.net
    Participant
    Maître WordPress
    1879 contributions

    RooOOo!

    Je viens d’avoir le déclic :fouet:

    Flobogo wrote:
    j’ai bien compris que pour IE, on peut utiliser wp_enqueue_style mais pourquoi le Codex dit-il qu’on ne peut pas appeler plusieurs feuilles de style de cette façon ?
    C’est cette partie que je ne comprends pas :

    Codex a écrit:

    Si votre thème a plus d’un fichier .css (par exemple ie.css, style.css, main.css) alors vous devrez vous assurer de maintenir toutes les dépendances du thème parent. Configurer le ‘style-parent’ comme une dépendance veillera à ce que les chargements des feuilles de style du thème enfant se fasse après.

    Kesako ? blink

    La réponse se trouve ici: http://www.wordpress-fr.net/support/message-541870.html#p541870

    Réponse qui a été donnée par Didier07

    function viti_scripts_styles() {
    wp_enqueue_style( ‘template-style’, get_template_directory_uri() . ‘/style.css’);
    wp_enqueue_style( ‘theme-style’, get_stylesheet_uri() . ‘/style.css’, array(‘template-style’));
    }
    add_action( ‘wp_enqueue_scripts’, ‘viti_scripts_styles’ );

    Bon, il faut que je me concentre sur une autre tâche, car j’ai un examen à la fin de ce mois … :hs:

    #994042
    Flobogo
    Modérateur
    Maître WordPress
    20131 contributions

    Merci beaucoup pour tes recherches, Ouistiti.

    Je n’ai pas pu venir sur le forum hier soir (accès complètement impossible).

    J’ai cherché une solution en ajoutant une class spécifique pour IE (comme conseillé par Boite à web comme dernière possibilité) : cela me semblait plus simple à mettre en oeuvre, et moins lourd, pour juste quelques règles CSS à modifier.
    Mais ça n’a pas paru concluant –> aucune modif visible sur mes tests de screen sous IE. :(

    Je vais donc me résoudre à utiliser la solution des wp_enqueue_styles ou wp_enqueue_script. :rolleyes:
    Mais il faut que je reprenne tout ça à tête reposée … = de préférence le week-end. 😕

    Je te tiendrai au courant.

    #994043
    ouistiti.net
    Participant
    Maître WordPress
    1879 contributions

    Pas de souci …

    Bonne continuation dans vos recherches …

    #994044
    Flobogo
    Modérateur
    Maître WordPress
    20131 contributions

    Voilà les nouvelles :

    Je me suis surtout occupée du rendu sous IE, car c’était vraiment moche sous IE7 et IE 8 –> perte de la couleur de fond du bandeau de logo, hauteur disproportionnée pour ce bandeau, et surtout, perte de l’affichage des articles en page d’accueil ; bref, il ne restait qu’un squelette de site avec les menus et les liens du bas de page :(

    Je me suis finalement basée sur les commentaires conditionnels, d’après la 3ème solution de Boîte à web ou les infos plus détaillées d’Alsacréations

    Pour détailler un peu la solution : on inclut dans le header.php une class supplémentaire sur la balise uniquement pour la ou les versions d’IE qu’on veut cibler, sous forme de « commentaires conditionnels » qui ne sont lus que par les versions d’IE inférieure à la version 9.
    Exemple :

    Et ensuite, dans le fichier style.css (du thème-enfant) j’ai rajouté les règles que je voulais, en les précédant de .ie8
    Par exemple, le code suivant met le titre du site en rose … uniquement sous IE8 :

    .ie8 .site-title a {color: #ff0077; }

    MAIS certaines modif’ ne sont toujours pas prises en compte : par exemple, rien à faire pour passer le background du footer en bleu foncé 😉

    Je pense donc nécessaire d’en passer par la solution préconisée par Didier07 et confirmée par Ouistiti, à savoir utiliser la mise en attente de feuilles de style par le biais de wp_enqueue_style

    Mais là, il faut attendre le WE prochain :fouet:

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