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