|
1 <?php |
|
2 /** |
|
3 * Twenty Fifteen Customizer functionality |
|
4 * |
|
5 * @package WordPress |
|
6 * @subpackage Twenty_Fifteen |
|
7 * @since Twenty Fifteen 1.0 |
|
8 */ |
|
9 |
|
10 /** |
|
11 * Add postMessage support for site title and description for the Customizer. |
|
12 * |
|
13 * @since Twenty Fifteen 1.0 |
|
14 * |
|
15 * @param WP_Customize_Manager $wp_customize Customizer object. |
|
16 */ |
|
17 function twentyfifteen_customize_register( $wp_customize ) { |
|
18 $color_scheme = twentyfifteen_get_color_scheme(); |
|
19 |
|
20 $wp_customize->get_setting( 'blogname' )->transport = 'postMessage'; |
|
21 $wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage'; |
|
22 |
|
23 // Add color scheme setting and control. |
|
24 $wp_customize->add_setting( 'color_scheme', array( |
|
25 'default' => 'default', |
|
26 'sanitize_callback' => 'twentyfifteen_sanitize_color_scheme', |
|
27 'transport' => 'postMessage', |
|
28 ) ); |
|
29 |
|
30 $wp_customize->add_control( 'color_scheme', array( |
|
31 'label' => __( 'Base Color Scheme', 'twentyfifteen' ), |
|
32 'section' => 'colors', |
|
33 'type' => 'select', |
|
34 'choices' => twentyfifteen_get_color_scheme_choices(), |
|
35 'priority' => 1, |
|
36 ) ); |
|
37 |
|
38 // Add custom header and sidebar text color setting and control. |
|
39 $wp_customize->add_setting( 'sidebar_textcolor', array( |
|
40 'default' => $color_scheme[4], |
|
41 'sanitize_callback' => 'sanitize_hex_color', |
|
42 'transport' => 'postMessage', |
|
43 ) ); |
|
44 |
|
45 $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'sidebar_textcolor', array( |
|
46 'label' => __( 'Header and Sidebar Text Color', 'twentyfifteen' ), |
|
47 'description' => __( 'Applied to the header on small screens and the sidebar on wide screens.', 'twentyfifteen' ), |
|
48 'section' => 'colors', |
|
49 ) ) ); |
|
50 |
|
51 // Remove the core header textcolor control, as it shares the sidebar text color. |
|
52 $wp_customize->remove_control( 'header_textcolor' ); |
|
53 |
|
54 // Add custom header and sidebar background color setting and control. |
|
55 $wp_customize->add_setting( 'header_background_color', array( |
|
56 'default' => $color_scheme[1], |
|
57 'sanitize_callback' => 'sanitize_hex_color', |
|
58 'transport' => 'postMessage', |
|
59 ) ); |
|
60 |
|
61 $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_background_color', array( |
|
62 'label' => __( 'Header and Sidebar Background Color', 'twentyfifteen' ), |
|
63 'description' => __( 'Applied to the header on small screens and the sidebar on wide screens.', 'twentyfifteen' ), |
|
64 'section' => 'colors', |
|
65 ) ) ); |
|
66 |
|
67 // Add an additional description to the header image section. |
|
68 $wp_customize->get_section( 'header_image' )->description = __( 'Applied to the header on small screens and the sidebar on wide screens.', 'twentyfifteen' ); |
|
69 } |
|
70 add_action( 'customize_register', 'twentyfifteen_customize_register', 11 ); |
|
71 |
|
72 /** |
|
73 * Register color schemes for Twenty Fifteen. |
|
74 * |
|
75 * Can be filtered with {@see 'twentyfifteen_color_schemes'}. |
|
76 * |
|
77 * The order of colors in a colors array: |
|
78 * 1. Main Background Color. |
|
79 * 2. Sidebar Background Color. |
|
80 * 3. Box Background Color. |
|
81 * 4. Main Text and Link Color. |
|
82 * 5. Sidebar Text and Link Color. |
|
83 * 6. Meta Box Background Color. |
|
84 * |
|
85 * @since Twenty Fifteen 1.0 |
|
86 * |
|
87 * @return array An associative array of color scheme options. |
|
88 */ |
|
89 function twentyfifteen_get_color_schemes() { |
|
90 return apply_filters( 'twentyfifteen_color_schemes', array( |
|
91 'default' => array( |
|
92 'label' => __( 'Default', 'twentyfifteen' ), |
|
93 'colors' => array( |
|
94 '#f1f1f1', |
|
95 '#ffffff', |
|
96 '#ffffff', |
|
97 '#333333', |
|
98 '#333333', |
|
99 '#f7f7f7', |
|
100 ), |
|
101 ), |
|
102 'dark' => array( |
|
103 'label' => __( 'Dark', 'twentyfifteen' ), |
|
104 'colors' => array( |
|
105 '#111111', |
|
106 '#202020', |
|
107 '#202020', |
|
108 '#bebebe', |
|
109 '#bebebe', |
|
110 '#1b1b1b', |
|
111 ), |
|
112 ), |
|
113 'yellow' => array( |
|
114 'label' => __( 'Yellow', 'twentyfifteen' ), |
|
115 'colors' => array( |
|
116 '#f4ca16', |
|
117 '#ffdf00', |
|
118 '#ffffff', |
|
119 '#111111', |
|
120 '#111111', |
|
121 '#f1f1f1', |
|
122 ), |
|
123 ), |
|
124 'pink' => array( |
|
125 'label' => __( 'Pink', 'twentyfifteen' ), |
|
126 'colors' => array( |
|
127 '#ffe5d1', |
|
128 '#e53b51', |
|
129 '#ffffff', |
|
130 '#352712', |
|
131 '#ffffff', |
|
132 '#f1f1f1', |
|
133 ), |
|
134 ), |
|
135 'purple' => array( |
|
136 'label' => __( 'Purple', 'twentyfifteen' ), |
|
137 'colors' => array( |
|
138 '#674970', |
|
139 '#2e2256', |
|
140 '#ffffff', |
|
141 '#2e2256', |
|
142 '#ffffff', |
|
143 '#f1f1f1', |
|
144 ), |
|
145 ), |
|
146 'blue' => array( |
|
147 'label' => __( 'Blue', 'twentyfifteen' ), |
|
148 'colors' => array( |
|
149 '#e9f2f9', |
|
150 '#55c3dc', |
|
151 '#ffffff', |
|
152 '#22313f', |
|
153 '#ffffff', |
|
154 '#f1f1f1', |
|
155 ), |
|
156 ), |
|
157 ) ); |
|
158 } |
|
159 |
|
160 if ( ! function_exists( 'twentyfifteen_get_color_scheme' ) ) : |
|
161 /** |
|
162 * Get the current Twenty Fifteen color scheme. |
|
163 * |
|
164 * @since Twenty Fifteen 1.0 |
|
165 * |
|
166 * @return array An associative array of either the current or default color scheme hex values. |
|
167 */ |
|
168 function twentyfifteen_get_color_scheme() { |
|
169 $color_scheme_option = get_theme_mod( 'color_scheme', 'default' ); |
|
170 $color_schemes = twentyfifteen_get_color_schemes(); |
|
171 |
|
172 if ( array_key_exists( $color_scheme_option, $color_schemes ) ) { |
|
173 return $color_schemes[ $color_scheme_option ]['colors']; |
|
174 } |
|
175 |
|
176 return $color_schemes['default']['colors']; |
|
177 } |
|
178 endif; // twentyfifteen_get_color_scheme |
|
179 |
|
180 if ( ! function_exists( 'twentyfifteen_get_color_scheme_choices' ) ) : |
|
181 /** |
|
182 * Returns an array of color scheme choices registered for Twenty Fifteen. |
|
183 * |
|
184 * @since Twenty Fifteen 1.0 |
|
185 * |
|
186 * @return array Array of color schemes. |
|
187 */ |
|
188 function twentyfifteen_get_color_scheme_choices() { |
|
189 $color_schemes = twentyfifteen_get_color_schemes(); |
|
190 $color_scheme_control_options = array(); |
|
191 |
|
192 foreach ( $color_schemes as $color_scheme => $value ) { |
|
193 $color_scheme_control_options[ $color_scheme ] = $value['label']; |
|
194 } |
|
195 |
|
196 return $color_scheme_control_options; |
|
197 } |
|
198 endif; // twentyfifteen_get_color_scheme_choices |
|
199 |
|
200 if ( ! function_exists( 'twentyfifteen_sanitize_color_scheme' ) ) : |
|
201 /** |
|
202 * Sanitization callback for color schemes. |
|
203 * |
|
204 * @since Twenty Fifteen 1.0 |
|
205 * |
|
206 * @param string $value Color scheme name value. |
|
207 * @return string Color scheme name. |
|
208 */ |
|
209 function twentyfifteen_sanitize_color_scheme( $value ) { |
|
210 $color_schemes = twentyfifteen_get_color_scheme_choices(); |
|
211 |
|
212 if ( ! array_key_exists( $value, $color_schemes ) ) { |
|
213 $value = 'default'; |
|
214 } |
|
215 |
|
216 return $value; |
|
217 } |
|
218 endif; // twentyfifteen_sanitize_color_scheme |
|
219 |
|
220 /** |
|
221 * Enqueues front-end CSS for color scheme. |
|
222 * |
|
223 * @since Twenty Fifteen 1.0 |
|
224 * |
|
225 * @see wp_add_inline_style() |
|
226 */ |
|
227 function twentyfifteen_color_scheme_css() { |
|
228 $color_scheme_option = get_theme_mod( 'color_scheme', 'default' ); |
|
229 |
|
230 // Don't do anything if the default color scheme is selected. |
|
231 if ( 'default' === $color_scheme_option ) { |
|
232 return; |
|
233 } |
|
234 |
|
235 $color_scheme = twentyfifteen_get_color_scheme(); |
|
236 |
|
237 // Convert main and sidebar text hex color to rgba. |
|
238 $color_textcolor_rgb = twentyfifteen_hex2rgb( $color_scheme[3] ); |
|
239 $color_sidebar_textcolor_rgb = twentyfifteen_hex2rgb( $color_scheme[4] ); |
|
240 $colors = array( |
|
241 'background_color' => $color_scheme[0], |
|
242 'header_background_color' => $color_scheme[1], |
|
243 'box_background_color' => $color_scheme[2], |
|
244 'textcolor' => $color_scheme[3], |
|
245 'secondary_textcolor' => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.7)', $color_textcolor_rgb ), |
|
246 'border_color' => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.1)', $color_textcolor_rgb ), |
|
247 'border_focus_color' => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.3)', $color_textcolor_rgb ), |
|
248 'sidebar_textcolor' => $color_scheme[4], |
|
249 'sidebar_border_color' => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.1)', $color_sidebar_textcolor_rgb ), |
|
250 'sidebar_border_focus_color' => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.3)', $color_sidebar_textcolor_rgb ), |
|
251 'secondary_sidebar_textcolor' => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.7)', $color_sidebar_textcolor_rgb ), |
|
252 'meta_box_background_color' => $color_scheme[5], |
|
253 ); |
|
254 |
|
255 $color_scheme_css = twentyfifteen_get_color_scheme_css( $colors ); |
|
256 |
|
257 wp_add_inline_style( 'twentyfifteen-style', $color_scheme_css ); |
|
258 } |
|
259 add_action( 'wp_enqueue_scripts', 'twentyfifteen_color_scheme_css' ); |
|
260 |
|
261 /** |
|
262 * Binds JS listener to make Customizer color_scheme control. |
|
263 * |
|
264 * Passes color scheme data as colorScheme global. |
|
265 * |
|
266 * @since Twenty Fifteen 1.0 |
|
267 */ |
|
268 function twentyfifteen_customize_control_js() { |
|
269 wp_enqueue_script( 'color-scheme-control', get_template_directory_uri() . '/js/color-scheme-control.js', array( 'customize-controls', 'iris', 'underscore', 'wp-util' ), '20141216', true ); |
|
270 wp_localize_script( 'color-scheme-control', 'colorScheme', twentyfifteen_get_color_schemes() ); |
|
271 } |
|
272 add_action( 'customize_controls_enqueue_scripts', 'twentyfifteen_customize_control_js' ); |
|
273 |
|
274 /** |
|
275 * Binds JS handlers to make the Customizer preview reload changes asynchronously. |
|
276 * |
|
277 * @since Twenty Fifteen 1.0 |
|
278 */ |
|
279 function twentyfifteen_customize_preview_js() { |
|
280 wp_enqueue_script( 'twentyfifteen-customize-preview', get_template_directory_uri() . '/js/customize-preview.js', array( 'customize-preview' ), '20141216', true ); |
|
281 } |
|
282 add_action( 'customize_preview_init', 'twentyfifteen_customize_preview_js' ); |
|
283 |
|
284 /** |
|
285 * Returns CSS for the color schemes. |
|
286 * |
|
287 * @since Twenty Fifteen 1.0 |
|
288 * |
|
289 * @param array $colors Color scheme colors. |
|
290 * @return string Color scheme CSS. |
|
291 */ |
|
292 function twentyfifteen_get_color_scheme_css( $colors ) { |
|
293 $colors = wp_parse_args( $colors, array( |
|
294 'background_color' => '', |
|
295 'header_background_color' => '', |
|
296 'box_background_color' => '', |
|
297 'textcolor' => '', |
|
298 'secondary_textcolor' => '', |
|
299 'border_color' => '', |
|
300 'border_focus_color' => '', |
|
301 'sidebar_textcolor' => '', |
|
302 'sidebar_border_color' => '', |
|
303 'sidebar_border_focus_color' => '', |
|
304 'secondary_sidebar_textcolor' => '', |
|
305 'meta_box_background_color' => '', |
|
306 ) ); |
|
307 |
|
308 $css = <<<CSS |
|
309 /* Color Scheme */ |
|
310 |
|
311 /* Background Color */ |
|
312 body { |
|
313 background-color: {$colors['background_color']}; |
|
314 } |
|
315 |
|
316 /* Sidebar Background Color */ |
|
317 body:before, |
|
318 .site-header { |
|
319 background-color: {$colors['header_background_color']}; |
|
320 } |
|
321 |
|
322 /* Box Background Color */ |
|
323 .post-navigation, |
|
324 .pagination, |
|
325 .secondary, |
|
326 .site-footer, |
|
327 .hentry, |
|
328 .page-header, |
|
329 .page-content, |
|
330 .comments-area, |
|
331 .widecolumn { |
|
332 background-color: {$colors['box_background_color']}; |
|
333 } |
|
334 |
|
335 /* Box Background Color */ |
|
336 button, |
|
337 input[type="button"], |
|
338 input[type="reset"], |
|
339 input[type="submit"], |
|
340 .pagination .prev, |
|
341 .pagination .next, |
|
342 .widget_calendar tbody a, |
|
343 .widget_calendar tbody a:hover, |
|
344 .widget_calendar tbody a:focus, |
|
345 .page-links a, |
|
346 .page-links a:hover, |
|
347 .page-links a:focus, |
|
348 .sticky-post { |
|
349 color: {$colors['box_background_color']}; |
|
350 } |
|
351 |
|
352 /* Main Text Color */ |
|
353 button, |
|
354 input[type="button"], |
|
355 input[type="reset"], |
|
356 input[type="submit"], |
|
357 .pagination .prev, |
|
358 .pagination .next, |
|
359 .widget_calendar tbody a, |
|
360 .page-links a, |
|
361 .sticky-post { |
|
362 background-color: {$colors['textcolor']}; |
|
363 } |
|
364 |
|
365 /* Main Text Color */ |
|
366 body, |
|
367 blockquote cite, |
|
368 blockquote small, |
|
369 a, |
|
370 .dropdown-toggle:after, |
|
371 .image-navigation a:hover, |
|
372 .image-navigation a:focus, |
|
373 .comment-navigation a:hover, |
|
374 .comment-navigation a:focus, |
|
375 .widget-title, |
|
376 .entry-footer a:hover, |
|
377 .entry-footer a:focus, |
|
378 .comment-metadata a:hover, |
|
379 .comment-metadata a:focus, |
|
380 .pingback .edit-link a:hover, |
|
381 .pingback .edit-link a:focus, |
|
382 .comment-list .reply a:hover, |
|
383 .comment-list .reply a:focus, |
|
384 .site-info a:hover, |
|
385 .site-info a:focus { |
|
386 color: {$colors['textcolor']}; |
|
387 } |
|
388 |
|
389 /* Main Text Color */ |
|
390 .entry-content a, |
|
391 .entry-summary a, |
|
392 .page-content a, |
|
393 .comment-content a, |
|
394 .pingback .comment-body > a, |
|
395 .author-description a, |
|
396 .taxonomy-description a, |
|
397 .textwidget a, |
|
398 .entry-footer a:hover, |
|
399 .comment-metadata a:hover, |
|
400 .pingback .edit-link a:hover, |
|
401 .comment-list .reply a:hover, |
|
402 .site-info a:hover { |
|
403 border-color: {$colors['textcolor']}; |
|
404 } |
|
405 |
|
406 /* Secondary Text Color */ |
|
407 button:hover, |
|
408 button:focus, |
|
409 input[type="button"]:hover, |
|
410 input[type="button"]:focus, |
|
411 input[type="reset"]:hover, |
|
412 input[type="reset"]:focus, |
|
413 input[type="submit"]:hover, |
|
414 input[type="submit"]:focus, |
|
415 .pagination .prev:hover, |
|
416 .pagination .prev:focus, |
|
417 .pagination .next:hover, |
|
418 .pagination .next:focus, |
|
419 .widget_calendar tbody a:hover, |
|
420 .widget_calendar tbody a:focus, |
|
421 .page-links a:hover, |
|
422 .page-links a:focus { |
|
423 background-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */ |
|
424 background-color: {$colors['secondary_textcolor']}; |
|
425 } |
|
426 |
|
427 /* Secondary Text Color */ |
|
428 blockquote, |
|
429 a:hover, |
|
430 a:focus, |
|
431 .main-navigation .menu-item-description, |
|
432 .post-navigation .meta-nav, |
|
433 .post-navigation a:hover .post-title, |
|
434 .post-navigation a:focus .post-title, |
|
435 .image-navigation, |
|
436 .image-navigation a, |
|
437 .comment-navigation, |
|
438 .comment-navigation a, |
|
439 .widget, |
|
440 .author-heading, |
|
441 .entry-footer, |
|
442 .entry-footer a, |
|
443 .taxonomy-description, |
|
444 .page-links > .page-links-title, |
|
445 .entry-caption, |
|
446 .comment-author, |
|
447 .comment-metadata, |
|
448 .comment-metadata a, |
|
449 .pingback .edit-link, |
|
450 .pingback .edit-link a, |
|
451 .post-password-form label, |
|
452 .comment-form label, |
|
453 .comment-notes, |
|
454 .comment-awaiting-moderation, |
|
455 .logged-in-as, |
|
456 .form-allowed-tags, |
|
457 .no-comments, |
|
458 .site-info, |
|
459 .site-info a, |
|
460 .wp-caption-text, |
|
461 .gallery-caption, |
|
462 .comment-list .reply a, |
|
463 .widecolumn label, |
|
464 .widecolumn .mu_register label { |
|
465 color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */ |
|
466 color: {$colors['secondary_textcolor']}; |
|
467 } |
|
468 |
|
469 /* Secondary Text Color */ |
|
470 blockquote, |
|
471 .logged-in-as a:hover, |
|
472 .comment-author a:hover { |
|
473 border-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */ |
|
474 border-color: {$colors['secondary_textcolor']}; |
|
475 } |
|
476 |
|
477 /* Border Color */ |
|
478 hr, |
|
479 .dropdown-toggle:hover, |
|
480 .dropdown-toggle:focus { |
|
481 background-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */ |
|
482 background-color: {$colors['border_color']}; |
|
483 } |
|
484 |
|
485 /* Border Color */ |
|
486 pre, |
|
487 abbr[title], |
|
488 table, |
|
489 th, |
|
490 td, |
|
491 input, |
|
492 textarea, |
|
493 .main-navigation ul, |
|
494 .main-navigation li, |
|
495 .post-navigation, |
|
496 .post-navigation div + div, |
|
497 .pagination, |
|
498 .comment-navigation, |
|
499 .widget li, |
|
500 .widget_categories .children, |
|
501 .widget_nav_menu .sub-menu, |
|
502 .widget_pages .children, |
|
503 .site-header, |
|
504 .site-footer, |
|
505 .hentry + .hentry, |
|
506 .author-info, |
|
507 .entry-content .page-links a, |
|
508 .page-links > span, |
|
509 .page-header, |
|
510 .comments-area, |
|
511 .comment-list + .comment-respond, |
|
512 .comment-list article, |
|
513 .comment-list .pingback, |
|
514 .comment-list .trackback, |
|
515 .comment-list .reply a, |
|
516 .no-comments { |
|
517 border-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */ |
|
518 border-color: {$colors['border_color']}; |
|
519 } |
|
520 |
|
521 /* Border Focus Color */ |
|
522 a:focus, |
|
523 button:focus, |
|
524 input:focus { |
|
525 outline-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */ |
|
526 outline-color: {$colors['border_focus_color']}; |
|
527 } |
|
528 |
|
529 input:focus, |
|
530 textarea:focus { |
|
531 border-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */ |
|
532 border-color: {$colors['border_focus_color']}; |
|
533 } |
|
534 |
|
535 /* Sidebar Link Color */ |
|
536 .secondary-toggle:before { |
|
537 color: {$colors['sidebar_textcolor']}; |
|
538 } |
|
539 |
|
540 .site-title a, |
|
541 .site-description { |
|
542 color: {$colors['sidebar_textcolor']}; |
|
543 } |
|
544 |
|
545 /* Sidebar Text Color */ |
|
546 .site-title a:hover, |
|
547 .site-title a:focus { |
|
548 color: {$colors['secondary_sidebar_textcolor']}; |
|
549 } |
|
550 |
|
551 /* Sidebar Border Color */ |
|
552 .secondary-toggle { |
|
553 border-color: {$colors['sidebar_textcolor']}; /* Fallback for IE7 and IE8 */ |
|
554 border-color: {$colors['sidebar_border_color']}; |
|
555 } |
|
556 |
|
557 /* Sidebar Border Focus Color */ |
|
558 .secondary-toggle:hover, |
|
559 .secondary-toggle:focus { |
|
560 border-color: {$colors['sidebar_textcolor']}; /* Fallback for IE7 and IE8 */ |
|
561 border-color: {$colors['sidebar_border_focus_color']}; |
|
562 } |
|
563 |
|
564 .site-title a { |
|
565 outline-color: {$colors['sidebar_textcolor']}; /* Fallback for IE7 and IE8 */ |
|
566 outline-color: {$colors['sidebar_border_focus_color']}; |
|
567 } |
|
568 |
|
569 /* Meta Background Color */ |
|
570 .entry-footer { |
|
571 background-color: {$colors['meta_box_background_color']}; |
|
572 } |
|
573 |
|
574 @media screen and (min-width: 38.75em) { |
|
575 /* Main Text Color */ |
|
576 .page-header { |
|
577 border-color: {$colors['textcolor']}; |
|
578 } |
|
579 } |
|
580 |
|
581 @media screen and (min-width: 59.6875em) { |
|
582 /* Make sure its transparent on desktop */ |
|
583 .site-header, |
|
584 .secondary { |
|
585 background-color: transparent; |
|
586 } |
|
587 |
|
588 /* Sidebar Background Color */ |
|
589 .widget button, |
|
590 .widget input[type="button"], |
|
591 .widget input[type="reset"], |
|
592 .widget input[type="submit"], |
|
593 .widget_calendar tbody a, |
|
594 .widget_calendar tbody a:hover, |
|
595 .widget_calendar tbody a:focus { |
|
596 color: {$colors['header_background_color']}; |
|
597 } |
|
598 |
|
599 /* Sidebar Link Color */ |
|
600 .secondary a, |
|
601 .dropdown-toggle:after, |
|
602 .widget-title, |
|
603 .widget blockquote cite, |
|
604 .widget blockquote small { |
|
605 color: {$colors['sidebar_textcolor']}; |
|
606 } |
|
607 |
|
608 .widget button, |
|
609 .widget input[type="button"], |
|
610 .widget input[type="reset"], |
|
611 .widget input[type="submit"], |
|
612 .widget_calendar tbody a { |
|
613 background-color: {$colors['sidebar_textcolor']}; |
|
614 } |
|
615 |
|
616 .textwidget a { |
|
617 border-color: {$colors['sidebar_textcolor']}; |
|
618 } |
|
619 |
|
620 /* Sidebar Text Color */ |
|
621 .secondary a:hover, |
|
622 .secondary a:focus, |
|
623 .main-navigation .menu-item-description, |
|
624 .widget, |
|
625 .widget blockquote, |
|
626 .widget .wp-caption-text, |
|
627 .widget .gallery-caption { |
|
628 color: {$colors['secondary_sidebar_textcolor']}; |
|
629 } |
|
630 |
|
631 .widget button:hover, |
|
632 .widget button:focus, |
|
633 .widget input[type="button"]:hover, |
|
634 .widget input[type="button"]:focus, |
|
635 .widget input[type="reset"]:hover, |
|
636 .widget input[type="reset"]:focus, |
|
637 .widget input[type="submit"]:hover, |
|
638 .widget input[type="submit"]:focus, |
|
639 .widget_calendar tbody a:hover, |
|
640 .widget_calendar tbody a:focus { |
|
641 background-color: {$colors['secondary_sidebar_textcolor']}; |
|
642 } |
|
643 |
|
644 .widget blockquote { |
|
645 border-color: {$colors['secondary_sidebar_textcolor']}; |
|
646 } |
|
647 |
|
648 /* Sidebar Border Color */ |
|
649 .main-navigation ul, |
|
650 .main-navigation li, |
|
651 .widget input, |
|
652 .widget textarea, |
|
653 .widget table, |
|
654 .widget th, |
|
655 .widget td, |
|
656 .widget pre, |
|
657 .widget li, |
|
658 .widget_categories .children, |
|
659 .widget_nav_menu .sub-menu, |
|
660 .widget_pages .children, |
|
661 .widget abbr[title] { |
|
662 border-color: {$colors['sidebar_border_color']}; |
|
663 } |
|
664 |
|
665 .dropdown-toggle:hover, |
|
666 .dropdown-toggle:focus, |
|
667 .widget hr { |
|
668 background-color: {$colors['sidebar_border_color']}; |
|
669 } |
|
670 |
|
671 .widget input:focus, |
|
672 .widget textarea:focus { |
|
673 border-color: {$colors['sidebar_border_focus_color']}; |
|
674 } |
|
675 |
|
676 .sidebar a:focus, |
|
677 .dropdown-toggle:focus { |
|
678 outline-color: {$colors['sidebar_border_focus_color']}; |
|
679 } |
|
680 } |
|
681 CSS; |
|
682 |
|
683 return $css; |
|
684 } |
|
685 |
|
686 /** |
|
687 * Output an Underscore template for generating CSS for the color scheme. |
|
688 * |
|
689 * The template generates the css dynamically for instant display in the Customizer |
|
690 * preview. |
|
691 * |
|
692 * @since Twenty Fifteen 1.0 |
|
693 */ |
|
694 function twentyfifteen_color_scheme_css_template() { |
|
695 $colors = array( |
|
696 'background_color' => '{{ data.background_color }}', |
|
697 'header_background_color' => '{{ data.header_background_color }}', |
|
698 'box_background_color' => '{{ data.box_background_color }}', |
|
699 'textcolor' => '{{ data.textcolor }}', |
|
700 'secondary_textcolor' => '{{ data.secondary_textcolor }}', |
|
701 'border_color' => '{{ data.border_color }}', |
|
702 'border_focus_color' => '{{ data.border_focus_color }}', |
|
703 'sidebar_textcolor' => '{{ data.sidebar_textcolor }}', |
|
704 'sidebar_border_color' => '{{ data.sidebar_border_color }}', |
|
705 'sidebar_border_focus_color' => '{{ data.sidebar_border_focus_color }}', |
|
706 'secondary_sidebar_textcolor' => '{{ data.secondary_sidebar_textcolor }}', |
|
707 'meta_box_background_color' => '{{ data.meta_box_background_color }}', |
|
708 ); |
|
709 ?> |
|
710 <script type="text/html" id="tmpl-twentyfifteen-color-scheme"> |
|
711 <?php echo twentyfifteen_get_color_scheme_css( $colors ); ?> |
|
712 </script> |
|
713 <?php |
|
714 } |
|
715 add_action( 'customize_controls_print_footer_scripts', 'twentyfifteen_color_scheme_css_template' ); |