[Summary view] [Print] [Text view]

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