wp-content/themes/twentyfifteen/inc/customizer.php

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