Problème thème enfant avec plusieurs feuilles de style

Version imprimable

Voir 40 message(s) de cette discussion en une page

5 pièce(s) jointe(s)

Problème thème enfant avec plusieurs feuilles de style

Bonjour à tous ,
J'ai un gros soucis avec mon thème enfant ...
Ca fait déjà 2 jours que j'essaie de le résoudre .
J'utilise le chouette theme Mystile de woocommerce que j'aurais voulu adapter à mes besoins .
J'ai commencé par faire mon thème enfant et a creer la feuille style.css .Mais le problème c'est que mon thème utilise plusieurs feuilles de styles dans plusieurs dossier ...J'ai réussi a faire des modifications grace a ma feuille style.css , mais impossible de charger les autres feuilles du theme enfant !
Wordpress charge automatiquement les autres feuilles du dossier parents ...
Voilà en image :

Pour commencer j'ai utiliser firebug qui me montre les 2 feuilles de styles :

Pièce jointe 186656

Mon dossier thème :

Pièce jointe 186654

Le dossier du theme parent qui contient la feuille style.css et le dossier styles :

Pièce jointe 186657

Et pour finir le dossier styles qui contient la fameuse feuille de style qui me pose problème ( grey.css )

Pièce jointe 186658

Je tiens a préciser que quand je fais une modification directement dans cette feuille de style du dossier parent , les modifications se font bien sur le site ...
Maintenant je vous montre le dossier enfant :

Pièce jointe 186659

Voici le code de la feuille style.css
Code:

1 2 3 4 5 6 7 8 9 /* Theme Name: Mystile-child Version: 1.0 Description: A child theme of mystile Template: Mystile */ @import url("../mystile/style.css"); @import url("../mystile/styles/grey.css");
Voici le code de la feuille grey.css ...
J'ai essayé pleins de chose , mais je me suis arrété la :calim2:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 /* Theme Name: Mystile-child Version: 1.0 Description: A child theme of mystile Template: Mystile */ @import url("../mystile/style.css"); @import url("../mystile/styles/grey.css"); /* 2.3 Header */ #header { padding: 1.618em 0 0; margin-bottom: 80em; border-bottom: 4px double #e6e6e6; clear: both; position: relative; }
Merci beaucoup pour votre aide , car je suis complétement dépassé là ...
Bon week-end.
Christophe

29/08/2015, 18h54
mathieu
déjà tu n'as pas besoin de tout ces @import, c'est juste le commentaire Template: Mystile qui permet de faire le lien entre le thème parent et le thème enfant

donc pour commencer, enlève tous les @import. certains anciens thèmes ne géraient pas encore les thèmes enfants c'est pour ça que dans des anciens tutos, on devait rajouter ce @import (et un seul) qui importait le fichier style.css parent

ensuite si tu as un fichier grey.css rajouté dans le thème enfant, il ne sera pas pris en compte automatiquement. pour le rajouter à ton thème, fait un fichier functions.php dans le thème enfant avec ce code, en replaçant grey-parent par le code de la feuille de style que tu trouveras dans le fichier functions.php du thème parent
Code:

1 2 3 4 5 6 7 8 9 add_action("wp_enqueue_scripts", function () { wp_enqueue_style( "grey-enfant" , get_stylesheet_directory_uri() . "/grey.css" , array("grey-parent") ); });
30/08/2015, 17h23
chris ibiza

Merci beaucoup pour ta réponse rapide !
Je vais essayer ça de suite :-D

Hello , je reviens vers vous pour être sur de ne pas faire de bêtise :-D

Je voulais faire les modifications que tu m'as suggéré , mais je m'aperçois que pour descendre mon logo du theme enfant je dois plutôt modifier ceci :

http://img15.hostingpics.net/thumbs/mini_526865dem1.png

Ça veut dire que je dois modifier en plus du style.css le fichier layout.css qui se trouve dans le dossier Mystile/css/layout.css ligne 577 ...

Tu me conseilles de faire quoi a ce moment la?
je pense faire :
commencer par copier le fichier layout.css qui se trouve dans le dossier : Mystile/css/layout.css , le coller a la racine du dossier mystile-child ( a coté du fichier style.css et function.php)

Modifier mon fichier function.php c

Code:

1
2
3
4
5
6
7
8
9
add_action("wp_enqueue_scripts", function () {
 
	wp_enqueue_style(
		"layout-enfant"
		, get_stylesheet_directory_uri() . "/layout.css"
		, array("layout.css-parent")
	);
 
});

Je dois remplacer le layout.css-parent par le code de la feuille de style du fichier function.php du dossier parent ... Mais je ne le trouve pas ...
Voici ce qu'il se trouve exactement dans le fichier function du parent :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<?php
// File Security Check
if ( ! empty( $_SERVER['SCRIPT_FILENAME'] ) && basename( __FILE__ ) == basename( $_SERVER['SCRIPT_FILENAME'] ) ) {
    die ( 'You do not have sufficient permissions to access this page!' );
}
?>
<?php
 
/*-----------------------------------------------------------------------------------*/
/* Start WooThemes Functions - Please refrain from editing this section */
/*-----------------------------------------------------------------------------------*/
 
// Define the theme-specific key to be sent to PressTrends.
define( 'WOO_PRESSTRENDS_THEMEKEY', 'zdmv5lp26tfbp7jcwiw51ix9sj389e712' );
 
// WooFramework init
require_once ( get_template_directory() . '/functions/admin-init.php' );
 
/*-----------------------------------------------------------------------------------*/
/* Load the theme-specific files, with support for overriding via a child theme.
/*-----------------------------------------------------------------------------------*/
 
$includes = array(
				'includes/theme-options.php', 			// Options panel settings and custom settings
				'includes/theme-functions.php', 		// Custom theme functions
				'includes/theme-actions.php', 			// Theme actions & user defined hooks
				'includes/theme-comments.php', 			// Custom comments/pingback loop
				'includes/theme-js.php', 				// Load JavaScript via wp_enqueue_script
				'includes/sidebar-init.php', 			// Initialize widgetized areas
				'includes/theme-widgets.php',			// Theme widgets
				'includes/theme-install.php',			// Theme installation
				'includes/theme-woocommerce.php',		// WooCommerce options
				'includes/theme-plugin-integrations.php'	// Plugin integrations
				);
 
// Allow child themes/plugins to add widgets to be loaded.
$includes = apply_filters( 'woo_includes', $includes );
 
foreach ( $includes as $i ) {
	locate_template( $i, true );
}
 
/*-----------------------------------------------------------------------------------*/
/* You can add custom functions below */
/*-----------------------------------------------------------------------------------*/
 
 
 
 
 
 
 
 
 
 
/*-----------------------------------------------------------------------------------*/
/* Don't add any code below here or the sky will fall down */
/*-----------------------------------------------------------------------------------*/
?>

Une fois que c'est fait j'aurais donc juste à modifier la ligne voulu (dans mon exemple la ligne 577) du fichier layout.css que j'aurais copier a la racine du theme enfant ?

Merci beaucoup et sorry pour toutes ces questions .

30/08/2015, 19h32
Invité
Bonjour,

quel que soit le fichier css du thème parent où se trouve le code que tu veux modifier :

=> il te suffit de regrouper TOUTES tes modifications dans le fichier style.css de ton thème enfant !

Ensuite, il faut bien s'assurer que tu peux surcharger le CSS.
Sinon, par exemple, tu peux ajouter un id au <body> : <body id="mon-site-a-moi" class="..........."" >
Et à tout ton code CSS, tu ajoutes :
Code:

1 2 #mon-site-a-moi ....... { .......; } #mon-site-a-moi ....... { .......; }
30/08/2015, 19h37
chris ibiza
bonqoir ,
mais question idiote ,
comment il va savoir qu'il faut modifier cette ligne dans ce fichier?

Exemple , ce code se trouve donc dans mon fameux fichier layout.css :
Code:

1 2 3 4 #header { padding-bottom: 1.618em; padding-top: 3.631em; }
Je veux le modifier en :
Code:

1 2 3 4 #header { padding-bottom: 1.618em; padding-top: 1em; }
Si j'ai bien compris tu me dis de juste coller cette modification dans ma feuilles de style.css de mon theme enfant?

Comment wordpress peut-il savoir que ca vient de la fiche layout.css alors?
30/08/2015, 19h40
Invité
On se moque bien de savoir de quel fichier le code provient !

Le navigateur va lire les fichiers les uns après les autres.

Et ton fichier style.css sera lu après les autres.
- Règles d'application des styles CSS et gestion des conflits
31/08/2015, 14h20
chris ibiza

2 pièce(s) jointe(s)

avancement ...
Bonjour ,
J'ai réussi a avancer dans mon thème enfant , mais j'ai encore un soucis ...
J'ai réussi a enlever les "@import" et creer mon style.css :
Code:

1 2 3 4 5 6 7 8 /* Theme Name: Mystile Child Description: Mystile Child Theme Author: Ibiza Template: Mystile Version: 1.0.0 Text Domain: Mystile-child */
Hier j'avais un souci car mon site était complément déformé ...
J'ai résolu ce problème en copiant l’intégralité du style.css parent dans le style.css enfant .
Par contre je bloque pour les autres css ...
J'ai voulu modifié le fichier layout.css , je l'ai donc copier en entier dans mon theme enfant.
Comme il se trouvait dans le dossier mystile/css/layout.css , j'ai voulu garder la même structure dans le theme enfant ...
J'ai donc commencé par le coller dans /mystile-child/css/layout.css ...
Pièce jointe 186783
Malheureusement rien ne se met a jour ... Quand je vérifie a l'aide de firebug je m'apercoie qu'il charge toujours le layout du theme parent ...
J'ai essayé de déplacer ce fichier layout.css a la racine de mon dossier enfant ...Mais marche pas non plus
Pièce jointe 186781
Je pense m'approcher de mon but , mais j'ai encore une fois besoin de votre aide ...
En tout cas merci d'avance
31/08/2015, 14h34
Invité

J'ai été assez clair dans mon message précédent.
31/08/2015, 14h40
chris ibiza
J'imagine que tu fais allusion a ce post la?
Citation:
Envoyé par jreaux62

Bonjour,

quel que soit le fichier css du thème parent où se trouve le code que tu veux modifier :

=> il te suffit de regrouper TOUTES tes modifications dans le fichier style.css de ton thème enfant !

Ensuite, il faut bien s'assurer que tu peux surcharger le CSS.
Sinon, par exemple, tu peux ajouter un id au <body> : <body id="mon-site-a-moi" class="..........."" >
Et à tout ton code CSS, tu ajoutes :

Code:

1 2 #mon-site-a-moi ....... { .......; } #mon-site-a-moi ....... { .......; }
A mon avis mon souci vient du faite que je ne peux pas surcharger ...
Et je suis tellement débutant que je n'ai pas vraiment compris ce que je devais faire avec les codes que tu as mis plus haut ..J'ai essayé de comprendre en regardant les règles css et tout mais c'est vraiment dur pour mon niveau :s
Merci pour le temps que tu m'as déjà consacré .
Chris

J'ai encore tout effacé et recommencé à zero, mais cette fois à l'aide d'un plugin (child theme) ...
Mais j'ai toujours ce fichu problème de mise en page :-(
Au niveau du code :
Style.css :

Code:

1
2
3
4
5
6
7
8
/*
Theme Name:     mystile-child
Description:    
Author:         chris ibiza
Template:       mystile
 
(optional values you can add: Theme URI, Author URI, Version, License, License URI, Tags, Text Domain)
*/

et le functions.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
//
// Recommended way to include parent theme styles.
//  (Please see http://codex.wordpress.org/Child_Themes#How_to_Create_a_Child_Theme)
//  
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style')
    );
}
//
// Your code goes below
//

Je pense que le souci vient de mon thème ...A mon avis il est impossible de faire un thème enfant :-(
Bonne soirée

01/09/2015, 00h26
mathieu

ce que j'adore dans WordPress ce qu'il y a beaucoup d'action et de filtres en place qui permettent de faire beaucoup de choses pour personnaliser l'affichage en fonction de nos besoin.
et on peut même rattraper un thème qui n'est pas du tout prévu pour en faire un thème enfant

le plus embêtant pour ton problème est que le thème n'est pas disponible librement donc on ne peut pas le tester nous même. et peut-être que tu n'as pas le droit de poster des gros morceaux de code donc cela ne va pas être pratique pour t'aider
quelque chose qui pourrait être utile serait que tu cherches tous les appels à wp_register_style et wp_enqueue_style dans les fichiers du thème et que tu traces chaque appel pour savoir comment ils sont appelés.

ça c'est pour le côté codage pur.

en ce qui concerne l'organisation de ton thème, je reprend ce qu'à dit jreaux62 un peu plus haut. le but du thème enfant est d'uniquement stocker les modifications pour ne pas les perdre au moment de la mise à jour du thème.
mais là si tu récupères les contenus entiers des fichiers, cela a beaucoup moins d'intérêt. si tu veux complétement tout modifier, ça sera peut-être plus simple de faire directement les modifications dans le répertoire du thème lui-même et de ne plus mettre à jour le thème

Bonjour,
j'ai téléchargé et installé le thème mystile (~~gratuit~~ pas payant ;) )

Etapes de création du Thème enfant :

1/ Créer, dans "wp-content/themes", le dossier "mystile-child"

2/ Y créer 2 fichiers style.css et functions.php

3/ functions.php
Code:

1 2 3 4 5 6 7 8 9 10 <?php add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); // style.css du theme parent wp_enqueue_style( 'style-enfant' , get_stylesheet_directory_uri() . '/style.css' // style.css du theme enfant , array('parent-style') // permet d'indiquer la dépendance afin que ce fichier soit chargé après le style du thème parent ); }
4/ style.css
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 /* Theme Name: mystile Child Template: mystile Version: 0.1.0 Description: Thème enfant Theme URI: Author: Author URI: */ /* -------------- Personnalisation du Theme -------------- */ body.custom-background, body.home { background:yellow; /* ESSAI de modification du thèeme parent */ }a { color: pink; /* initialement défini dans grey.css du thème parent ! */ } /* C'EST ICI QU'ON APPORTE TOUTES LES MODIF. de style qu'on veut, quelle que soit la feuille de style d'origine */
5/ ACTIVER le thème "mystile Child" en ADMIN : "Apparence" -> "Thèmes" -> "mystile Child" => "Activer"

Youppie ! Ca marche ! :lahola:

[EDIT] Modifié suite à la (bonne) remarque de mathieu (voir message suivant)

on peut seulement le télécharger en donnant son adresse e-mail donc dans ces conditions j'ai du mal à appeler ça "gratuit" même s'il n'y a pas un transfert direct d'argent vers le site de téléchargement. c'est pour ça que je préfère parler de "libre" et "pas libre".

en ce qui concerne le problème du thème où l'appel du fichier style.css est fixé dans l'entête, il y a une autre possibilité qui permet de faire une toute petite économie de modification :
mettre le code CSS dans un fichier différent de style.css
charger ce fichier différent comme ça par exemple :
Code:

1 2 3 4 5 6 7 8 9 10 <?php add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'style-enfant' , get_stylesheet_directory_uri() . '/style-enfant.css' , array('parent-style') // permet d'indiquer la dépendance afin que ce fichier soit chargé après le style du thème parent ); }

2 pièce(s) jointe(s)

Citation:

Envoyé par jreaux62

Etapes de création du Thème enfant :

...............
Youppie ! Ca marche ! :lahola:

Merci beaucoup pour cette SUPER explication !
Ca ne pourrait pas être mieux fait !
Par contre je n'ai pas le même résultat que toi :-D
Jj'ai toujours des différence d'affichage par rapport au thème parent ...
Quelques différences en photo :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <title><?php woo_title(''); ?></title> <?php woo_meta(); ?> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" /> <?php wp_head(); woo_head(); ?> <link rel="stylesheet" type="text/css" href="<?php bloginfo( 'stylesheet_url' ); ?>" media="screen" /> </head>
Mais malheureusement j'ai encore les déformations ... tu as remarqué ca chez toi aussi?
Exemple :
Voici des screens pour montrer les différences :
Pièce jointe 186877Pièce jointe 186878

Tu en penses quoi?

01/09/2015, 17h21
Invité

Citation:

Envoyé par chris ibiza

...chez moi je ne suis même pas obligé de modifier le fichier header.php pour voir la modification du fond jaune ...

C'est expliqué par mathieu avec son script (que tu utilises déjà).

Quant à ton problème d'affichage...

Si tu n'as encore RIEN mis dans le fichier style.css enfant, il n'y a pas de raison ! :koi:

Tu as très certainement bidouillé à droite à gauche... :weird:
01/09/2015, 18h10
chris ibiza

Citation:

Envoyé par jreaux62

C'est expliqué par mathieu avec son script (que tu utilises déjà).

Quant à ton problème d'affichage...

Si tu n'as encore RIEN mis dans le fichier style.css enfant, il n'y a pas de raison ! :koi:

Je me suis trompé , il y a une différence avec la modification du header ...
Mon texte devient rose ! tandis que si j’enlève la modification du fichier header mon texte est noir ....
Par contre j'ai toujours ces problèmes d'affichage :-(

Je n'avais pas vu le post de mathieu ...Sorry !
Donc merci a toi aussi pour ton aide ...
Mais j'imagine que j'aurais le même souci d'affichage avec les 2 manipulations ?

C'est vraiment dommage , car j'arrive a faire les modifications des autre fichiers ... Je ne vois vraiment pas pourquoi il y a une partie qui se déforme ...J'ai l'impression que le souci concerne l'affichage des pages woocommerce ...
Quand je désactive le plugin woocommerce , il me semble que tout est normal ...
01/09/2015, 18h18
Invité

1/ Il NE faut PAS modifier le header.
Le code donné par mathieu ANNULE ma modif.

2/

Citation:

car j'arrive a faire les modifications des autre fichiers ...

QUELS autres fichiers ? CSS ???

=> Il N'Y A AUCUN AUTRE FICHIER à modifier !!

3/

Citation:

Quand je désactive le plugin woocommerce , il me semble que tout est normal ...

Possible que ça rajoute une(des) feuille(s) de styles qui créent des conflits.

Mais moi, je n'ai rien vu de spécial...
01/09/2015, 18h22
chris ibiza

Je me suis mal exprimé :-D
J'arrive à modifier l’esthétique du site a l'aide de mon fichier style.css de mon theme enfant comme tu m'as appris :-D

Je suis pratiquement sur qu'il y a un conflit de feuille css ... Mais comment le trouver :-S
Thx
01/09/2015, 18h34
Invité

Regarde dans l'inspecteur de ton navigateur : touche "F12" du clavier.
Ce que tu sais manifestement déjà faire !

En cliquant-droit sur un élément de la page, il s'affiche dans la colonne de droite les styles CSS appliqués, ainsi que le nom du fichier CSS (et la ligne).
Tu verras bien quelle définition de style prend le dessus sur une autre.

Voir 40 message(s) de cette discussion en une page