thème-enfant et CSS personnalisé + plusieurs feuilles de style

Statut : non résolu

Ce sujet contient 13 réponses, 4 participants et a été mis à jour pour la dernière fois par Flobogo, le il y a 10 années et 4 mois.

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

Auteur

Messages
8 février 2015 à 18 h 02 min #547008

Flobogo
Modérateur

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

8 février 2015 à 20 h 26 min #994032

ouistiti.net
Participant

Maître WordPress
1879 contributions

En une minute chrono, j’ai trouvé ceci: http://boiteaweb.fr/wp_enqueue_style-conditionnel-ou-comment-ajouter-une-feuille-de-style-conditionnelle-proprement-7326.html

8 février 2015 à 22 h 08 min #994033

Flobogo
Modérateur

Maître WordPress
20915 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 ? 😉

8 février 2015 à 22 h 39 min #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:

8 février 2015 à 23 h 04 min #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 :
```

 
 
```
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 » )

En ce qui concerne la première partie (question N1), je ne me suis pas penchée dessus et vu l’heure ^^…
9 février 2015 à 10 h 06 min #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.

9 février 2015 à 10 h 20 min #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

9 février 2015 à 10 h 20 min #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à!! 🙂

9 février 2015 à 10 h 30 min #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…

9 février 2015 à 10 h 44 min #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

9 février 2015 à 11 h 41 min #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:
11 février 2015 à 18 h 23 min #994042

Flobogo
Modérateur

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

15 février 2015 à 18 h 43 min #994043

ouistiti.net
Participant

Maître WordPress
1879 contributions

Pas de souci …

Bonne continuation dans vos recherches …

16 février 2015 à 19 h 18 min #994044

Flobogo
Modérateur

Maître WordPress
20915 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:
Auteur

Messages