Changeset 30274
- Timestamp:
- 11/07/2014 08:54:48 PM (10 years ago)
- Location:
- trunk/src/wp-content/themes/twentyfifteen
- Files:
-
- 3 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/src/wp-content/themes/twentyfifteen/css/admin-custom-header.css
r30230 r30274 36 36 37 37 /* Hide the header text color option */ 38 .appearance_page_custom-header tr.displaying-header-text { 38 .appearance_page_custom-header tr.displaying-header-text, 39 .appearance_page_custom-header tr.displaying-header-text td, 40 .appearance_page_custom-header tr.displaying-header-text th { 39 41 display: none; 40 42 } -
trunk/src/wp-content/themes/twentyfifteen/inc/customizer.php
r30272 r30274 20 20 $wp_customize->get_setting( 'blogname' )->transport = 'postMessage'; 21 21 $wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage'; 22 $wp_customize->get_setting( 'background_color' )->transport = 'refresh';23 22 24 23 // Add color scheme setting and control. … … 26 25 'default' => 'default', 27 26 'sanitize_callback' => 'twentyfifteen_sanitize_color_scheme', 27 'transport' => 'postMessage', 28 ) ); 29 30 $wp_customize->add_setting( 'color_scheme_css', array( 31 'default' => '', 32 'sanitize_callback' => 'esc_html', 33 'transport' => 'postMessage', 28 34 ) ); 29 35 … … 40 46 'default' => $color_scheme[4], 41 47 'sanitize_callback' => 'sanitize_hex_color', 48 'transport' => 'postMessage', 42 49 ) ); 43 50 … … 55 62 'default' => $color_scheme[1], 56 63 'sanitize_callback' => 'sanitize_hex_color', 64 'transport' => 'postMessage', 57 65 ) ); 58 66 … … 223 231 function twentyfifteen_color_scheme_css() { 224 232 $color_scheme_option = get_theme_mod( 'color_scheme', 'default' ); 233 $color_scheme_css = get_theme_mod( 'color_scheme_css', '' ); 225 234 226 235 // Don't do anything if the default color scheme is selected. 227 if ( 'default' === $color_scheme_option ) {236 if ( 'default' === $color_scheme_option || empty( $color_scheme_css ) ) { 228 237 return; 229 238 } 230 239 231 // If we get this far, we have custom styles. Let's do this. 232 $color_scheme = twentyfifteen_get_color_scheme(); 233 234 // Convert main and sidebar text hex color to rgba. 235 $color_main_text_rgb = twentyfifteen_hex2rgb( $color_scheme[3] ); 236 $color_sidebar_link_rgb = twentyfifteen_hex2rgb( $color_scheme[4] ); 237 238 $color_background = $color_scheme[0]; 239 $color_sidebar_background = $color_scheme[1]; 240 $color_box_background = $color_scheme[2]; 241 $color_main_text = $color_scheme[3]; 242 $color_secondary_text = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.7)', $color_main_text_rgb ); 243 $color_border = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.1)', $color_main_text_rgb ); 244 $color_border_focus = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.3)', $color_main_text_rgb ); 245 $color_sidebar_link = $color_scheme[4]; 246 $color_sidebar_text = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.7)', $color_sidebar_link_rgb ); 247 $color_sidebar_border = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.1)', $color_sidebar_link_rgb ); 248 $color_sidebar_border_focus = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.3)', $color_sidebar_link_rgb ); 249 $color_meta_box = $color_scheme[5]; 250 251 $css = ' 252 /* Color Scheme */ 253 254 /* Background Color */ 255 body { 256 background-color: %1$s; 240 wp_add_inline_style( 'twentyfifteen-style', $color_scheme_css ); 241 } 242 add_action( 'wp_enqueue_scripts', 'twentyfifteen_color_scheme_css' ); 243 244 /** 245 * Binds JS listener to make Customizer color_scheme control. 246 * Passes color scheme data as colorScheme global. 247 * 248 * @since Twenty Fifteen 1.0 249 */ 250 function twentyfifteen_customize_control_js() { 251 wp_enqueue_script( 'color-scheme-control', get_template_directory_uri() . '/js/color-scheme-control.js', array( 'customize-controls', 'iris', 'underscore', 'wp-util' ), '', true ); 252 wp_localize_script( 'color-scheme-control', 'colorScheme', twentyfifteen_get_color_schemes() ); 253 } 254 add_action( 'customize_controls_enqueue_scripts', 'twentyfifteen_customize_control_js' ); 255 256 /** 257 * Binds JS handlers to make Customizer preview reload changes asynchronously. 258 * 259 * @since Twenty Fifteen 1.0 260 */ 261 function twentyfifteen_customize_preview_js() { 262 wp_enqueue_script( 'twentyfifteen-customize-preview', get_template_directory_uri() . '/js/customize-preview.js', array( 'customize-preview' ), '20141029', true ); 263 } 264 add_action( 'customize_preview_init', 'twentyfifteen_customize_preview_js' ); 265 266 /** 267 * Output an Underscore template for generating CSS for the color scheme. 268 * 269 * @since Twenty Fifteen 1.0 270 */ 271 function twentyfifteen_color_scheme_css_template() { 272 ?> 273 <script type="text/html" id="tmpl-twentyfifteen-color-scheme"> 274 /* Color Scheme */ 275 276 /* Background Color */ 277 body { 278 background-color: {{ data.background_color }}; 279 } 280 281 /* Sidebar Background Color */ 282 body:before, 283 .site-header { 284 background-color: {{ data.header_background_color }}; 285 } 286 287 /* Box Background Color */ 288 .post-navigation, 289 .pagination, 290 .secondary, 291 .site-footer, 292 .hentry, 293 .page-header, 294 .page-content, 295 .comments-area { 296 background-color: {{ data.box_background_color }}; 297 } 298 299 /* Box Background Color */ 300 button, 301 input[type="button"], 302 input[type="reset"], 303 input[type="submit"], 304 .pagination .prev, 305 .pagination .next, 306 .pagination .prev:before, 307 .pagination .next:before, 308 .widget_calendar tbody a, 309 .widget_calendar tbody a:hover, 310 .widget_calendar tbody a:focus, 311 .entry-content .page-links a, 312 .entry-content .page-links a:hover, 313 .entry-content .page-links a:focus, 314 .sticky-post { 315 color: {{ data.box_background_color }}; 316 } 317 318 /* Main Text Color */ 319 button, 320 input[type="button"], 321 input[type="reset"], 322 input[type="submit"], 323 .pagination .prev, 324 .pagination .next, 325 .widget_calendar tbody a, 326 .page-links a, 327 .sticky-post { 328 background-color: {{ data.textcolor }}; 329 } 330 331 /* Main Text Color */ 332 body, 333 blockquote cite, 334 blockquote small, 335 a, 336 .dropdown-toggle:after, 337 .image-navigation a:hover, 338 .image-navigation a:focus, 339 .comment-navigation a:hover, 340 .comment-navigation a:focus, 341 .widget-title, 342 .entry-footer a:hover, 343 .entry-footer a:focus, 344 .comment-metadata a:hover, 345 .comment-metadata a:focus, 346 .pingback .edit-link a:hover, 347 .pingback .edit-link a:focus, 348 .comment-list .reply a:hover, 349 .comment-list .reply a:focus, 350 .site-info a:hover, 351 .site-info a:focus { 352 color: {{ data.textcolor }}; 353 } 354 355 /* Main Text Color */ 356 .entry-content a, 357 .entry-summary a, 358 .page-content a, 359 .comment-content a, 360 .pingback .comment-body > a, 361 .author-description a, 362 .taxonomy-description a, 363 .textwidget a, 364 .entry-footer a:hover, 365 .comment-metadata a:hover, 366 .pingback .edit-link a:hover, 367 .comment-list .reply a:hover, 368 .site-info a:hover { 369 border-color: {{ data.textcolor }}; 370 } 371 372 /* Secondary Text Color */ 373 button:hover, 374 button:focus, 375 input[type="button"]:hover, 376 input[type="button"]:focus, 377 input[type="reset"]:hover, 378 input[type="reset"]:focus, 379 input[type="submit"]:hover, 380 input[type="submit"]:focus, 381 .pagination .prev:hover, 382 .pagination .prev:focus, 383 .pagination .next:hover, 384 .pagination .next:focus, 385 .widget_calendar tbody a:hover, 386 .widget_calendar tbody a:focus, 387 .page-links a:hover, 388 .page-links a:focus { 389 background-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */ 390 background-color: {{ data.secondary_textcolor }}; 391 } 392 393 /* Secondary Text Color */ 394 blockquote, 395 a:hover, 396 a:focus, 397 .main-navigation .menu-item-description, 398 .post-navigation .meta-nav, 399 .post-navigation a:hover .post-title, 400 .post-navigation a:focus .post-title, 401 .image-navigation, 402 .image-navigation a, 403 .comment-navigation, 404 .comment-navigation a, 405 .widget, 406 .author-heading, 407 .entry-footer, 408 .entry-footer a, 409 .taxonomy-description, 410 .page-links > .page-links-title, 411 .entry-caption, 412 .comment-author, 413 .comment-metadata, 414 .comment-metadata a, 415 .pingback .edit-link, 416 .pingback .edit-link a, 417 .post-password-form label, 418 .comment-form label, 419 .comment-notes, 420 .comment-awaiting-moderation, 421 .logged-in-as, 422 .form-allowed-tags, 423 .no-comments, 424 .site-info, 425 .site-info a, 426 .wp-caption-text, 427 .gallery-caption, 428 .comment-list .reply a { 429 color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */ 430 color: {{ data.secondary_textcolor }}; 431 } 432 433 /* Secondary Text Color */ 434 blockquote, 435 .logged-in-as a:hover, 436 .comment-author a:hover { 437 border-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */ 438 border-color: {{ data.secondary_textcolor }}; 439 } 440 441 /* Border Color */ 442 hr, 443 .dropdown-toggle:hover, 444 .dropdown-toggle:focus { 445 background-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */ 446 background-color: {{ data.border_color }}; 447 } 448 449 /* Border Color */ 450 pre, 451 abbr[title], 452 table, 453 th, 454 td, 455 input, 456 textarea, 457 .main-navigation ul, 458 .main-navigation li, 459 .post-navigation, 460 .pagination, 461 .comment-navigation, 462 .widget li, 463 .widget_categories .children, 464 .widget_nav_menu .sub-menu, 465 .widget_pages .children, 466 .site-header, 467 .site-footer, 468 .hentry .hentry, 469 .author-info, 470 .entry-content .page-links a, 471 .page-links > span, 472 .page-header, 473 .comments-area, 474 .comment-list .comment-respond, 475 .comment-list article, 476 .comment-list .pingback, 477 .comment-list .trackback, 478 .comment-list .reply a, 479 .no-comments { 480 border-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */ 481 border-color: {{ data.border_color }}; 482 } 483 484 .post-navigation .nav-previous:not(.has-post-thumbnail) .nav-next:not(.has-post-thumbnail) { 485 border-color: {{ data.border_color }}; 486 } 487 488 /* Border Focus Color */ 489 a:focus, 490 button:focus, 491 input:focus { 492 outline-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */ 493 outline-color: {{ data.border_focus_color }}; 494 } 495 496 input:focus, 497 textarea:focus { 498 border-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */ 499 border-color: {{ data.border_focus_color }}; 500 } 501 502 /* Sidebar Link Color */ 503 .secondary-toggle:before { 504 color: {{ data.sidebar_textcolor }}; 505 } 506 507 .site-title a, 508 .site-description { 509 color: {{ data.sidebar_textcolor }}; 510 } 511 512 /* Sidebar Text Color */ 513 .site-title a:hover, 514 .site-title a:focus { 515 color: {{ data.sidebar_textcolor2 }}; 516 } 517 518 /* Sidebar Border Color */ 519 .secondary-toggle { 520 border-color: {{ data.sidebar_textcolor }}; /* Fallback for IE7 and IE8 */ 521 border-color: {{ data.sidebar_border_color }}; 522 } 523 524 /* Sidebar Border Focus Color */ 525 .secondary-toggle:hover, 526 .secondary-toggle:focus { 527 border-color: {{ data.sidebar_textcolor }}; /* Fallback for IE7 and IE8 */ 528 border-color: {{ data.sidebar_border_focus_color }}; 529 } 530 531 .site-title a { 532 outline-color: {{ data.sidebar_textcolor }}; /* Fallback for IE7 and IE8 */ 533 outline-color: {{ data.sidebar_border_focus_color }}; 534 } 535 536 /* Meta Background Color */ 537 .entry-footer { 538 background-color: {{ data.meta_box_background_color }}; 539 } 540 541 @media screen and (min-width: 38.75em) { 542 /* Main Text Color */ 543 .page-header { 544 border-color: {{ data.textcolor }}; 545 } 546 } 547 548 @media screen and (min-width: 59.6875em) { 549 /* Make sure its transparent on desktop */ 550 .site-header, 551 .secondary { 552 background-color: transparent; 257 553 } 258 554 259 555 /* Sidebar Background Color */ 260 body:before, 261 .site-header { 262 background-color: %2$s; 263 } 264 265 /* Box Background Color */ 266 .post-navigation, 267 .pagination, 268 .secondary, 269 .site-footer, 270 .hentry, 271 .page-header, 272 .page-content, 273 .comments-area { 274 background-color: %3$s; 275 } 276 277 /* Box Background Color */ 278 button, 279 input[type="button"], 280 input[type="reset"], 281 input[type="submit"], 282 .pagination .prev, 283 .pagination .next, 284 .pagination .prev:before, 285 .pagination .next:before, 556 .widget button, 557 .widget input[type="button"], 558 .widget input[type="reset"], 559 .widget input[type="submit"], 286 560 .widget_calendar tbody a, 287 561 .widget_calendar tbody a:hover, 288 .widget_calendar tbody a:focus, 289 .entry-content .page-links a, 290 .entry-content .page-links a:hover, 291 .entry-content .page-links a:focus, 292 .sticky-post { 293 color: %3$s; 294 } 295 296 /* Main Text Color */ 297 button, 298 input[type="button"], 299 input[type="reset"], 300 input[type="submit"], 301 .pagination .prev, 302 .pagination .next, 303 .widget_calendar tbody a, 304 .page-links a, 305 .sticky-post { 306 background-color: %4$s; 307 } 308 309 /* Main Text Color */ 310 body, 311 blockquote cite, 312 blockquote small, 313 a, 562 .widget_calendar tbody a:focus { 563 color: {{ data.header_background_color }}; 564 } 565 566 /* Sidebar Link Color */ 567 .secondary a, 314 568 .dropdown-toggle:after, 315 .image-navigation a:hover,316 .image-navigation a:focus,317 .comment-navigation a:hover,318 .comment-navigation a:focus,319 569 .widget-title, 320 .entry-footer a:hover, 321 .entry-footer a:focus, 322 .comment-metadata a:hover, 323 .comment-metadata a:focus, 324 .pingback .edit-link a:hover, 325 .pingback .edit-link a:focus, 326 .comment-list .reply a:hover, 327 .comment-list .reply a:focus, 328 .site-info a:hover, 329 .site-info a:focus { 330 color: %4$s; 331 } 332 333 /* Main Text Color */ 334 .entry-content a, 335 .entry-summary a, 336 .page-content a, 337 .comment-content a, 338 .pingback .comment-body > a, 339 .author-description a, 340 .taxonomy-description a, 341 .textwidget a, 342 .entry-footer a:hover, 343 .comment-metadata a:hover, 344 .pingback .edit-link a:hover, 345 .comment-list .reply a:hover, 346 .site-info a:hover { 347 border-color: %4$s; 348 } 349 350 /* Secondary Text Color */ 351 button:hover, 352 button:focus, 353 input[type="button"]:hover, 354 input[type="button"]:focus, 355 input[type="reset"]:hover, 356 input[type="reset"]:focus, 357 input[type="submit"]:hover, 358 input[type="submit"]:focus, 359 .pagination .prev:hover, 360 .pagination .prev:focus, 361 .pagination .next:hover, 362 .pagination .next:focus, 570 .widget blockquote cite, 571 .widget blockquote small { 572 color: {{ data.sidebar_textcolor }}; 573 } 574 575 .widget button, 576 .widget input[type="button"], 577 .widget input[type="reset"], 578 .widget input[type="submit"], 579 .widget_calendar tbody a { 580 background-color: {{ data.sidebar_textcolor }}; 581 } 582 583 .textwidget a { 584 border-color: {{ data.sidebar_textcolor }}; 585 } 586 587 /* Sidebar Text Color */ 588 .secondary a:hover, 589 .secondary a:focus, 590 .main-navigation .menu-item-description, 591 .widget, 592 .widget blockquote, 593 .widget .wp-caption-text, 594 .widget .gallery-caption { 595 color: {{ data.sidebar_textcolor2 }}; 596 } 597 598 .widget button:hover, 599 .widget button:focus, 600 .widget input[type="button"]:hover, 601 .widget input[type="button"]:focus, 602 .widget input[type="reset"]:hover, 603 .widget input[type="reset"]:focus, 604 .widget input[type="submit"]:hover, 605 .widget input[type="submit"]:focus, 363 606 .widget_calendar tbody a:hover, 364 .widget_calendar tbody a:focus, 365 .page-links a:hover, 366 .page-links a:focus { 367 background-color: %4$s; /* Fallback for IE7 and IE8 */ 368 background-color: %5$s; 369 } 370 371 /* Secondary Text Color */ 372 blockquote, 373 a:hover, 374 a:focus, 375 .main-navigation .menu-item-description, 376 .post-navigation .meta-nav, 377 .post-navigation a:hover .post-title, 378 .post-navigation a:focus .post-title, 379 .image-navigation, 380 .image-navigation a, 381 .comment-navigation, 382 .comment-navigation a, 383 .widget, 384 .author-heading, 385 .entry-footer, 386 .entry-footer a, 387 .taxonomy-description, 388 .page-links > .page-links-title, 389 .entry-caption, 390 .comment-author, 391 .comment-metadata, 392 .comment-metadata a, 393 .pingback .edit-link, 394 .pingback .edit-link a, 395 .post-password-form label, 396 .comment-form label, 397 .comment-notes, 398 .comment-awaiting-moderation, 399 .logged-in-as, 400 .form-allowed-tags, 401 .no-comments, 402 .site-info, 403 .site-info a, 404 .wp-caption-text, 405 .gallery-caption, 406 .comment-list .reply a { 407 color: %4$s; /* Fallback for IE7 and IE8 */ 408 color: %5$s; 409 } 410 411 /* Secondary Text Color */ 412 blockquote, 413 .logged-in-as a:hover, 414 .comment-author a:hover { 415 border-color: %4$s; /* Fallback for IE7 and IE8 */ 416 border-color: %5$s; 417 } 418 419 /* Border Color */ 420 hr, 421 .dropdown-toggle:hover, 422 .dropdown-toggle:focus { 423 background-color: %4$s; /* Fallback for IE7 and IE8 */ 424 background-color: %6$s; 425 } 426 427 /* Border Color */ 428 pre, 429 abbr[title], 430 table, 431 th, 432 td, 433 input, 434 textarea, 607 .widget_calendar tbody a:focus { 608 background-color: {{ data.sidebar_textcolor2 }}; 609 } 610 611 .widget blockquote { 612 border-color: {{ data.sidebar_textcolor2 }}; 613 } 614 615 /* Sidebar Border Color */ 435 616 .main-navigation ul, 436 617 .main-navigation li, 437 .post-navigation, 438 .pagination, 439 .comment-navigation, 618 .widget input, 619 .widget textarea, 620 .widget table, 621 .widget th, 622 .widget td, 623 .widget pre, 440 624 .widget li, 441 625 .widget_categories .children, 442 626 .widget_nav_menu .sub-menu, 443 627 .widget_pages .children, 444 .site-header, 445 .site-footer, 446 .hentry + .hentry, 447 .author-info, 448 .entry-content .page-links a, 449 .page-links > span, 450 .page-header, 451 .comments-area, 452 .comment-list + .comment-respond, 453 .comment-list article, 454 .comment-list .pingback, 455 .comment-list .trackback, 456 .comment-list .reply a, 457 .no-comments { 458 border-color: %4$s; /* Fallback for IE7 and IE8 */ 459 border-color: %6$s; 460 } 461 462 .post-navigation .nav-previous:not(.has-post-thumbnail) + .nav-next:not(.has-post-thumbnail) { 463 border-color: %6$s; 464 } 465 466 /* Border Focus Color */ 467 a:focus, 468 button:focus, 469 input:focus { 470 outline-color: %4$s; /* Fallback for IE7 and IE8 */ 471 outline-color: %7$s; 472 } 473 474 input:focus, 475 textarea:focus { 476 border-color: %4$s; /* Fallback for IE7 and IE8 */ 477 border-color: %7$s; 478 } 479 480 /* Sidebar Link Color */ 481 .secondary-toggle:before { 482 color: %8$s; 483 } 484 485 .site-title a, 486 .site-description { 487 color: %8$s; 488 } 489 490 /* Sidebar Text Color */ 491 .site-title a:hover, 492 .site-title a:focus { 493 color: %9$s; 494 } 495 496 /* Sidebar Border Color */ 497 .secondary-toggle { 498 border-color: %8$s; /* Fallback for IE7 and IE8 */ 499 border-color: %10$s; 500 } 501 502 /* Sidebar Border Focus Color */ 503 .secondary-toggle:hover, 504 .secondary-toggle:focus { 505 border-color: %8$s; /* Fallback for IE7 and IE8 */ 506 border-color: %11$s; 507 } 508 509 .site-title a { 510 outline-color: %8$s; /* Fallback for IE7 and IE8 */ 511 outline-color: %11$s; 512 } 513 514 /* Meta Background Color */ 515 .entry-footer { 516 background-color: %12$s; 517 } 518 519 @media screen and (min-width: 38.75em) { 520 /* Main Text Color */ 521 .page-header { 522 border-color: %4$s; 523 } 524 } 525 526 @media screen and (min-width: 59.6875em) { 527 /* Make sure its transparent on desktop */ 528 .site-header, 529 .secondary { 530 background-color: transparent; 531 } 532 533 /* Sidebar Background Color */ 534 .widget button, 535 .widget input[type="button"], 536 .widget input[type="reset"], 537 .widget input[type="submit"], 538 .widget_calendar tbody a, 539 .widget_calendar tbody a:hover, 540 .widget_calendar tbody a:focus { 541 color: %2$s; 542 } 543 544 /* Sidebar Link Color */ 545 .secondary a, 546 .dropdown-toggle:after, 547 .widget-title, 548 .widget blockquote cite, 549 .widget blockquote small { 550 color: %8$s; 551 } 552 553 .widget button, 554 .widget input[type="button"], 555 .widget input[type="reset"], 556 .widget input[type="submit"], 557 .widget_calendar tbody a { 558 background-color: %8$s; 559 } 560 561 .textwidget a { 562 border-color: %8$s; 563 } 564 565 /* Sidebar Text Color */ 566 .secondary a:hover, 567 .secondary a:focus, 568 .main-navigation .menu-item-description, 569 .widget, 570 .widget blockquote, 571 .widget .wp-caption-text, 572 .widget .gallery-caption { 573 color: %9$s; 574 } 575 576 .widget button:hover, 577 .widget button:focus, 578 .widget input[type="button"]:hover, 579 .widget input[type="button"]:focus, 580 .widget input[type="reset"]:hover, 581 .widget input[type="reset"]:focus, 582 .widget input[type="submit"]:hover, 583 .widget input[type="submit"]:focus, 584 .widget_calendar tbody a:hover, 585 .widget_calendar tbody a:focus { 586 background-color: %9$s; 587 } 588 589 .widget blockquote { 590 border-color: %9$s; 591 } 592 593 /* Sidebar Border Color */ 594 .main-navigation ul, 595 .main-navigation li, 596 .widget input, 597 .widget textarea, 598 .widget table, 599 .widget th, 600 .widget td, 601 .widget pre, 602 .widget li, 603 .widget_categories .children, 604 .widget_nav_menu .sub-menu, 605 .widget_pages .children, 606 .widget abbr[title] { 607 border-color: %10$s; 608 } 609 610 .dropdown-toggle:hover, 611 .dropdown-toggle:focus, 612 .widget hr { 613 background-color: %10$s; 614 } 615 616 .widget input:focus, 617 .widget textarea:focus { 618 border-color: %11$s; 619 } 620 621 .sidebar a:focus, 622 .dropdown-toggle:focus { 623 outline-color: %11$s; 624 } 625 } 626 '; 627 628 wp_add_inline_style( 'twentyfifteen-style', sprintf( $css, 629 $color_background, 630 $color_sidebar_background, 631 $color_box_background, 632 $color_main_text, 633 $color_secondary_text, 634 $color_border, 635 $color_border_focus, 636 $color_sidebar_link, 637 $color_sidebar_text, 638 $color_sidebar_border, 639 $color_sidebar_border_focus, 640 $color_meta_box 641 ) ); 642 } 643 add_action( 'wp_enqueue_scripts', 'twentyfifteen_color_scheme_css' ); 644 645 /** 646 * Binds JS listener to make Customizer color_scheme control. 647 * Passes color scheme data as colorScheme global. 648 * 649 * @since Twenty Fifteen 1.0 650 */ 651 function twentyfifteen_customize_control_js() { 652 wp_enqueue_script( 'color-scheme-control', get_template_directory_uri() . '/js/color-scheme-control.js', array( 'customize-controls' ), '', true ); 653 wp_localize_script( 'color-scheme-control', 'colorScheme', twentyfifteen_get_color_schemes() ); 654 } 655 add_action( 'customize_controls_enqueue_scripts', 'twentyfifteen_customize_control_js' ); 656 657 /** 658 * Binds JS handlers to make Customizer preview reload changes asynchronously. 659 * 660 * @since Twenty Fifteen 1.0 661 */ 662 function twentyfifteen_customize_preview_js() { 663 wp_enqueue_script( 'twentyfifteen-customize-preview', get_template_directory_uri() . '/js/customize-preview.js', array( 'customize-preview' ), '20141029', true ); 664 } 665 add_action( 'customize_preview_init', 'twentyfifteen_customize_preview_js' ); 628 .widget abbr[title] { 629 border-color: {{ data.sidebar_border_color }}; 630 } 631 632 .dropdown-toggle:hover, 633 .dropdown-toggle:focus, 634 .widget hr { 635 background-color: {{ data.sidebar_border_color }}; 636 } 637 638 .widget input:focus, 639 .widget textarea:focus { 640 border-color: {{ data.sidebar_border_focus_color }}; 641 } 642 643 .sidebar a:focus, 644 .dropdown-toggle:focus { 645 outline-color: {{ data.sidebar_border_focus_color }}; 646 } 647 } 648 </script> 649 <?php 650 } 651 add_action( 'customize_controls_print_footer_scripts', 'twentyfifteen_color_scheme_css_template' ); -
trunk/src/wp-content/themes/twentyfifteen/js/color-scheme-control.js
r30271 r30274 5 5 6 6 ( function( api ) { 7 var cssTemplate = wp.template( 'twentyfifteen-color-scheme' ), 8 colorSchemeKeys = [ 9 'background_color', 10 'header_background_color', 11 'box_background_color', 12 'textcolor', 13 'sidebar_textcolor', 14 'meta_box_background_color' 15 ], 16 colorSettings = [ 17 'background_color', 18 'header_background_color', 19 'sidebar_textcolor' 20 ]; 21 7 22 api.controlConstructor.select = api.Control.extend( { 8 23 ready: function() { … … 30 45 } 31 46 } ); 47 48 function getCSS() { 49 var scheme = api( 'color_scheme' )(), 50 colors = _.object( colorSchemeKeys, colorScheme[ scheme ].colors ); 51 52 // Merge in color scheme overrides. 53 _.each( colorSettings, function( setting ) { 54 colors[ setting ] = api( setting )(); 55 }); 56 57 // Add additional colors. 58 colors['secondary_textcolor'] = Color( colors.textcolor ).toCSS( 'rgba', 0.7 ); 59 colors['border_color'] = Color( colors.textcolor ).toCSS( 'rgba', 0.1 ); 60 colors['border_focus_color'] = Color( colors.textcolor ).toCSS( 'rgba', 0.3 ); 61 colors['sidebar_textcolor2'] = Color( colors.sidebar_textcolor ).toCSS( 'rgba', 0.7 ); 62 colors['sidebar_border_color'] = Color( colors.sidebar_textcolor ).toCSS( 'rgba', 0.1 ); 63 colors['sidebar_border_focus_color'] = Color( colors.sidebar_textcolor ).toCSS( 'rgba', 0.3 ); 64 65 return cssTemplate( colors ); 66 } 67 68 // Update the CSS whenever a color setting is changed. 69 _.each( colorSettings, function( setting ) { 70 api( setting, function( setting ) { 71 setting.bind( _.throttle( function( value ) { 72 api( 'color_scheme_css' ).set( getCSS() ); 73 }, 250 ) ); 74 } ); 75 } ); 32 76 } )( wp.customize );
Note: See TracChangeset
for help on using the changeset viewer.