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?

[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

[chris ibiza]

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 :

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

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 ...

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

[Invité]

J'ai été assez clair dans mon message précédent.

[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

[chris ibiza]

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 :

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

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 :

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
<?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

[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

[Invité]

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

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

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

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
/*
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 !

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

[mathieu]

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 :

1. mettre le code CSS dans un fichier différent de style.css
2. charger ce fichier différent comme ça par exemple :

   Code :

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

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

[chris ibiza]

Etapes de création du Thème enfant :

...............
Youppie ! Ca marche !

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 :

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

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 :


Tu en penses quoi?

[Invité]

...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 !

Tu as très certainement bidouillé à droite à gauche...

[chris ibiza]

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 !

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 ...

[Invité]

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

2/

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

QUELS autres fichiers ? CSS ???

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

3/

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...

[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

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