[ Index ] |
PHP Cross Reference of WordPress |
[Summary view] [Print] [Text view]
1 <?php 2 /** 3 * Twenty Sixteen Customizer functionality 4 * 5 * @package WordPress 6 * @subpackage Twenty_Sixteen 7 * @since Twenty Sixteen 1.0 8 */ 9 10 /** 11 * Sets up the WordPress core custom header and custom background features. 12 * 13 * @since Twenty Sixteen 1.0 14 * 15 * @see twentysixteen_header_style() 16 */ 17 function twentysixteen_custom_header_and_background() { 18 $color_scheme = twentysixteen_get_color_scheme(); 19 $default_background_color = trim( $color_scheme[0], '#' ); 20 $default_text_color = trim( $color_scheme[3], '#' ); 21 22 add_theme_support( 23 'custom-background', 24 /** 25 * Filters the arguments used when adding 'custom-background' support in Twenty Sixteen. 26 * 27 * @since Twenty Sixteen 1.0 28 * 29 * @param array $args { 30 * An array of custom-background support arguments. 31 * 32 * @type string $default-color Default color of the background. 33 * } 34 */ 35 apply_filters( 36 'twentysixteen_custom_background_args', 37 array( 38 'default-color' => $default_background_color, 39 ) 40 ) 41 ); 42 43 add_theme_support( 44 'custom-header', 45 /** 46 * Filters the arguments used when adding 'custom-header' support in Twenty Sixteen. 47 * 48 * @since Twenty Sixteen 1.0 49 * 50 * @param array $args { 51 * An array of custom-header support arguments. 52 * 53 * @type string $default-text-color Default color of the header text. 54 * @type int $width Width in pixels of the custom header image. Default 1200. 55 * @type int $height Height in pixels of the custom header image. Default 280. 56 * @type bool $flex-height Whether to allow flexible-height header images. Default true. 57 * @type callable $wp-head-callback Callback function used to style the header image and text 58 * displayed on the blog. 59 * } 60 */ 61 apply_filters( 62 'twentysixteen_custom_header_args', 63 array( 64 'default-text-color' => $default_text_color, 65 'width' => 1200, 66 'height' => 280, 67 'flex-height' => true, 68 'wp-head-callback' => 'twentysixteen_header_style', 69 ) 70 ) 71 ); 72 } 73 add_action( 'after_setup_theme', 'twentysixteen_custom_header_and_background' ); 74 75 if ( ! function_exists( 'twentysixteen_header_style' ) ) : 76 /** 77 * Styles the header text displayed on the site. 78 * 79 * Create your own twentysixteen_header_style() function to override in a child theme. 80 * 81 * @since Twenty Sixteen 1.0 82 * 83 * @see twentysixteen_custom_header_and_background(). 84 */ 85 function twentysixteen_header_style() { 86 // If the header text option is untouched, let's bail. 87 if ( display_header_text() ) { 88 return; 89 } 90 91 // If the header text has been hidden. 92 ?> 93 <style type="text/css" id="twentysixteen-header-css"> 94 .site-branding { 95 margin: 0 auto 0 0; 96 } 97 98 .site-branding .site-title, 99 .site-description { 100 clip: rect(1px, 1px, 1px, 1px); 101 position: absolute; 102 } 103 </style> 104 <?php 105 } 106 endif; // twentysixteen_header_style() 107 108 /** 109 * Adds postMessage support for site title and description for the Customizer. 110 * 111 * @since Twenty Sixteen 1.0 112 * 113 * @param WP_Customize_Manager $wp_customize The Customizer object. 114 */ 115 function twentysixteen_customize_register( $wp_customize ) { 116 $color_scheme = twentysixteen_get_color_scheme(); 117 118 $wp_customize->get_setting( 'blogname' )->transport = 'postMessage'; 119 $wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage'; 120 121 if ( isset( $wp_customize->selective_refresh ) ) { 122 $wp_customize->selective_refresh->add_partial( 123 'blogname', 124 array( 125 'selector' => '.site-title a', 126 'container_inclusive' => false, 127 'render_callback' => 'twentysixteen_customize_partial_blogname', 128 ) 129 ); 130 $wp_customize->selective_refresh->add_partial( 131 'blogdescription', 132 array( 133 'selector' => '.site-description', 134 'container_inclusive' => false, 135 'render_callback' => 'twentysixteen_customize_partial_blogdescription', 136 ) 137 ); 138 } 139 140 // Add color scheme setting and control. 141 $wp_customize->add_setting( 142 'color_scheme', 143 array( 144 'default' => 'default', 145 'sanitize_callback' => 'twentysixteen_sanitize_color_scheme', 146 'transport' => 'postMessage', 147 ) 148 ); 149 150 $wp_customize->add_control( 151 'color_scheme', 152 array( 153 'label' => __( 'Base Color Scheme', 'twentysixteen' ), 154 'section' => 'colors', 155 'type' => 'select', 156 'choices' => twentysixteen_get_color_scheme_choices(), 157 'priority' => 1, 158 ) 159 ); 160 161 // Add page background color setting and control. 162 $wp_customize->add_setting( 163 'page_background_color', 164 array( 165 'default' => $color_scheme[1], 166 'sanitize_callback' => 'sanitize_hex_color', 167 'transport' => 'postMessage', 168 ) 169 ); 170 171 $wp_customize->add_control( 172 new WP_Customize_Color_Control( 173 $wp_customize, 174 'page_background_color', 175 array( 176 'label' => __( 'Page Background Color', 'twentysixteen' ), 177 'section' => 'colors', 178 ) 179 ) 180 ); 181 182 // Remove the core header textcolor control, as it shares the main text color. 183 $wp_customize->remove_control( 'header_textcolor' ); 184 185 // Add link color setting and control. 186 $wp_customize->add_setting( 187 'link_color', 188 array( 189 'default' => $color_scheme[2], 190 'sanitize_callback' => 'sanitize_hex_color', 191 'transport' => 'postMessage', 192 ) 193 ); 194 195 $wp_customize->add_control( 196 new WP_Customize_Color_Control( 197 $wp_customize, 198 'link_color', 199 array( 200 'label' => __( 'Link Color', 'twentysixteen' ), 201 'section' => 'colors', 202 ) 203 ) 204 ); 205 206 // Add main text color setting and control. 207 $wp_customize->add_setting( 208 'main_text_color', 209 array( 210 'default' => $color_scheme[3], 211 'sanitize_callback' => 'sanitize_hex_color', 212 'transport' => 'postMessage', 213 ) 214 ); 215 216 $wp_customize->add_control( 217 new WP_Customize_Color_Control( 218 $wp_customize, 219 'main_text_color', 220 array( 221 'label' => __( 'Main Text Color', 'twentysixteen' ), 222 'section' => 'colors', 223 ) 224 ) 225 ); 226 227 // Add secondary text color setting and control. 228 $wp_customize->add_setting( 229 'secondary_text_color', 230 array( 231 'default' => $color_scheme[4], 232 'sanitize_callback' => 'sanitize_hex_color', 233 'transport' => 'postMessage', 234 ) 235 ); 236 237 $wp_customize->add_control( 238 new WP_Customize_Color_Control( 239 $wp_customize, 240 'secondary_text_color', 241 array( 242 'label' => __( 'Secondary Text Color', 'twentysixteen' ), 243 'section' => 'colors', 244 ) 245 ) 246 ); 247 } 248 add_action( 'customize_register', 'twentysixteen_customize_register', 11 ); 249 250 /** 251 * Render the site title for the selective refresh partial. 252 * 253 * @since Twenty Sixteen 1.2 254 * 255 * @see twentysixteen_customize_register() 256 * 257 * @return void 258 */ 259 function twentysixteen_customize_partial_blogname() { 260 bloginfo( 'name' ); 261 } 262 263 /** 264 * Render the site tagline for the selective refresh partial. 265 * 266 * @since Twenty Sixteen 1.2 267 * 268 * @see twentysixteen_customize_register() 269 * 270 * @return void 271 */ 272 function twentysixteen_customize_partial_blogdescription() { 273 bloginfo( 'description' ); 274 } 275 276 /** 277 * Registers color schemes for Twenty Sixteen. 278 * 279 * Can be filtered with {@see 'twentysixteen_color_schemes'}. 280 * 281 * The order of colors in a colors array: 282 * 1. Main Background Color. 283 * 2. Page Background Color. 284 * 3. Link Color. 285 * 4. Main Text Color. 286 * 5. Secondary Text Color. 287 * 288 * @since Twenty Sixteen 1.0 289 * 290 * @return array An associative array of color scheme options. 291 */ 292 function twentysixteen_get_color_schemes() { 293 /** 294 * Filters the color schemes registered for use with Twenty Sixteen. 295 * 296 * The default schemes include 'default', 'dark', 'gray', 'red', and 'yellow'. 297 * 298 * @since Twenty Sixteen 1.0 299 * 300 * @param array $schemes { 301 * Associative array of color schemes data. 302 * 303 * @type array $slug { 304 * Associative array of information for setting up the color scheme. 305 * 306 * @type string $label Color scheme label. 307 * @type array $colors HEX codes for default colors prepended with a hash symbol ('#'). 308 * Colors are defined in the following order: Main background, page 309 * background, link, main text, secondary text. 310 * } 311 * } 312 */ 313 return apply_filters( 314 'twentysixteen_color_schemes', 315 array( 316 'default' => array( 317 'label' => __( 'Default', 'twentysixteen' ), 318 'colors' => array( 319 '#1a1a1a', 320 '#ffffff', 321 '#007acc', 322 '#1a1a1a', 323 '#686868', 324 ), 325 ), 326 'dark' => array( 327 'label' => __( 'Dark', 'twentysixteen' ), 328 'colors' => array( 329 '#262626', 330 '#1a1a1a', 331 '#9adffd', 332 '#e5e5e5', 333 '#c1c1c1', 334 ), 335 ), 336 'gray' => array( 337 'label' => __( 'Gray', 'twentysixteen' ), 338 'colors' => array( 339 '#616a73', 340 '#4d545c', 341 '#c7c7c7', 342 '#f2f2f2', 343 '#f2f2f2', 344 ), 345 ), 346 'red' => array( 347 'label' => __( 'Red', 'twentysixteen' ), 348 'colors' => array( 349 '#ffffff', 350 '#ff675f', 351 '#640c1f', 352 '#402b30', 353 '#402b30', 354 ), 355 ), 356 'yellow' => array( 357 'label' => __( 'Yellow', 'twentysixteen' ), 358 'colors' => array( 359 '#3b3721', 360 '#ffef8e', 361 '#774e24', 362 '#3b3721', 363 '#5b4d3e', 364 ), 365 ), 366 ) 367 ); 368 } 369 370 if ( ! function_exists( 'twentysixteen_get_color_scheme' ) ) : 371 /** 372 * Retrieves the current Twenty Sixteen color scheme. 373 * 374 * Create your own twentysixteen_get_color_scheme() function to override in a child theme. 375 * 376 * @since Twenty Sixteen 1.0 377 * 378 * @return array An associative array of either the current or default color scheme HEX values. 379 */ 380 function twentysixteen_get_color_scheme() { 381 $color_scheme_option = get_theme_mod( 'color_scheme', 'default' ); 382 $color_schemes = twentysixteen_get_color_schemes(); 383 384 if ( array_key_exists( $color_scheme_option, $color_schemes ) ) { 385 return $color_schemes[ $color_scheme_option ]['colors']; 386 } 387 388 return $color_schemes['default']['colors']; 389 } 390 endif; // twentysixteen_get_color_scheme() 391 392 if ( ! function_exists( 'twentysixteen_get_color_scheme_choices' ) ) : 393 /** 394 * Retrieves an array of color scheme choices registered for Twenty Sixteen. 395 * 396 * Create your own twentysixteen_get_color_scheme_choices() function to override 397 * in a child theme. 398 * 399 * @since Twenty Sixteen 1.0 400 * 401 * @return array Array of color schemes. 402 */ 403 function twentysixteen_get_color_scheme_choices() { 404 $color_schemes = twentysixteen_get_color_schemes(); 405 $color_scheme_control_options = array(); 406 407 foreach ( $color_schemes as $color_scheme => $value ) { 408 $color_scheme_control_options[ $color_scheme ] = $value['label']; 409 } 410 411 return $color_scheme_control_options; 412 } 413 endif; // twentysixteen_get_color_scheme_choices() 414 415 416 if ( ! function_exists( 'twentysixteen_sanitize_color_scheme' ) ) : 417 /** 418 * Handles sanitization for Twenty Sixteen color schemes. 419 * 420 * Create your own twentysixteen_sanitize_color_scheme() function to override 421 * in a child theme. 422 * 423 * @since Twenty Sixteen 1.0 424 * 425 * @param string $value Color scheme name value. 426 * @return string Color scheme name. 427 */ 428 function twentysixteen_sanitize_color_scheme( $value ) { 429 $color_schemes = twentysixteen_get_color_scheme_choices(); 430 431 if ( ! array_key_exists( $value, $color_schemes ) ) { 432 return 'default'; 433 } 434 435 return $value; 436 } 437 endif; // twentysixteen_sanitize_color_scheme() 438 439 /** 440 * Enqueues front-end CSS for color scheme. 441 * 442 * @since Twenty Sixteen 1.0 443 * 444 * @see wp_add_inline_style() 445 */ 446 function twentysixteen_color_scheme_css() { 447 $color_scheme_option = get_theme_mod( 'color_scheme', 'default' ); 448 449 // Don't do anything if the default color scheme is selected. 450 if ( 'default' === $color_scheme_option ) { 451 return; 452 } 453 454 $color_scheme = twentysixteen_get_color_scheme(); 455 456 // Convert main text hex color to rgba. 457 $color_textcolor_rgb = twentysixteen_hex2rgb( $color_scheme[3] ); 458 459 // If the rgba values are empty return early. 460 if ( empty( $color_textcolor_rgb ) ) { 461 return; 462 } 463 464 // If we get this far, we have a custom color scheme. 465 $colors = array( 466 'background_color' => $color_scheme[0], 467 'page_background_color' => $color_scheme[1], 468 'link_color' => $color_scheme[2], 469 'main_text_color' => $color_scheme[3], 470 'secondary_text_color' => $color_scheme[4], 471 'border_color' => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.2)', $color_textcolor_rgb ), 472 473 ); 474 475 $color_scheme_css = twentysixteen_get_color_scheme_css( $colors ); 476 477 wp_add_inline_style( 'twentysixteen-style', $color_scheme_css ); 478 } 479 add_action( 'wp_enqueue_scripts', 'twentysixteen_color_scheme_css' ); 480 481 /** 482 * Binds the JS listener to make Customizer color_scheme control. 483 * 484 * Passes color scheme data as colorScheme global. 485 * 486 * @since Twenty Sixteen 1.0 487 */ 488 function twentysixteen_customize_control_js() { 489 wp_enqueue_script( 'color-scheme-control', get_template_directory_uri() . '/js/color-scheme-control.js', array( 'customize-controls', 'iris', 'underscore', 'wp-util' ), '20170530', true ); 490 wp_localize_script( 'color-scheme-control', 'colorScheme', twentysixteen_get_color_schemes() ); 491 } 492 add_action( 'customize_controls_enqueue_scripts', 'twentysixteen_customize_control_js' ); 493 494 /** 495 * Binds JS handlers to make the Customizer preview reload changes asynchronously. 496 * 497 * @since Twenty Sixteen 1.0 498 */ 499 function twentysixteen_customize_preview_js() { 500 wp_enqueue_script( 'twentysixteen-customize-preview', get_template_directory_uri() . '/js/customize-preview.js', array( 'customize-preview' ), '20170530', true ); 501 } 502 add_action( 'customize_preview_init', 'twentysixteen_customize_preview_js' ); 503 504 /** 505 * Returns CSS for the color schemes. 506 * 507 * @since Twenty Sixteen 1.0 508 * 509 * @param array $colors Color scheme colors. 510 * @return string Color scheme CSS. 511 */ 512 function twentysixteen_get_color_scheme_css( $colors ) { 513 $colors = wp_parse_args( 514 $colors, 515 array( 516 'background_color' => '', 517 'page_background_color' => '', 518 'link_color' => '', 519 'main_text_color' => '', 520 'secondary_text_color' => '', 521 'border_color' => '', 522 ) 523 ); 524 525 return <<<CSS 526 /* Color Scheme */ 527 528 /* Background Color */ 529 body { 530 background-color: {$colors['background_color']}; 531 } 532 533 /* Page Background Color */ 534 .site { 535 background-color: {$colors['page_background_color']}; 536 } 537 538 mark, 539 ins, 540 button, 541 button[disabled]:hover, 542 button[disabled]:focus, 543 input[type="button"], 544 input[type="button"][disabled]:hover, 545 input[type="button"][disabled]:focus, 546 input[type="reset"], 547 input[type="reset"][disabled]:hover, 548 input[type="reset"][disabled]:focus, 549 input[type="submit"], 550 input[type="submit"][disabled]:hover, 551 input[type="submit"][disabled]:focus, 552 .menu-toggle.toggled-on, 553 .menu-toggle.toggled-on:hover, 554 .menu-toggle.toggled-on:focus, 555 .pagination .prev, 556 .pagination .next, 557 .pagination .prev:hover, 558 .pagination .prev:focus, 559 .pagination .next:hover, 560 .pagination .next:focus, 561 .pagination .nav-links:before, 562 .pagination .nav-links:after, 563 .widget_calendar tbody a, 564 .widget_calendar tbody a:hover, 565 .widget_calendar tbody a:focus, 566 .page-links a, 567 .page-links a:hover, 568 .page-links a:focus { 569 color: {$colors['page_background_color']}; 570 } 571 572 /* Link Color */ 573 .menu-toggle:hover, 574 .menu-toggle:focus, 575 a, 576 .main-navigation a:hover, 577 .main-navigation a:focus, 578 .dropdown-toggle:hover, 579 .dropdown-toggle:focus, 580 .social-navigation a:hover:before, 581 .social-navigation a:focus:before, 582 .post-navigation a:hover .post-title, 583 .post-navigation a:focus .post-title, 584 .tagcloud a:hover, 585 .tagcloud a:focus, 586 .site-branding .site-title a:hover, 587 .site-branding .site-title a:focus, 588 .entry-title a:hover, 589 .entry-title a:focus, 590 .entry-footer a:hover, 591 .entry-footer a:focus, 592 .comment-metadata a:hover, 593 .comment-metadata a:focus, 594 .pingback .comment-edit-link:hover, 595 .pingback .comment-edit-link:focus, 596 .comment-reply-link, 597 .comment-reply-link:hover, 598 .comment-reply-link:focus, 599 .required, 600 .site-info a:hover, 601 .site-info a:focus { 602 color: {$colors['link_color']}; 603 } 604 605 mark, 606 ins, 607 button:hover, 608 button:focus, 609 input[type="button"]:hover, 610 input[type="button"]:focus, 611 input[type="reset"]:hover, 612 input[type="reset"]:focus, 613 input[type="submit"]:hover, 614 input[type="submit"]:focus, 615 .pagination .prev:hover, 616 .pagination .prev:focus, 617 .pagination .next:hover, 618 .pagination .next:focus, 619 .widget_calendar tbody a, 620 .page-links a:hover, 621 .page-links a:focus { 622 background-color: {$colors['link_color']}; 623 } 624 625 input[type="date"]:focus, 626 input[type="time"]:focus, 627 input[type="datetime-local"]:focus, 628 input[type="week"]:focus, 629 input[type="month"]:focus, 630 input[type="text"]:focus, 631 input[type="email"]:focus, 632 input[type="url"]:focus, 633 input[type="password"]:focus, 634 input[type="search"]:focus, 635 input[type="tel"]:focus, 636 input[type="number"]:focus, 637 textarea:focus, 638 .tagcloud a:hover, 639 .tagcloud a:focus, 640 .menu-toggle:hover, 641 .menu-toggle:focus { 642 border-color: {$colors['link_color']}; 643 } 644 645 /* Main Text Color */ 646 body, 647 blockquote cite, 648 blockquote small, 649 .main-navigation a, 650 .menu-toggle, 651 .dropdown-toggle, 652 .social-navigation a, 653 .post-navigation a, 654 .pagination a:hover, 655 .pagination a:focus, 656 .widget-title a, 657 .site-branding .site-title a, 658 .entry-title a, 659 .page-links > .page-links-title, 660 .comment-author, 661 .comment-reply-title small a:hover, 662 .comment-reply-title small a:focus { 663 color: {$colors['main_text_color']}; 664 } 665 666 blockquote, 667 .menu-toggle.toggled-on, 668 .menu-toggle.toggled-on:hover, 669 .menu-toggle.toggled-on:focus, 670 .post-navigation, 671 .post-navigation div + div, 672 .pagination, 673 .widget, 674 .page-header, 675 .page-links a, 676 .comments-title, 677 .comment-reply-title { 678 border-color: {$colors['main_text_color']}; 679 } 680 681 button, 682 button[disabled]:hover, 683 button[disabled]:focus, 684 input[type="button"], 685 input[type="button"][disabled]:hover, 686 input[type="button"][disabled]:focus, 687 input[type="reset"], 688 input[type="reset"][disabled]:hover, 689 input[type="reset"][disabled]:focus, 690 input[type="submit"], 691 input[type="submit"][disabled]:hover, 692 input[type="submit"][disabled]:focus, 693 .menu-toggle.toggled-on, 694 .menu-toggle.toggled-on:hover, 695 .menu-toggle.toggled-on:focus, 696 .pagination:before, 697 .pagination:after, 698 .pagination .prev, 699 .pagination .next, 700 .page-links a { 701 background-color: {$colors['main_text_color']}; 702 } 703 704 /* Secondary Text Color */ 705 706 /** 707 * IE8 and earlier will drop any block with CSS3 selectors. 708 * Do not combine these styles with the next block. 709 */ 710 body:not(.search-results) .entry-summary { 711 color: {$colors['secondary_text_color']}; 712 } 713 714 blockquote, 715 .post-password-form label, 716 a:hover, 717 a:focus, 718 a:active, 719 .post-navigation .meta-nav, 720 .image-navigation, 721 .comment-navigation, 722 .widget_recent_entries .post-date, 723 .widget_rss .rss-date, 724 .widget_rss cite, 725 .site-description, 726 .author-bio, 727 .entry-footer, 728 .entry-footer a, 729 .sticky-post, 730 .taxonomy-description, 731 .entry-caption, 732 .comment-metadata, 733 .pingback .edit-link, 734 .comment-metadata a, 735 .pingback .comment-edit-link, 736 .comment-form label, 737 .comment-notes, 738 .comment-awaiting-moderation, 739 .logged-in-as, 740 .form-allowed-tags, 741 .site-info, 742 .site-info a, 743 .wp-caption .wp-caption-text, 744 .gallery-caption, 745 .widecolumn label, 746 .widecolumn .mu_register label { 747 color: {$colors['secondary_text_color']}; 748 } 749 750 .widget_calendar tbody a:hover, 751 .widget_calendar tbody a:focus { 752 background-color: {$colors['secondary_text_color']}; 753 } 754 755 /* Border Color */ 756 fieldset, 757 pre, 758 abbr, 759 acronym, 760 table, 761 th, 762 td, 763 input[type="date"], 764 input[type="time"], 765 input[type="datetime-local"], 766 input[type="week"], 767 input[type="month"], 768 input[type="text"], 769 input[type="email"], 770 input[type="url"], 771 input[type="password"], 772 input[type="search"], 773 input[type="tel"], 774 input[type="number"], 775 textarea, 776 .main-navigation li, 777 .main-navigation .primary-menu, 778 .menu-toggle, 779 .dropdown-toggle:after, 780 .social-navigation a, 781 .image-navigation, 782 .comment-navigation, 783 .tagcloud a, 784 .entry-content, 785 .entry-summary, 786 .page-links a, 787 .page-links > span, 788 .comment-list article, 789 .comment-list .pingback, 790 .comment-list .trackback, 791 .comment-reply-link, 792 .no-comments, 793 .widecolumn .mu_register .mu_alert { 794 border-color: {$colors['main_text_color']}; /* Fallback for IE7 and IE8 */ 795 border-color: {$colors['border_color']}; 796 } 797 798 hr, 799 code { 800 background-color: {$colors['main_text_color']}; /* Fallback for IE7 and IE8 */ 801 background-color: {$colors['border_color']}; 802 } 803 804 @media screen and (min-width: 56.875em) { 805 .main-navigation li:hover > a, 806 .main-navigation li.focus > a { 807 color: {$colors['link_color']}; 808 } 809 810 .main-navigation ul ul, 811 .main-navigation ul ul li { 812 border-color: {$colors['border_color']}; 813 } 814 815 .main-navigation ul ul:before { 816 border-top-color: {$colors['border_color']}; 817 border-bottom-color: {$colors['border_color']}; 818 } 819 820 .main-navigation ul ul li { 821 background-color: {$colors['page_background_color']}; 822 } 823 824 .main-navigation ul ul:after { 825 border-top-color: {$colors['page_background_color']}; 826 border-bottom-color: {$colors['page_background_color']}; 827 } 828 } 829 830 CSS; 831 } 832 833 834 /** 835 * Outputs an Underscore template for generating CSS for the color scheme. 836 * 837 * The template generates the css dynamically for instant display in the 838 * Customizer preview. 839 * 840 * @since Twenty Sixteen 1.0 841 */ 842 function twentysixteen_color_scheme_css_template() { 843 $colors = array( 844 'background_color' => '{{ data.background_color }}', 845 'page_background_color' => '{{ data.page_background_color }}', 846 'link_color' => '{{ data.link_color }}', 847 'main_text_color' => '{{ data.main_text_color }}', 848 'secondary_text_color' => '{{ data.secondary_text_color }}', 849 'border_color' => '{{ data.border_color }}', 850 ); 851 ?> 852 <script type="text/html" id="tmpl-twentysixteen-color-scheme"> 853 <?php echo twentysixteen_get_color_scheme_css( $colors ); ?> 854 </script> 855 <?php 856 } 857 add_action( 'customize_controls_print_footer_scripts', 'twentysixteen_color_scheme_css_template' ); 858 859 /** 860 * Enqueues front-end CSS for the page background color. 861 * 862 * @since Twenty Sixteen 1.0 863 * 864 * @see wp_add_inline_style() 865 */ 866 function twentysixteen_page_background_color_css() { 867 $color_scheme = twentysixteen_get_color_scheme(); 868 $default_color = $color_scheme[1]; 869 $page_background_color = get_theme_mod( 'page_background_color', $default_color ); 870 871 // Don't do anything if the current color is the default. 872 if ( $page_background_color === $default_color ) { 873 return; 874 } 875 876 $css = ' 877 /* Custom Page Background Color */ 878 .site { 879 background-color: %1$s; 880 } 881 882 mark, 883 ins, 884 button, 885 button[disabled]:hover, 886 button[disabled]:focus, 887 input[type="button"], 888 input[type="button"][disabled]:hover, 889 input[type="button"][disabled]:focus, 890 input[type="reset"], 891 input[type="reset"][disabled]:hover, 892 input[type="reset"][disabled]:focus, 893 input[type="submit"], 894 input[type="submit"][disabled]:hover, 895 input[type="submit"][disabled]:focus, 896 .menu-toggle.toggled-on, 897 .menu-toggle.toggled-on:hover, 898 .menu-toggle.toggled-on:focus, 899 .pagination .prev, 900 .pagination .next, 901 .pagination .prev:hover, 902 .pagination .prev:focus, 903 .pagination .next:hover, 904 .pagination .next:focus, 905 .pagination .nav-links:before, 906 .pagination .nav-links:after, 907 .widget_calendar tbody a, 908 .widget_calendar tbody a:hover, 909 .widget_calendar tbody a:focus, 910 .page-links a, 911 .page-links a:hover, 912 .page-links a:focus { 913 color: %1$s; 914 } 915 916 @media screen and (min-width: 56.875em) { 917 .main-navigation ul ul li { 918 background-color: %1$s; 919 } 920 921 .main-navigation ul ul:after { 922 border-top-color: %1$s; 923 border-bottom-color: %1$s; 924 } 925 } 926 '; 927 928 wp_add_inline_style( 'twentysixteen-style', sprintf( $css, $page_background_color ) ); 929 } 930 add_action( 'wp_enqueue_scripts', 'twentysixteen_page_background_color_css', 11 ); 931 932 /** 933 * Enqueues front-end CSS for the link color. 934 * 935 * @since Twenty Sixteen 1.0 936 * 937 * @see wp_add_inline_style() 938 */ 939 function twentysixteen_link_color_css() { 940 $color_scheme = twentysixteen_get_color_scheme(); 941 $default_color = $color_scheme[2]; 942 $link_color = get_theme_mod( 'link_color', $default_color ); 943 944 // Don't do anything if the current color is the default. 945 if ( $link_color === $default_color ) { 946 return; 947 } 948 949 $css = ' 950 /* Custom Link Color */ 951 .menu-toggle:hover, 952 .menu-toggle:focus, 953 a, 954 .main-navigation a:hover, 955 .main-navigation a:focus, 956 .dropdown-toggle:hover, 957 .dropdown-toggle:focus, 958 .social-navigation a:hover:before, 959 .social-navigation a:focus:before, 960 .post-navigation a:hover .post-title, 961 .post-navigation a:focus .post-title, 962 .tagcloud a:hover, 963 .tagcloud a:focus, 964 .site-branding .site-title a:hover, 965 .site-branding .site-title a:focus, 966 .entry-title a:hover, 967 .entry-title a:focus, 968 .entry-footer a:hover, 969 .entry-footer a:focus, 970 .comment-metadata a:hover, 971 .comment-metadata a:focus, 972 .pingback .comment-edit-link:hover, 973 .pingback .comment-edit-link:focus, 974 .comment-reply-link, 975 .comment-reply-link:hover, 976 .comment-reply-link:focus, 977 .required, 978 .site-info a:hover, 979 .site-info a:focus { 980 color: %1$s; 981 } 982 983 mark, 984 ins, 985 button:hover, 986 button:focus, 987 input[type="button"]:hover, 988 input[type="button"]:focus, 989 input[type="reset"]:hover, 990 input[type="reset"]:focus, 991 input[type="submit"]:hover, 992 input[type="submit"]:focus, 993 .pagination .prev:hover, 994 .pagination .prev:focus, 995 .pagination .next:hover, 996 .pagination .next:focus, 997 .widget_calendar tbody a, 998 .page-links a:hover, 999 .page-links a:focus { 1000 background-color: %1$s; 1001 } 1002 1003 input[type="date"]:focus, 1004 input[type="time"]:focus, 1005 input[type="datetime-local"]:focus, 1006 input[type="week"]:focus, 1007 input[type="month"]:focus, 1008 input[type="text"]:focus, 1009 input[type="email"]:focus, 1010 input[type="url"]:focus, 1011 input[type="password"]:focus, 1012 input[type="search"]:focus, 1013 input[type="tel"]:focus, 1014 input[type="number"]:focus, 1015 textarea:focus, 1016 .tagcloud a:hover, 1017 .tagcloud a:focus, 1018 .menu-toggle:hover, 1019 .menu-toggle:focus { 1020 border-color: %1$s; 1021 } 1022 1023 @media screen and (min-width: 56.875em) { 1024 .main-navigation li:hover > a, 1025 .main-navigation li.focus > a { 1026 color: %1$s; 1027 } 1028 } 1029 '; 1030 1031 wp_add_inline_style( 'twentysixteen-style', sprintf( $css, $link_color ) ); 1032 } 1033 add_action( 'wp_enqueue_scripts', 'twentysixteen_link_color_css', 11 ); 1034 1035 /** 1036 * Enqueues front-end CSS for the main text color. 1037 * 1038 * @since Twenty Sixteen 1.0 1039 * 1040 * @see wp_add_inline_style() 1041 */ 1042 function twentysixteen_main_text_color_css() { 1043 $color_scheme = twentysixteen_get_color_scheme(); 1044 $default_color = $color_scheme[3]; 1045 $main_text_color = get_theme_mod( 'main_text_color', $default_color ); 1046 1047 // Don't do anything if the current color is the default. 1048 if ( $main_text_color === $default_color ) { 1049 return; 1050 } 1051 1052 // Convert main text hex color to rgba. 1053 $main_text_color_rgb = twentysixteen_hex2rgb( $main_text_color ); 1054 1055 // If the rgba values are empty return early. 1056 if ( empty( $main_text_color_rgb ) ) { 1057 return; 1058 } 1059 1060 // If we get this far, we have a custom color scheme. 1061 $border_color = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.2)', $main_text_color_rgb ); 1062 1063 $css = ' 1064 /* Custom Main Text Color */ 1065 body, 1066 blockquote cite, 1067 blockquote small, 1068 .main-navigation a, 1069 .menu-toggle, 1070 .dropdown-toggle, 1071 .social-navigation a, 1072 .post-navigation a, 1073 .pagination a:hover, 1074 .pagination a:focus, 1075 .widget-title a, 1076 .site-branding .site-title a, 1077 .entry-title a, 1078 .page-links > .page-links-title, 1079 .comment-author, 1080 .comment-reply-title small a:hover, 1081 .comment-reply-title small a:focus { 1082 color: %1$s 1083 } 1084 1085 blockquote, 1086 .menu-toggle.toggled-on, 1087 .menu-toggle.toggled-on:hover, 1088 .menu-toggle.toggled-on:focus, 1089 .post-navigation, 1090 .post-navigation div + div, 1091 .pagination, 1092 .widget, 1093 .page-header, 1094 .page-links a, 1095 .comments-title, 1096 .comment-reply-title { 1097 border-color: %1$s; 1098 } 1099 1100 button, 1101 button[disabled]:hover, 1102 button[disabled]:focus, 1103 input[type="button"], 1104 input[type="button"][disabled]:hover, 1105 input[type="button"][disabled]:focus, 1106 input[type="reset"], 1107 input[type="reset"][disabled]:hover, 1108 input[type="reset"][disabled]:focus, 1109 input[type="submit"], 1110 input[type="submit"][disabled]:hover, 1111 input[type="submit"][disabled]:focus, 1112 .menu-toggle.toggled-on, 1113 .menu-toggle.toggled-on:hover, 1114 .menu-toggle.toggled-on:focus, 1115 .pagination:before, 1116 .pagination:after, 1117 .pagination .prev, 1118 .pagination .next, 1119 .page-links a { 1120 background-color: %1$s; 1121 } 1122 1123 /* Border Color */ 1124 fieldset, 1125 pre, 1126 abbr, 1127 acronym, 1128 table, 1129 th, 1130 td, 1131 input[type="date"], 1132 input[type="time"], 1133 input[type="datetime-local"], 1134 input[type="week"], 1135 input[type="month"], 1136 input[type="text"], 1137 input[type="email"], 1138 input[type="url"], 1139 input[type="password"], 1140 input[type="search"], 1141 input[type="tel"], 1142 input[type="number"], 1143 textarea, 1144 .main-navigation li, 1145 .main-navigation .primary-menu, 1146 .menu-toggle, 1147 .dropdown-toggle:after, 1148 .social-navigation a, 1149 .image-navigation, 1150 .comment-navigation, 1151 .tagcloud a, 1152 .entry-content, 1153 .entry-summary, 1154 .page-links a, 1155 .page-links > span, 1156 .comment-list article, 1157 .comment-list .pingback, 1158 .comment-list .trackback, 1159 .comment-reply-link, 1160 .no-comments, 1161 .widecolumn .mu_register .mu_alert { 1162 border-color: %1$s; /* Fallback for IE7 and IE8 */ 1163 border-color: %2$s; 1164 } 1165 1166 hr, 1167 code { 1168 background-color: %1$s; /* Fallback for IE7 and IE8 */ 1169 background-color: %2$s; 1170 } 1171 1172 @media screen and (min-width: 56.875em) { 1173 .main-navigation ul ul, 1174 .main-navigation ul ul li { 1175 border-color: %2$s; 1176 } 1177 1178 .main-navigation ul ul:before { 1179 border-top-color: %2$s; 1180 border-bottom-color: %2$s; 1181 } 1182 } 1183 '; 1184 1185 wp_add_inline_style( 'twentysixteen-style', sprintf( $css, $main_text_color, $border_color ) ); 1186 } 1187 add_action( 'wp_enqueue_scripts', 'twentysixteen_main_text_color_css', 11 ); 1188 1189 /** 1190 * Enqueues front-end CSS for the secondary text color. 1191 * 1192 * @since Twenty Sixteen 1.0 1193 * 1194 * @see wp_add_inline_style() 1195 */ 1196 function twentysixteen_secondary_text_color_css() { 1197 $color_scheme = twentysixteen_get_color_scheme(); 1198 $default_color = $color_scheme[4]; 1199 $secondary_text_color = get_theme_mod( 'secondary_text_color', $default_color ); 1200 1201 // Don't do anything if the current color is the default. 1202 if ( $secondary_text_color === $default_color ) { 1203 return; 1204 } 1205 1206 $css = ' 1207 /* Custom Secondary Text Color */ 1208 1209 /** 1210 * IE8 and earlier will drop any block with CSS3 selectors. 1211 * Do not combine these styles with the next block. 1212 */ 1213 body:not(.search-results) .entry-summary { 1214 color: %1$s; 1215 } 1216 1217 blockquote, 1218 .post-password-form label, 1219 a:hover, 1220 a:focus, 1221 a:active, 1222 .post-navigation .meta-nav, 1223 .image-navigation, 1224 .comment-navigation, 1225 .widget_recent_entries .post-date, 1226 .widget_rss .rss-date, 1227 .widget_rss cite, 1228 .site-description, 1229 .author-bio, 1230 .entry-footer, 1231 .entry-footer a, 1232 .sticky-post, 1233 .taxonomy-description, 1234 .entry-caption, 1235 .comment-metadata, 1236 .pingback .edit-link, 1237 .comment-metadata a, 1238 .pingback .comment-edit-link, 1239 .comment-form label, 1240 .comment-notes, 1241 .comment-awaiting-moderation, 1242 .logged-in-as, 1243 .form-allowed-tags, 1244 .site-info, 1245 .site-info a, 1246 .wp-caption .wp-caption-text, 1247 .gallery-caption, 1248 .widecolumn label, 1249 .widecolumn .mu_register label { 1250 color: %1$s; 1251 } 1252 1253 .widget_calendar tbody a:hover, 1254 .widget_calendar tbody a:focus { 1255 background-color: %1$s; 1256 } 1257 '; 1258 1259 wp_add_inline_style( 'twentysixteen-style', sprintf( $css, $secondary_text_color ) ); 1260 } 1261 add_action( 'wp_enqueue_scripts', 'twentysixteen_secondary_text_color_css', 11 );
title
Description
Body
title
Description
Body
title
Description
Body
title
Body
Generated: Fri Oct 4 01:00:02 2024 | Cross-referenced by PHPXref 0.7.1 |