Discussion :

[chris ibiza]

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 :



Mon dossier thème :



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



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



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 :



Voici le code de la feuille style.css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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")
	);
 
});

[chris ibiza]

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

[chris ibiza]

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 :



Ç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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 .

[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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
#mon-site-a-moi ....... { .......; }
#mon-site-a-moi ....... { .......; }

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
  #header {
    padding-bottom: 1.618em;
    padding-top: 3.631em;
  }

Je veux le modifier en :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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?

[chris ibiza]

J'imagine que tu fais allusion a ce post la?

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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