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

**chris ibiza** · 01/09/2015, 18h43

J'ai effectivement des différence entre les 2 thèmes ...
J'ai sélectionné la barre grise à l'aide de la touche F12
C'est donc la barre grise en haut qui me pose problème ..
Nom : bug1.png
Affichages : 484
Taille : 24,4 Ko

Nom : bug1.png
Affichages : 484
Taille : 24,4 Ko

**miss_socrates** · 02/09/2015, 00h07

Cela me semble bien compliquer les choses.
J'ai utilisé Mystile pour mon site et il est bien foutu pour un site libre et aussi il permet bien de créer un thème enfant... puisque c'est ce que j'ai fait !

L'import des feuilles de style est bien correct puisqu'il faut importer la feuille de style du thème parent. Une autre solution serait de copier le contenu dans la feuille de style du thème enfant.
Mais l'erreur provient de ce qu'il ne suffit pas d'écrire les 2 lignes d'import:

Code :

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

@import url(mystile/styles/style.css)

et

Code :

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

@import url(mystile/styles/grey.css)

il faut aussi créer les autres fichiers (dont grey.css et layout.css) dans un dossier styles placé dans le thème enfant exactement comme a été créée la feuille style.css (en reprenant la même structure que dans le thème parent).
Et faire les @import correspondant évidemment.

**mathieu** · 02/09/2015, 00h57

Envoyé par miss_socrates

Une autre solution serait de copier le contenu dans la feuille de style du thème enfant.

on a déjà discuté de cela quelques messages plus haut mais ça ne correspond pas à ce que chris ibiza veut faire
il veut juste apporter des modifications au code CSS déjà existant donc cela se fait en ajoutant les règles de modifications dans un fichier du thème enfant et comme cela il pourra continuer de profiter des mises à jour du thème parent

**chris ibiza** · 02/09/2015, 15h38

@miss_socrates

Hello ,
Merci beaucoup pour ta remarque et ton aide ,mais j'aurais vraiment voulu essayer de pouvoir tenir tout ça à jour , et le faire de la manière la plus propre possible ...
Grace à l'aide de mathieu et jreaux62 on à pratiquement réussi à faire ce thème enfant .
Mais je bloque à mon avis au niveau des feuilles de styles woocommerce .
En effet toutes les pages woocommerce , ou parametre woocommerce sont déformée ...
Sur le screen j'ai remarqué que les pages chargées ne sont pas les même sur le theme enfant et parent . Et même les parametres ne sont pas dans la même ligne ...
Nom : bug1.png
Affichages : 431
Taille : 36,8 Ko

Nom : bug1.png
Affichages : 431
Taille : 36,8 Ko

Merci à tous

**chris ibiza** · 02/09/2015, 18h17

J'ai trouvé un article qui peut m’intéresser (la solution n°2 ...:
http://guillaumeanjou.fr/comment-int...ans-son-theme/

Vous en pensez quoi?
Car moi je bloque à l'étape ou il faut faire correspondre les balises a son thème ...

Regardez dans votre fichier page.php pour savoir quoi placer à la place de <section id="main"> et </section> car ces balises doivent correspondre à celles de votre thème.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);
remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10);
 
add_action('woocommerce_before_main_content', 'my_theme_wrapper_start', 10);
add_action('woocommerce_after_main_content', 'my_theme_wrapper_end', 10);
 
function my_theme_wrapper_start() {
  echo '<section id="main">';
}
 
function my_theme_wrapper_end() {
  echo '</section>';
}

Merci pour votre lumière :-D

Invité · 02/09/2015, 18h24

Arrête de jeter les morceaux de puzzle en l'air en espérant qu'ils vont reformer l'image en retombant...

Montre-nous un RECAPITULATIF des MODIF. que TU as faites.

**chris ibiza** · 02/09/2015, 18h48

Ok ,
Voilà ou j'en suis actuellement :
Le dossier theme enfant :
Nom : t1.png
Affichages : 392
Taille : 8,6 Ko

Le fichier style.css :

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
/*
Theme Name: mystile Child
Template: mystile
Version: 0.1.0
Description: Thème enfant
Theme URI: 
Author: 
Author URI: 
*/
 
/* -------------- Personnalisation du Theme -------------- */
  #header:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden;
    clear: unset;
  }
  #header {
  padding: 1.618em 0 0;
  margin-bottom: 3.631em;
  border-bottom: 0px double #e8e4e3;
  clear: both;
  position: relative;
}

Le Functions.php :

Code :

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

1
2
3
4
5
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

Et le Header.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
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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<?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
/**
 * Header Template
 *
 * Here we setup all logic and XHTML that is required for the header section of all screens.
 *
 * @package WooFramework
 * @subpackage Template
 */
global $woo_options, $woocommerce;
?><!DOCTYPE html>
<html <?php language_attributes(); ?> class="<?php if ( $woo_options['woo_boxed_layout'] == 'true' ) echo 'boxed'; ?> <?php if (!class_exists('woocommerce')) echo 'woocommerce-deactivated'; ?>">
<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>
 
<body <?php body_class(); ?>>
<?php woo_top(); ?>
 
<div id="wrapper">
 
 
 
	<div id="top">
		<nav class="col-full" role="navigation">
			<?php if ( function_exists( 'has_nav_menu' ) && has_nav_menu( 'top-menu' ) ) { ?>
			<?php wp_nav_menu( array( 'depth' => 6, 'sort_column' => 'menu_order', 'container' => 'ul', 'menu_id' => 'top-nav', 'menu_class' => 'nav fl', 'theme_location' => 'top-menu' ) ); ?>
			<?php } ?>
			<?php
				if ( class_exists( 'woocommerce' ) ) {
					echo '<ul class="nav wc-nav">';
					woocommerce_cart_link();
					echo '<li class="checkout"><a href="'.esc_url($woocommerce->cart->get_checkout_url()).'">'.__('Checkout','woothemes').'</a></li>';
					echo get_search_form();
					echo '</ul>';
				}
			?>
		</nav>
	</div><!-- /#top -->
 
 
 
    <?php woo_header_before(); ?>
 
	<header id="header" class="col-full">
 
 
 
	    <hgroup>
 
	    	 <?php
			    $logo = esc_url( get_template_directory_uri() . '/images/logo.png' );
				if ( isset( $woo_options['woo_logo'] ) && $woo_options['woo_logo'] != '' ) { $logo = $woo_options['woo_logo']; }
				if ( isset( $woo_options['woo_logo'] ) && $woo_options['woo_logo'] != '' && is_ssl() ) { $logo = preg_replace("/^http:/", "https:", $woo_options['woo_logo']); }
			?>
			<?php if ( ! isset( $woo_options['woo_texttitle'] ) || $woo_options['woo_texttitle'] != 'true' ) { ?>
			    <a id="logo" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php esc_attr( get_bloginfo( 'description' ) ); ?>">
			    	<img src="<?php echo $logo; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" />
			    </a>
		    <?php } ?>
 
			<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
			<h3 class="nav-toggle"><a href="#navigation"><mark class="websymbols">²</mark> <span><?php _e('Navigation', 'woothemes'); ?></span></a></h3>
 
		</hgroup>
 
        <?php woo_nav_before(); ?>
 
		<nav id="navigation" class="col-full" role="navigation">
 
			<?php
			if ( function_exists( 'has_nav_menu' ) && has_nav_menu( 'primary-menu' ) ) {
				wp_nav_menu( array( 'depth' => 6, 'sort_column' => 'menu_order', 'container' => 'ul', 'menu_id' => 'main-nav', 'menu_class' => 'nav fr', 'theme_location' => 'primary-menu' ) );
			} else {
			?>
	        <ul id="main-nav" class="nav fl">
				<?php if ( is_page() ) $highlight = 'page_item'; else $highlight = 'page_item current_page_item'; ?>
				<li class="<?php echo $highlight; ?>"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php _e( 'Home', 'woothemes' ); ?></a></li>
				<?php wp_list_pages( 'sort_column=menu_order&depth=6&title_li=&exclude=' ); ?>
			</ul><!-- /#nav -->
	        <?php } ?>
 
		</nav><!-- /#navigation -->
 
		<?php woo_nav_after(); ?>
 
	</header><!-- /#header -->
 
	<?php woo_content_before(); ?>

Je n'ai rien modifié d'autre ...
Thx

Invité · 02/09/2015, 19h00

C'est bien ce que je pensais : tu n'as pas tenu compte de la (bonne) remarque de mathieu.

Dans ton thème enfant :
1/ style.css
OK. C'est bon

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

3/ SUPPRIME le fichier header.php
On n'a plus besoin de le modifier !

**chris ibiza** · 02/09/2015, 19h18

Je viens de refaire toutes les modifications ...
Malheureusement ca donne exactement la même chose :-(

Dossier enfant :
Nom : t1.png
Affichages : 380
Taille : 7,5 Ko

Nom : t1.png
Affichages : 380
Taille : 7,5 Ko

Styles.css :

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
/*
Theme Name: mystile Child
Template: mystile
Version: 0.1.0
Description: Thème enfant
Theme URI: 
Author: 
Author URI: 
*/
 
/* -------------- Personnalisation du Theme -------------- */
  #header:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden;
    clear: unset;
  }
  #header {
  padding: 1.618em 0 0;
  margin-bottom: 3.631em;
  border-bottom: 0px double #e8e4e3;
  clear: both;
  position: relative;
}

functions.php :

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

C'est à devenir fou :-(

**chris ibiza** · 02/09/2015, 19h34

Vous en pensez quoi si je colle des grosses partie de code dans mon fichier style.css ?
Car si je copie une grosse partie de mon fichier layout.css dans mon fichier style.css tout fonctionne ... Voilé ce que j'ai fait :
Style.css :

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
/*
Theme Name: mystile Child
Template: mystile
Version: 0.1.0
Description: Thème enfant
Theme URI: 
Author: 
Author URI: 
*/
 
/* -------------- Personnalisation du Theme -------------- */
  #header:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden;
    clear: unset;
  }
  #header {
  padding: 1.618em 0 0;
  margin-bottom: 3.631em;
  border-bottom: 0px double #e8e4e3;
  clear: both;
  position: relative;
}
 
 
/* 2. TOP NAVIGATION (Add top navigation presentational styles here) */
  #top {
    background: #f7f7f7;
    margin: 0 -3.631em;
    padding: 0 3.631em;
  }
  #top #top-nav {
    display: block;
  }
  #top ul.nav {
    font-size: .857em;
    /* LEVEL 2 */
    /* LEVEL 3 */
  }
  #top ul.nav > li a {
    padding: 1.387em 1em;
    color: #9f9693;
  }
  #top ul.nav > li a:hover {
    background: #f7f7f7;
    text-decoration: none;
    color: #6c6360;
  }
  #top ul.nav > li:hover {
    background: #f7f7f7;
  }
  #top ul.nav ul {
    background: #f7f7f7;
  }
  #top ul.nav ul li a {
    padding: .53em 1em;
  }
  #top .wc-nav {
    width: auto;
    float: right;
  }
  #top .wc-nav li.checkout {
    display: inline-block;
  }
  #top .wc-nav li.checkout a:before {
    font-family: 'WebSymbolsRegular';
    display: inline-block;
    font-size: .857em;
    margin-right: .618em;
    content: ")";
    font-weight: normal;
  }
  #top .wc-nav li.search {
    width: auto;
  }
  #top .wc-nav li.search form {
    margin-bottom: 0;
    padding-top: 1.1em;
  }
  #top .wc-nav li.search label {
    display: none;
  }
  #top .wc-nav li.search .button {
    position: absolute;
    top: 0;
    left: -999em;
  }
  #top .wc-nav li.search:hover {
    background: none;
  }
  #top .wc-nav li.cart {
    width: auto;
    text-align: right;
  }
  #top .wc-nav li.cart a {
    padding-top: 1.387em;
    padding-left: 1em;
  }
  #top .wc-nav li.cart a .contents {
    padding: .2em .618em;
    background: #fff;
    -webkit-border-radius: 1em;
    border-radius: 1em;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    margin-left: 1em;
    display: inline;
  }
  /*-------------------------------------------------------------------------------------------*/
  /* 7. WOOCOMMERCE */
  /*-------------------------------------------------------------------------------------------*/
  /* 7.1 Messages */
  /* 7.2 Products */
  ul.products li.product {
    position: relative;
    width: 22.05%;
  }
  ul.products li.product:nth-child(2n) {
    margin-right: 3.8%;
  }
  ul.products li.product.first {
    clear: both;
  }
  ul.products li.product.last {
    margin-right: 0;
  }
  /* 7.2.1 Single Product */
  .single-product .images {
    width: 48%;
    float: left;
  }
  .single-product .summary {
    width: 48%;
    float: right;
  }
  .single-product .woocommerce_tabs,
  .single-product .woocommerce-tabs {
    clear: both;
  }
  .single-product .related {
    clear: both;
  }
  .single-product .sale .summary h1 {
    width: 80%;
  }
  .woocommerce_tabs ul.tabs,
  .woocommerce-tabs ul.tabs,
  .ui-tabs ul.tabs,
  .woocommerce_tabs .ui-tabs-nav,
  .woocommerce-tabs .ui-tabs-nav,
  .ui-tabs .ui-tabs-nav {
    margin-bottom: 0;
    margin-left: 2.618em;
  }
  .woocommerce_tabs ul.tabs li,
  .woocommerce-tabs ul.tabs li,
  .ui-tabs ul.tabs li,
  .woocommerce_tabs .ui-tabs-nav li,
  .woocommerce-tabs .ui-tabs-nav li,
  .ui-tabs .ui-tabs-nav li {
    width: auto;
    float: left;
    clear: none;
    margin-bottom: 0;
  }
  .woocommerce_tabs ul.tabs li:nth-child(2n),
  .woocommerce-tabs ul.tabs li:nth-child(2n),
  .ui-tabs ul.tabs li:nth-child(2n),
  .woocommerce_tabs .ui-tabs-nav li:nth-child(2n),
  .woocommerce-tabs .ui-tabs-nav li:nth-child(2n),
  .ui-tabs .ui-tabs-nav li:nth-child(2n) {
    float: left;
    clear: none;
  }
  .woocommerce_tabs ul.tabs li a,
  .woocommerce-tabs ul.tabs li a,
  .ui-tabs ul.tabs li a,
  .woocommerce_tabs .ui-tabs-nav li a,
  .woocommerce-tabs .ui-tabs-nav li a,
  .ui-tabs .ui-tabs-nav li a {
    border-bottom: 0;
    background: rgba(232, 228, 227, 0.5);
    color: #6c6360;
  }
  .woocommerce_tabs ul.tabs li a:hover,
  .woocommerce-tabs ul.tabs li a:hover,
  .ui-tabs ul.tabs li a:hover,
  .woocommerce_tabs .ui-tabs-nav li a:hover,
  .woocommerce-tabs .ui-tabs-nav li a:hover,
  .ui-tabs .ui-tabs-nav li a:hover {
    color: #ff4800;
  }
  .woocommerce_tabs ul.tabs li.active,
  .woocommerce-tabs ul.tabs li.active,
  .ui-tabs ul.tabs li.active,
  .woocommerce_tabs .ui-tabs-nav li.active,
  .woocommerce-tabs .ui-tabs-nav li.active,
  .ui-tabs .ui-tabs-nav li.active,
  .woocommerce_tabs ul.tabs li.ui-state-active,
  .woocommerce-tabs ul.tabs li.ui-state-active,
  .ui-tabs ul.tabs li.ui-state-active,
  .woocommerce_tabs .ui-tabs-nav li.ui-state-active,
  .woocommerce-tabs .ui-tabs-nav li.ui-state-active,
  .ui-tabs .ui-tabs-nav li.ui-state-active {
    position: relative;
  }
  .woocommerce_tabs ul.tabs li.active:before,
  .woocommerce-tabs ul.tabs li.active:before,
  .ui-tabs ul.tabs li.active:before,
  .woocommerce_tabs .ui-tabs-nav li.active:before,
  .woocommerce-tabs .ui-tabs-nav li.active:before,
  .ui-tabs .ui-tabs-nav li.active:before,
  .woocommerce_tabs ul.tabs li.ui-state-active:before,
  .woocommerce-tabs ul.tabs li.ui-state-active:before,
  .ui-tabs ul.tabs li.ui-state-active:before,
  .woocommerce_tabs .ui-tabs-nav li.ui-state-active:before,
  .woocommerce-tabs .ui-tabs-nav li.ui-state-active:before,
  .ui-tabs .ui-tabs-nav li.ui-state-active:before {
    content: "";
    display: block;
    position: absolute;
    top: -0.236em;
    left: 0;
    right: 0;
    height: .236em;
    background: #ff4800;
    border-top: 1px solid #ff5911;
    -webkit-border-top-left-radius: 2px;
    -webkit-border-top-right-radius: 2px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
  }
  .woocommerce_tabs ul.tabs li.active a,
  .woocommerce-tabs ul.tabs li.active a,
  .ui-tabs ul.tabs li.active a,
  .woocommerce_tabs .ui-tabs-nav li.active a,
  .woocommerce-tabs .ui-tabs-nav li.active a,
  .ui-tabs .ui-tabs-nav li.active a,
  .woocommerce_tabs ul.tabs li.ui-state-active a,
  .woocommerce-tabs ul.tabs li.ui-state-active a,
  .ui-tabs ul.tabs li.ui-state-active a,
  .woocommerce_tabs .ui-tabs-nav li.ui-state-active a,
  .woocommerce-tabs .ui-tabs-nav li.ui-state-active a,
  .ui-tabs .ui-tabs-nav li.ui-state-active a {
    position: relative;
    background: #fff;
    box-shadow: 0 1px 2px 0 #e8e4e3;
    -webkit-box-shadow: 0 1px 2px 0 #e8e4e3;
    color: #ff4800;
    border-top-color: #ff4800;
  }
  .woocommerce_tabs ul.tabs li.active a:after,
  .woocommerce-tabs ul.tabs li.active a:after,
  .ui-tabs ul.tabs li.active a:after,
  .woocommerce_tabs .ui-tabs-nav li.active a:after,
  .woocommerce-tabs .ui-tabs-nav li.active a:after,
  .ui-tabs .ui-tabs-nav li.active a:after,
  .woocommerce_tabs ul.tabs li.ui-state-active a:after,
  .woocommerce-tabs ul.tabs li.ui-state-active a:after,
  .ui-tabs ul.tabs li.ui-state-active a:after,
  .woocommerce_tabs .ui-tabs-nav li.ui-state-active a:after,
  .woocommerce-tabs .ui-tabs-nav li.ui-state-active a:after,
  .ui-tabs .ui-tabs-nav li.ui-state-active a:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 4px;
    background: #fff;
  }
  .woocommerce_tabs .panel,
  .woocommerce-tabs .panel,
  .ui-tabs .panel {
    background: #fff;
    padding: 2.618em;
    border: 1px solid #e8e4e3;
  }
  .woocommerce_tabs table.shop_attributes p,
  .woocommerce-tabs table.shop_attributes p,
  .ui-tabs table.shop_attributes p {
    margin-bottom: 0;
  }
  /* 7.3 Cart */
  table.cart {
    margin-bottom: 2.618em;
  }
  table.cart .product-remove,
  table.cart .product-thumbnail,
  table.cart .product-price {
    position: static;
  }
  table.cart td.actions {
    text-align: right;
  }
  table.cart td.actions .coupon {
    width: 50%;
    float: left;
  }
  table.cart td.actions .input-text,
  table.cart td.actions .button,
  table.cart td.actions .checkout-button {
    width: auto !important;
    display: inline-block;
    margin-bottom: 0 !important;
  }
  table.cart td.actions .button {
    margin-left: .618em;
    float: none !important;
  }
  .cart-collaterals:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden;
    clear: both;
  }
  .cart-collaterals .cross-sells,
  .cart-collaterals .cart_totals,
  .cart-collaterals .shipping_calculator {
    width: 48%;
    font-size: .857em;
    float: left;
  }
  .cart-collaterals .cart_totals {
    float: right;
  }
  .cart-collaterals .shipping_calculator {
    float: right;
    clear: right;
  }
  .cart-collaterals .cross-sells ul.products li.product {
    width: 48%;
  }
  /* 7.4 Checkout */
  .checkout #order_review {
    padding: 1.618em;
  }
  .checkout #shiptobilling {
    float: right;
    margin: 0;
    text-align: right;
    width: 48%;
  }
  .checkout #shiptobilling label {
    white-space: nowrap;
  }
  .checkout #shiptobilling input[type="checkbox"] {
    float: right;
    margin-left: 1em;
    margin-right: 0;
  }
  /* 7.5 Widgets */
  /* 7.6 Account */
  /* 7.7 Shortcodes */
  /* 6. FOOTER WIDGETS */
  #footer-widgets {
    border-top: 0;
  }
  #footer-widgets .block {
    margin-right: 3.8%;
    float: left;
  }
  #footer-widgets.col-1 .block {
    width: 100%;
    float: none;
  }
  #footer-widgets.col-1 .footer-widget-1 {
    margin-right: 0;
  }
  #footer-widgets.col-2 .block {
    width: 48%;
  }
  #footer-widgets.col-2 .footer-widget-2 {
    margin-right: 0;
  }
  #footer-widgets.col-3 .block {
    width: 30.75%;
  }
  #footer-widgets.col-3 .footer-widget-3 {
    margin-right: 0;
  }
  #footer-widgets.col-4 .block {
    width: 22.05%;
  }
  #footer-widgets.col-4 .footer-widget-4 {
    margin-right: 0;
  }
  /* 7. IE FIXES */
  .ie7 #top-nav {
    position: relative;
    z-index: 9999999;
  }
  .ie7 #header {
    position: relative;
    z-index: 9999999;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1025px) {
  .homepage-banner h1 {
    font-size: 2.244em;
  }
  .homepage-banner .description {
    font-size: 1.387em;
  }
}

**miss_socrates** · 02/09/2015, 21h11

Je suis vraiment très en colère contre les votes négatifs que j'exige de retirer.
En effet, il n'y a rien à modifier aux fichiers (au niveau css j'entends) puisque les fichiers style.css et autres doivent être des clones simplement transposés du thème parent au thème enfant, il suffit de créer les mêmes fichiers css dans le thème enfant que dans le thème parent ou aussi de copier le code de style.css du thème parent dans le style.css du thème enfant.
Je disais que ce n'était qu'une possibilité autre que l'@import et quand je lis le dernier post de chris ibiza, je vois que c'est peut-être pas ce qu'il voulait faire au départ, mais je vois que c'est ce qui donne le meilleur résultat. Forcément puisque c'est une des possibilités et en plus c'est la méthode la plus facile.
Quand au problème d'affichage des feuilles de style woocommerce, c'est parce que des choses ont été changées sinon c'est la même procédure.
jreaux a raison, il ne faut pas modifier des morceaux de puzzle (en plus les mauvais), les lancer en l'air en espérant qu'ils se recollent.

Envoyé par chris ibiza

Vous en pensez quoi si je colle des grosses partie de code dans mon fichier style.css ?
Car si je copie une grosse partie de mon fichier layout.css dans mon fichier style.css tout fonctionne ... Voilé ce que j'ai fait :

**chris ibiza** · 02/09/2015, 22h19

Envoyé par miss_socrates

Je suis vraiment très en colère contre les votes négatifs que j'exige de retirer.

Coucou, j'ai pas trop compris :-$
Il n'y a absolument rien de négatif. ..
Tout est positif, grâce à vous j'ai réussi à obtenir ce que je voulais...même si je n'ai pas tout compris...lol
Bonne soirée @ tous

**cowichan** · 01/11/2015, 15h49

Bonjour,
Pour ma part j'ai eu du mal aussi à réaliser le thème enfant car dès que je mettais quelque chose dans la feuille css du theme enfant, le design du site était modifié.
J'ai donc simplement ajouter la feuille css avec juste l'import et rien d'autre. Puis bien sûr le fichier functions.php sans rien à l'intérieur ( juste <?php )
Ensuite toutes les modifs du style peuvent se faire aussi dans un fichier appelé custom.css dans le thème parent...
J'ai simplement était obligé de créer un thème enfant pour modifier le fichier theme-woocommerce.php afin de traduire une phrase en français. Sinon il me semble qu'il n'est pas utile de créer un thème enfant juste pour le css (il faut passer par custom.css)

**Flodelarab** · 02/11/2015, 11h17

Bonjour

Moi ce que je vois, c'est qu'au début de la discussion, on parlait de "Mystile" et qu'à la fin, dans le css, il y a "mystile". Faut savoir. C'est Mystile ou mystile ?

**miss_socrates** · 03/11/2015, 07h03

Envoyé par Flodelarab

Bonjour

Moi ce que je vois, c'est qu'au début de la discussion, on parlait de "Mystile" et qu'à la fin, dans le css, il y a "mystile". Faut savoir. C'est Mystile ou mystile ?

Tout dépend du nom qui a été donné lors de la création du répertoire du thème dans Wordpress ; mais cela ne change rien fondamentalement à la discussion

**miss_socrates** · 03/11/2015, 07h15

Envoyé par cowichan

Bonjour,
Pour ma part j'ai eu du mal aussi à réaliser le thème enfant car dès que je mettais quelque chose dans la feuille css du theme enfant, le design du site était modifié.

C'est normal, la feuille de style enfant ayant la primeur sur le thème parent, il est normal que ce soit les instructions de la feuille de style du thème enfant qui soient prises en compte en lieu et place de la feuille du thème parent !

J'ai donc simplement ajouter la feuille css avec juste l'import et rien d'autre.

Sans modification du thème parent, cela ne sert à rien de créer un thème enfant !

Puis bien sûr le fichier functions.php sans rien à l'intérieur ( juste <?php )

Cela ne sert à rien de mettre le fichier functions dans le thème enfant puisqu'il est d'office pris en compte dans le thème parent!

Ensuite toutes les modifs du style peuvent se faire aussi dans un fichier appelé custom.css dans le thème parent...

Faux, car dès qu'il y aura une mise à jour du thème parent, les fichiers modifiés seront écrasés y compris le custom.css

J'ai simplement était obligé de créer un thème enfant pour modifier le fichier theme-woocommerce.php afin de traduire une phrase en français. Sinon il me semble qu'il n'est pas utile de créer un thème enfant juste pour le css (il faut passer par custom.css)

Il ne faut pas créer un thème enfant pour traduire le thème, il faut créer plutôt un fichier . mo ou .po ! Oui au contraire, le thème enfant est utile si on modifie les fichiers du thème parent, surtout le style.css car si on modifie le fichier style.css du thème parent, les modifications seront écrasées lors des mises à jour du thème parent alors qu'elles ne le seront pas si on apporte les modifications dans le thème enfant !!

**cowichan** · 14/11/2015, 15h16

Bonjour,

Envoyé par miss_socrates

C'est normal, la feuille de style enfant ayant la primeur sur le thème parent, il est normal que ce soit les instructions de la feuille de style du thème enfant qui soient prises en compte en lieu et place de la feuille du thème parent !

Même si les instructions de la feuille de style étaient prises en compte, pour une raison que je ne comprends pas, le design en entier était modifié sans instruction de ma part (taille des images etc...)

Envoyé par miss_socrates

Sans modification du thème parent, cela ne sert à rien de créer un thème enfant !

Pour moi oui car les fichier .mo et .po étaient déja créer et remplissaient leurs rôles sauf pour une phrase qui restait en anglais (featured products), cette phrase était dans le fichier theme-woocommerce.php et je devais créer un thème enfant pour ce fichier.

Envoyé par miss_socrates

Cela ne sert à rien de mettre le fichier functions dans le thème enfant puisqu'il est d'office pris en compte dans le thème parent!

Oui...

Envoyé par miss_socrates

Faux, car dès qu'il y aura une mise à jour du thème parent, les fichiers modifiés seront écrasés y compris le custom.css

Si on édite le fichier style.css du theme parent on a cette avertissement : "To make it easy to update your theme, you should not edit the styles in this file. Instead use
the custom.css file to add your styles. You can copy a style from this file and paste it in custom.css and it will override the style in this file. You have been warned!

"

Donc je ne pense pas, et n'espere pas que mes modifications seront écrasées à la prochaine mise à jourpuisqu'on nous fait justement écrire dans un autre fichier.

Je pensais que c'était bien d'éclaircir ce que je savais avec mon expérience. Mais je suis loin de maîtriser ce thème et WordPress en général, je veux juste relater mon expérience.

**miss_socrates** · 23/11/2015, 10h04

Sans connaître le thème utilisé, je ne peux qu'émettre des considérations assez générales.
Il existe des thèmes qui proposent des thèmes enfant, ce qui permet de les utiliser en faisant les modifications directement sur la version enfant.
Sur certains thèmes, il y a plusieurs feuilles de style; il est possible de savoir si c'est le cas en allant voir dans le code source dans les lignes

Code :

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

<link rel=" stylesheet" >

avec le nom du fichier .css qui suit.
Donc si la mise en forme ne réagit pas en modifiant le fichier style.css, c'est possible que les instructions se trouvent dans d'autre(s) fichier(s).
Ici, probablement qu'il s'agit du fichier custom.css. Il vaut mieux s'assurer que ce fichier se trouve bien dans un thème enfant et ne sera pas écrasé lors des mises à jour.
Dans tous les cas, il vaut mieux conserver une copie de ces fichiers de mise en forme puisqu'ils sont fondamentaux en cas de réinstallation.
Pour la traduction, il ne faut pas créer nécessairement de thème enfant, il suffit de modifier le fichier .po ou .mo surtout s'il n'y a qu'une phrase ou 2 à traduire. Cela peut se faire avec le logiciel Poedit. Il suffit, là aussi, de conserver une copie de sécurité du fichier .mo modifié.

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

WordPress PHP

Discussions similaires

Partager

Partager