<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[30274] trunk/src/wp-content/themes/twentyfifteen: Twenty Fifteen: add instant updating of color schemes to the customizer with postMessage.</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/30274">30274</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/30274","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>iandstewart</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2014-11-07 20:54:48 +0000 (Fri, 07 Nov 2014)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>Twenty Fifteen: add instant updating of color schemes to the customizer with postMessage.
Props celloexpressions, bradyvercher, westonruter, fixes <a href="https://core.trac.wordpress.org/ticket/29988">#29988</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpcontentthemestwentyfifteencssadmincustomheadercss">trunk/src/wp-content/themes/twentyfifteen/css/admin-custom-header.css</a></li>
<li><a href="#trunksrcwpcontentthemestwentyfifteeninccustomizerphp">trunk/src/wp-content/themes/twentyfifteen/inc/customizer.php</a></li>
<li><a href="#trunksrcwpcontentthemestwentyfifteenjscolorschemecontroljs">trunk/src/wp-content/themes/twentyfifteen/js/color-scheme-control.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpcontentthemestwentyfifteencssadmincustomheadercss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentyfifteen/css/admin-custom-header.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentyfifteen/css/admin-custom-header.css 2014-11-07 17:37:36 UTC (rev 30273)
+++ trunk/src/wp-content/themes/twentyfifteen/css/admin-custom-header.css 2014-11-07 20:54:48 UTC (rev 30274)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -35,7 +35,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /* Hide the header text color option */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.appearance_page_custom-header tr.displaying-header-text {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.appearance_page_custom-header tr.displaying-header-text,
+.appearance_page_custom-header tr.displaying-header-text td,
+.appearance_page_custom-header tr.displaying-header-text th {
</ins><span class="cx" style="display: block; padding: 0 10px"> display: none;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span></span></pre></div>
<a id="trunksrcwpcontentthemestwentyfifteeninccustomizerphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentyfifteen/inc/customizer.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentyfifteen/inc/customizer.php 2014-11-07 17:37:36 UTC (rev 30273)
+++ trunk/src/wp-content/themes/twentyfifteen/inc/customizer.php 2014-11-07 20:54:48 UTC (rev 30274)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -19,14 +19,20 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $wp_customize->get_setting( 'blogname' )->transport = 'postMessage';
</span><span class="cx" style="display: block; padding: 0 10px"> $wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage';
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $wp_customize->get_setting( 'background_color' )->transport = 'refresh';
</del><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Add color scheme setting and control.
</span><span class="cx" style="display: block; padding: 0 10px"> $wp_customize->add_setting( 'color_scheme', array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'default' => 'default',
</span><span class="cx" style="display: block; padding: 0 10px"> 'sanitize_callback' => 'twentyfifteen_sanitize_color_scheme',
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'transport' => 'postMessage',
</ins><span class="cx" style="display: block; padding: 0 10px"> ) );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $wp_customize->add_setting( 'color_scheme_css', array(
+ 'default' => '',
+ 'sanitize_callback' => 'esc_html',
+ 'transport' => 'postMessage',
+ ) );
+
</ins><span class="cx" style="display: block; padding: 0 10px"> $wp_customize->add_control( 'color_scheme', array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'label' => esc_html__( 'Color Scheme', 'twentyfifteen' ),
</span><span class="cx" style="display: block; padding: 0 10px"> 'section' => 'colors',
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -39,6 +45,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $wp_customize->add_setting( 'sidebar_textcolor', array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'default' => $color_scheme[4],
</span><span class="cx" style="display: block; padding: 0 10px"> 'sanitize_callback' => 'sanitize_hex_color',
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'transport' => 'postMessage',
</ins><span class="cx" style="display: block; padding: 0 10px"> ) );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'sidebar_textcolor', array(
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -54,6 +61,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $wp_customize->add_setting( 'header_background_color', array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'default' => $color_scheme[1],
</span><span class="cx" style="display: block; padding: 0 10px"> 'sanitize_callback' => 'sanitize_hex_color',
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'transport' => 'postMessage',
</ins><span class="cx" style="display: block; padding: 0 10px"> ) );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_background_color', array(
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -222,444 +230,422 @@
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> function twentyfifteen_color_scheme_css() {
</span><span class="cx" style="display: block; padding: 0 10px"> $color_scheme_option = get_theme_mod( 'color_scheme', 'default' );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $color_scheme_css = get_theme_mod( 'color_scheme_css', '' );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Don't do anything if the default color scheme is selected.
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( 'default' === $color_scheme_option ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( 'default' === $color_scheme_option || empty( $color_scheme_css ) ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> return;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // If we get this far, we have custom styles. Let's do this.
- $color_scheme = twentyfifteen_get_color_scheme();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ wp_add_inline_style( 'twentyfifteen-style', $color_scheme_css );
+}
+add_action( 'wp_enqueue_scripts', 'twentyfifteen_color_scheme_css' );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Convert main and sidebar text hex color to rgba.
- $color_main_text_rgb = twentyfifteen_hex2rgb( $color_scheme[3] );
- $color_sidebar_link_rgb = twentyfifteen_hex2rgb( $color_scheme[4] );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/**
+ * Binds JS listener to make Customizer color_scheme control.
+ * Passes color scheme data as colorScheme global.
+ *
+ * @since Twenty Fifteen 1.0
+ */
+function twentyfifteen_customize_control_js() {
+ wp_enqueue_script( 'color-scheme-control', get_template_directory_uri() . '/js/color-scheme-control.js', array( 'customize-controls', 'iris', 'underscore', 'wp-util' ), '', true );
+ wp_localize_script( 'color-scheme-control', 'colorScheme', twentyfifteen_get_color_schemes() );
+}
+add_action( 'customize_controls_enqueue_scripts', 'twentyfifteen_customize_control_js' );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $color_background = $color_scheme[0];
- $color_sidebar_background = $color_scheme[1];
- $color_box_background = $color_scheme[2];
- $color_main_text = $color_scheme[3];
- $color_secondary_text = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.7)', $color_main_text_rgb );
- $color_border = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.1)', $color_main_text_rgb );
- $color_border_focus = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.3)', $color_main_text_rgb );
- $color_sidebar_link = $color_scheme[4];
- $color_sidebar_text = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.7)', $color_sidebar_link_rgb );
- $color_sidebar_border = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.1)', $color_sidebar_link_rgb );
- $color_sidebar_border_focus = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.3)', $color_sidebar_link_rgb );
- $color_meta_box = $color_scheme[5];
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/**
+ * Binds JS handlers to make Customizer preview reload changes asynchronously.
+ *
+ * @since Twenty Fifteen 1.0
+ */
+function twentyfifteen_customize_preview_js() {
+ wp_enqueue_script( 'twentyfifteen-customize-preview', get_template_directory_uri() . '/js/customize-preview.js', array( 'customize-preview' ), '20141029', true );
+}
+add_action( 'customize_preview_init', 'twentyfifteen_customize_preview_js' );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $css = '
- /* Color Scheme */
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/**
+ * Output an Underscore template for generating CSS for the color scheme.
+ *
+ * @since Twenty Fifteen 1.0
+ */
+function twentyfifteen_color_scheme_css_template() {
+ ?>
+ <script type="text/html" id="tmpl-twentyfifteen-color-scheme">
+ /* Color Scheme */
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- /* Background Color */
- body {
- background-color: %1$s;
- }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /* Background Color */
+ body {
+ background-color: {{ data.background_color }};
+ }
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- /* Sidebar Background Color */
- body:before,
- .site-header {
- background-color: %2$s;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /* Sidebar Background Color */
+ body:before,
+ .site-header {
+ background-color: {{ data.header_background_color }};
+ }
+
+ /* Box Background Color */
+ .post-navigation,
+ .pagination,
+ .secondary,
+ .site-footer,
+ .hentry,
+ .page-header,
+ .page-content,
+ .comments-area {
+ background-color: {{ data.box_background_color }};
+ }
+
+ /* Box Background Color */
+ button,
+ input[type="button"],
+ input[type="reset"],
+ input[type="submit"],
+ .pagination .prev,
+ .pagination .next,
+ .pagination .prev:before,
+ .pagination .next:before,
+ .widget_calendar tbody a,
+ .widget_calendar tbody a:hover,
+ .widget_calendar tbody a:focus,
+ .entry-content .page-links a,
+ .entry-content .page-links a:hover,
+ .entry-content .page-links a:focus,
+ .sticky-post {
+ color: {{ data.box_background_color }};
+ }
+
+ /* Main Text Color */
+ button,
+ input[type="button"],
+ input[type="reset"],
+ input[type="submit"],
+ .pagination .prev,
+ .pagination .next,
+ .widget_calendar tbody a,
+ .page-links a,
+ .sticky-post {
+ background-color: {{ data.textcolor }};
+ }
+
+ /* Main Text Color */
+ body,
+ blockquote cite,
+ blockquote small,
+ a,
+ .dropdown-toggle:after,
+ .image-navigation a:hover,
+ .image-navigation a:focus,
+ .comment-navigation a:hover,
+ .comment-navigation a:focus,
+ .widget-title,
+ .entry-footer a:hover,
+ .entry-footer a:focus,
+ .comment-metadata a:hover,
+ .comment-metadata a:focus,
+ .pingback .edit-link a:hover,
+ .pingback .edit-link a:focus,
+ .comment-list .reply a:hover,
+ .comment-list .reply a:focus,
+ .site-info a:hover,
+ .site-info a:focus {
+ color: {{ data.textcolor }};
+ }
+
+ /* Main Text Color */
+ .entry-content a,
+ .entry-summary a,
+ .page-content a,
+ .comment-content a,
+ .pingback .comment-body > a,
+ .author-description a,
+ .taxonomy-description a,
+ .textwidget a,
+ .entry-footer a:hover,
+ .comment-metadata a:hover,
+ .pingback .edit-link a:hover,
+ .comment-list .reply a:hover,
+ .site-info a:hover {
+ border-color: {{ data.textcolor }};
+ }
+
+ /* Secondary Text Color */
+ button:hover,
+ button:focus,
+ input[type="button"]:hover,
+ input[type="button"]:focus,
+ input[type="reset"]:hover,
+ input[type="reset"]:focus,
+ input[type="submit"]:hover,
+ input[type="submit"]:focus,
+ .pagination .prev:hover,
+ .pagination .prev:focus,
+ .pagination .next:hover,
+ .pagination .next:focus,
+ .widget_calendar tbody a:hover,
+ .widget_calendar tbody a:focus,
+ .page-links a:hover,
+ .page-links a:focus {
+ background-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
+ background-color: {{ data.secondary_textcolor }};
+ }
+
+ /* Secondary Text Color */
+ blockquote,
+ a:hover,
+ a:focus,
+ .main-navigation .menu-item-description,
+ .post-navigation .meta-nav,
+ .post-navigation a:hover .post-title,
+ .post-navigation a:focus .post-title,
+ .image-navigation,
+ .image-navigation a,
+ .comment-navigation,
+ .comment-navigation a,
+ .widget,
+ .author-heading,
+ .entry-footer,
+ .entry-footer a,
+ .taxonomy-description,
+ .page-links > .page-links-title,
+ .entry-caption,
+ .comment-author,
+ .comment-metadata,
+ .comment-metadata a,
+ .pingback .edit-link,
+ .pingback .edit-link a,
+ .post-password-form label,
+ .comment-form label,
+ .comment-notes,
+ .comment-awaiting-moderation,
+ .logged-in-as,
+ .form-allowed-tags,
+ .no-comments,
+ .site-info,
+ .site-info a,
+ .wp-caption-text,
+ .gallery-caption,
+ .comment-list .reply a {
+ color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
+ color: {{ data.secondary_textcolor }};
+ }
+
+ /* Secondary Text Color */
+ blockquote,
+ .logged-in-as a:hover,
+ .comment-author a:hover {
+ border-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
+ border-color: {{ data.secondary_textcolor }};
+ }
+
+ /* Border Color */
+ hr,
+ .dropdown-toggle:hover,
+ .dropdown-toggle:focus {
+ background-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
+ background-color: {{ data.border_color }};
+ }
+
+ /* Border Color */
+ pre,
+ abbr[title],
+ table,
+ th,
+ td,
+ input,
+ textarea,
+ .main-navigation ul,
+ .main-navigation li,
+ .post-navigation,
+ .pagination,
+ .comment-navigation,
+ .widget li,
+ .widget_categories .children,
+ .widget_nav_menu .sub-menu,
+ .widget_pages .children,
+ .site-header,
+ .site-footer,
+ .hentry .hentry,
+ .author-info,
+ .entry-content .page-links a,
+ .page-links > span,
+ .page-header,
+ .comments-area,
+ .comment-list .comment-respond,
+ .comment-list article,
+ .comment-list .pingback,
+ .comment-list .trackback,
+ .comment-list .reply a,
+ .no-comments {
+ border-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
+ border-color: {{ data.border_color }};
+ }
+
+ .post-navigation .nav-previous:not(.has-post-thumbnail) .nav-next:not(.has-post-thumbnail) {
+ border-color: {{ data.border_color }};
+ }
+
+ /* Border Focus Color */
+ a:focus,
+ button:focus,
+ input:focus {
+ outline-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
+ outline-color: {{ data.border_focus_color }};
+ }
+
+ input:focus,
+ textarea:focus {
+ border-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
+ border-color: {{ data.border_focus_color }};
+ }
+
+ /* Sidebar Link Color */
+ .secondary-toggle:before {
+ color: {{ data.sidebar_textcolor }};
+ }
+
+ .site-title a,
+ .site-description {
+ color: {{ data.sidebar_textcolor }};
+ }
+
+ /* Sidebar Text Color */
+ .site-title a:hover,
+ .site-title a:focus {
+ color: {{ data.sidebar_textcolor2 }};
+ }
+
+ /* Sidebar Border Color */
+ .secondary-toggle {
+ border-color: {{ data.sidebar_textcolor }}; /* Fallback for IE7 and IE8 */
+ border-color: {{ data.sidebar_border_color }};
+ }
+
+ /* Sidebar Border Focus Color */
+ .secondary-toggle:hover,
+ .secondary-toggle:focus {
+ border-color: {{ data.sidebar_textcolor }}; /* Fallback for IE7 and IE8 */
+ border-color: {{ data.sidebar_border_focus_color }};
+ }
+
+ .site-title a {
+ outline-color: {{ data.sidebar_textcolor }}; /* Fallback for IE7 and IE8 */
+ outline-color: {{ data.sidebar_border_focus_color }};
+ }
+
+ /* Meta Background Color */
+ .entry-footer {
+ background-color: {{ data.meta_box_background_color }};
+ }
+
+ @media screen and (min-width: 38.75em) {
+ /* Main Text Color */
+ .page-header {
+ border-color: {{ data.textcolor }};
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ }
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- /* Box Background Color */
- .post-navigation,
- .pagination,
- .secondary,
- .site-footer,
- .hentry,
- .page-header,
- .page-content,
- .comments-area {
- background-color: %3$s;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ @media screen and (min-width: 59.6875em) {
+ /* Make sure its transparent on desktop */
+ .site-header,
+ .secondary {
+ background-color: transparent;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- /* Box Background Color */
- button,
- input[type="button"],
- input[type="reset"],
- input[type="submit"],
- .pagination .prev,
- .pagination .next,
- .pagination .prev:before,
- .pagination .next:before,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /* Sidebar Background Color */
+ .widget button,
+ .widget input[type="button"],
+ .widget input[type="reset"],
+ .widget input[type="submit"],
</ins><span class="cx" style="display: block; padding: 0 10px"> .widget_calendar tbody a,
</span><span class="cx" style="display: block; padding: 0 10px"> .widget_calendar tbody a:hover,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .widget_calendar tbody a:focus,
- .entry-content .page-links a,
- .entry-content .page-links a:hover,
- .entry-content .page-links a:focus,
- .sticky-post {
- color: %3$s;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .widget_calendar tbody a:focus {
+ color: {{ data.header_background_color }};
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- /* Main Text Color */
- button,
- input[type="button"],
- input[type="reset"],
- input[type="submit"],
- .pagination .prev,
- .pagination .next,
- .widget_calendar tbody a,
- .page-links a,
- .sticky-post {
- background-color: %4$s;
- }
-
- /* Main Text Color */
- body,
- blockquote cite,
- blockquote small,
- a,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /* Sidebar Link Color */
+ .secondary a,
</ins><span class="cx" style="display: block; padding: 0 10px"> .dropdown-toggle:after,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .image-navigation a:hover,
- .image-navigation a:focus,
- .comment-navigation a:hover,
- .comment-navigation a:focus,
</del><span class="cx" style="display: block; padding: 0 10px"> .widget-title,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .entry-footer a:hover,
- .entry-footer a:focus,
- .comment-metadata a:hover,
- .comment-metadata a:focus,
- .pingback .edit-link a:hover,
- .pingback .edit-link a:focus,
- .comment-list .reply a:hover,
- .comment-list .reply a:focus,
- .site-info a:hover,
- .site-info a:focus {
- color: %4$s;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .widget blockquote cite,
+ .widget blockquote small {
+ color: {{ data.sidebar_textcolor }};
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- /* Main Text Color */
- .entry-content a,
- .entry-summary a,
- .page-content a,
- .comment-content a,
- .pingback .comment-body > a,
- .author-description a,
- .taxonomy-description a,
- .textwidget a,
- .entry-footer a:hover,
- .comment-metadata a:hover,
- .pingback .edit-link a:hover,
- .comment-list .reply a:hover,
- .site-info a:hover {
- border-color: %4$s;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .widget button,
+ .widget input[type="button"],
+ .widget input[type="reset"],
+ .widget input[type="submit"],
+ .widget_calendar tbody a {
+ background-color: {{ data.sidebar_textcolor }};
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- /* Secondary Text Color */
- button:hover,
- button:focus,
- input[type="button"]:hover,
- input[type="button"]:focus,
- input[type="reset"]:hover,
- input[type="reset"]:focus,
- input[type="submit"]:hover,
- input[type="submit"]:focus,
- .pagination .prev:hover,
- .pagination .prev:focus,
- .pagination .next:hover,
- .pagination .next:focus,
- .widget_calendar tbody a:hover,
- .widget_calendar tbody a:focus,
- .page-links a:hover,
- .page-links a:focus {
- background-color: %4$s; /* Fallback for IE7 and IE8 */
- background-color: %5$s;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .textwidget a {
+ border-color: {{ data.sidebar_textcolor }};
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- /* Secondary Text Color */
- blockquote,
- a:hover,
- a:focus,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /* Sidebar Text Color */
+ .secondary a:hover,
+ .secondary a:focus,
</ins><span class="cx" style="display: block; padding: 0 10px"> .main-navigation .menu-item-description,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .post-navigation .meta-nav,
- .post-navigation a:hover .post-title,
- .post-navigation a:focus .post-title,
- .image-navigation,
- .image-navigation a,
- .comment-navigation,
- .comment-navigation a,
</del><span class="cx" style="display: block; padding: 0 10px"> .widget,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .author-heading,
- .entry-footer,
- .entry-footer a,
- .taxonomy-description,
- .page-links > .page-links-title,
- .entry-caption,
- .comment-author,
- .comment-metadata,
- .comment-metadata a,
- .pingback .edit-link,
- .pingback .edit-link a,
- .post-password-form label,
- .comment-form label,
- .comment-notes,
- .comment-awaiting-moderation,
- .logged-in-as,
- .form-allowed-tags,
- .no-comments,
- .site-info,
- .site-info a,
- .wp-caption-text,
- .gallery-caption,
- .comment-list .reply a {
- color: %4$s; /* Fallback for IE7 and IE8 */
- color: %5$s;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .widget blockquote,
+ .widget .wp-caption-text,
+ .widget .gallery-caption {
+ color: {{ data.sidebar_textcolor2 }};
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- /* Secondary Text Color */
- blockquote,
- .logged-in-as a:hover,
- .comment-author a:hover {
- border-color: %4$s; /* Fallback for IE7 and IE8 */
- border-color: %5$s;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .widget button:hover,
+ .widget button:focus,
+ .widget input[type="button"]:hover,
+ .widget input[type="button"]:focus,
+ .widget input[type="reset"]:hover,
+ .widget input[type="reset"]:focus,
+ .widget input[type="submit"]:hover,
+ .widget input[type="submit"]:focus,
+ .widget_calendar tbody a:hover,
+ .widget_calendar tbody a:focus {
+ background-color: {{ data.sidebar_textcolor2 }};
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- /* Border Color */
- hr,
- .dropdown-toggle:hover,
- .dropdown-toggle:focus {
- background-color: %4$s; /* Fallback for IE7 and IE8 */
- background-color: %6$s;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .widget blockquote {
+ border-color: {{ data.sidebar_textcolor2 }};
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- /* Border Color */
- pre,
- abbr[title],
- table,
- th,
- td,
- input,
- textarea,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /* Sidebar Border Color */
</ins><span class="cx" style="display: block; padding: 0 10px"> .main-navigation ul,
</span><span class="cx" style="display: block; padding: 0 10px"> .main-navigation li,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .post-navigation,
- .pagination,
- .comment-navigation,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .widget input,
+ .widget textarea,
+ .widget table,
+ .widget th,
+ .widget td,
+ .widget pre,
</ins><span class="cx" style="display: block; padding: 0 10px"> .widget li,
</span><span class="cx" style="display: block; padding: 0 10px"> .widget_categories .children,
</span><span class="cx" style="display: block; padding: 0 10px"> .widget_nav_menu .sub-menu,
</span><span class="cx" style="display: block; padding: 0 10px"> .widget_pages .children,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .site-header,
- .site-footer,
- .hentry + .hentry,
- .author-info,
- .entry-content .page-links a,
- .page-links > span,
- .page-header,
- .comments-area,
- .comment-list + .comment-respond,
- .comment-list article,
- .comment-list .pingback,
- .comment-list .trackback,
- .comment-list .reply a,
- .no-comments {
- border-color: %4$s; /* Fallback for IE7 and IE8 */
- border-color: %6$s;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .widget abbr[title] {
+ border-color: {{ data.sidebar_border_color }};
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .post-navigation .nav-previous:not(.has-post-thumbnail) + .nav-next:not(.has-post-thumbnail) {
- border-color: %6$s;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .dropdown-toggle:hover,
+ .dropdown-toggle:focus,
+ .widget hr {
+ background-color: {{ data.sidebar_border_color }};
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- /* Border Focus Color */
- a:focus,
- button:focus,
- input:focus {
- outline-color: %4$s; /* Fallback for IE7 and IE8 */
- outline-color: %7$s;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .widget input:focus,
+ .widget textarea:focus {
+ border-color: {{ data.sidebar_border_focus_color }};
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- input:focus,
- textarea:focus {
- border-color: %4$s; /* Fallback for IE7 and IE8 */
- border-color: %7$s;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .sidebar a:focus,
+ .dropdown-toggle:focus {
+ outline-color: {{ data.sidebar_border_focus_color }};
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
- /* Sidebar Link Color */
- .secondary-toggle:before {
- color: %8$s;
- }
-
- .site-title a,
- .site-description {
- color: %8$s;
- }
-
- /* Sidebar Text Color */
- .site-title a:hover,
- .site-title a:focus {
- color: %9$s;
- }
-
- /* Sidebar Border Color */
- .secondary-toggle {
- border-color: %8$s; /* Fallback for IE7 and IE8 */
- border-color: %10$s;
- }
-
- /* Sidebar Border Focus Color */
- .secondary-toggle:hover,
- .secondary-toggle:focus {
- border-color: %8$s; /* Fallback for IE7 and IE8 */
- border-color: %11$s;
- }
-
- .site-title a {
- outline-color: %8$s; /* Fallback for IE7 and IE8 */
- outline-color: %11$s;
- }
-
- /* Meta Background Color */
- .entry-footer {
- background-color: %12$s;
- }
-
- @media screen and (min-width: 38.75em) {
- /* Main Text Color */
- .page-header {
- border-color: %4$s;
- }
- }
-
- @media screen and (min-width: 59.6875em) {
- /* Make sure its transparent on desktop */
- .site-header,
- .secondary {
- background-color: transparent;
- }
-
- /* Sidebar Background Color */
- .widget button,
- .widget input[type="button"],
- .widget input[type="reset"],
- .widget input[type="submit"],
- .widget_calendar tbody a,
- .widget_calendar tbody a:hover,
- .widget_calendar tbody a:focus {
- color: %2$s;
- }
-
- /* Sidebar Link Color */
- .secondary a,
- .dropdown-toggle:after,
- .widget-title,
- .widget blockquote cite,
- .widget blockquote small {
- color: %8$s;
- }
-
- .widget button,
- .widget input[type="button"],
- .widget input[type="reset"],
- .widget input[type="submit"],
- .widget_calendar tbody a {
- background-color: %8$s;
- }
-
- .textwidget a {
- border-color: %8$s;
- }
-
- /* Sidebar Text Color */
- .secondary a:hover,
- .secondary a:focus,
- .main-navigation .menu-item-description,
- .widget,
- .widget blockquote,
- .widget .wp-caption-text,
- .widget .gallery-caption {
- color: %9$s;
- }
-
- .widget button:hover,
- .widget button:focus,
- .widget input[type="button"]:hover,
- .widget input[type="button"]:focus,
- .widget input[type="reset"]:hover,
- .widget input[type="reset"]:focus,
- .widget input[type="submit"]:hover,
- .widget input[type="submit"]:focus,
- .widget_calendar tbody a:hover,
- .widget_calendar tbody a:focus {
- background-color: %9$s;
- }
-
- .widget blockquote {
- border-color: %9$s;
- }
-
- /* Sidebar Border Color */
- .main-navigation ul,
- .main-navigation li,
- .widget input,
- .widget textarea,
- .widget table,
- .widget th,
- .widget td,
- .widget pre,
- .widget li,
- .widget_categories .children,
- .widget_nav_menu .sub-menu,
- .widget_pages .children,
- .widget abbr[title] {
- border-color: %10$s;
- }
-
- .dropdown-toggle:hover,
- .dropdown-toggle:focus,
- .widget hr {
- background-color: %10$s;
- }
-
- .widget input:focus,
- .widget textarea:focus {
- border-color: %11$s;
- }
-
- .sidebar a:focus,
- .dropdown-toggle:focus {
- outline-color: %11$s;
- }
- }
- ';
-
- wp_add_inline_style( 'twentyfifteen-style', sprintf( $css,
- $color_background,
- $color_sidebar_background,
- $color_box_background,
- $color_main_text,
- $color_secondary_text,
- $color_border,
- $color_border_focus,
- $color_sidebar_link,
- $color_sidebar_text,
- $color_sidebar_border,
- $color_sidebar_border_focus,
- $color_meta_box
- ) );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ }
+ </script>
+ <?php
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-add_action( 'wp_enqueue_scripts', 'twentyfifteen_color_scheme_css' );
-
-/**
- * Binds JS listener to make Customizer color_scheme control.
- * Passes color scheme data as colorScheme global.
- *
- * @since Twenty Fifteen 1.0
- */
-function twentyfifteen_customize_control_js() {
- wp_enqueue_script( 'color-scheme-control', get_template_directory_uri() . '/js/color-scheme-control.js', array( 'customize-controls' ), '', true );
- wp_localize_script( 'color-scheme-control', 'colorScheme', twentyfifteen_get_color_schemes() );
-}
-add_action( 'customize_controls_enqueue_scripts', 'twentyfifteen_customize_control_js' );
-
-/**
- * Binds JS handlers to make Customizer preview reload changes asynchronously.
- *
- * @since Twenty Fifteen 1.0
- */
-function twentyfifteen_customize_preview_js() {
- wp_enqueue_script( 'twentyfifteen-customize-preview', get_template_directory_uri() . '/js/customize-preview.js', array( 'customize-preview' ), '20141029', true );
-}
-add_action( 'customize_preview_init', 'twentyfifteen_customize_preview_js' );
</del><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of file
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+add_action( 'customize_controls_print_footer_scripts', 'twentyfifteen_color_scheme_css_template' );
</ins></span></pre></div>
<a id="trunksrcwpcontentthemestwentyfifteenjscolorschemecontroljs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentyfifteen/js/color-scheme-control.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentyfifteen/js/color-scheme-control.js 2014-11-07 17:37:36 UTC (rev 30273)
+++ trunk/src/wp-content/themes/twentyfifteen/js/color-scheme-control.js 2014-11-07 20:54:48 UTC (rev 30274)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4,6 +4,21 @@
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> ( function( api ) {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var cssTemplate = wp.template( 'twentyfifteen-color-scheme' ),
+ colorSchemeKeys = [
+ 'background_color',
+ 'header_background_color',
+ 'box_background_color',
+ 'textcolor',
+ 'sidebar_textcolor',
+ 'meta_box_background_color'
+ ],
+ colorSettings = [
+ 'background_color',
+ 'header_background_color',
+ 'sidebar_textcolor'
+ ];
+
</ins><span class="cx" style="display: block; padding: 0 10px"> api.controlConstructor.select = api.Control.extend( {
</span><span class="cx" style="display: block; padding: 0 10px"> ready: function() {
</span><span class="cx" style="display: block; padding: 0 10px"> if ( 'color_scheme' === this.id ) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -29,4 +44,33 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> } );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ function getCSS() {
+ var scheme = api( 'color_scheme' )(),
+ colors = _.object( colorSchemeKeys, colorScheme[ scheme ].colors );
+
+ // Merge in color scheme overrides.
+ _.each( colorSettings, function( setting ) {
+ colors[ setting ] = api( setting )();
+ });
+
+ // Add additional colors.
+ colors['secondary_textcolor'] = Color( colors.textcolor ).toCSS( 'rgba', 0.7 );
+ colors['border_color'] = Color( colors.textcolor ).toCSS( 'rgba', 0.1 );
+ colors['border_focus_color'] = Color( colors.textcolor ).toCSS( 'rgba', 0.3 );
+ colors['sidebar_textcolor2'] = Color( colors.sidebar_textcolor ).toCSS( 'rgba', 0.7 );
+ colors['sidebar_border_color'] = Color( colors.sidebar_textcolor ).toCSS( 'rgba', 0.1 );
+ colors['sidebar_border_focus_color'] = Color( colors.sidebar_textcolor ).toCSS( 'rgba', 0.3 );
+
+ return cssTemplate( colors );
+ }
+
+ // Update the CSS whenever a color setting is changed.
+ _.each( colorSettings, function( setting ) {
+ api( setting, function( setting ) {
+ setting.bind( _.throttle( function( value ) {
+ api( 'color_scheme_css' ).set( getCSS() );
+ }, 250 ) );
+ } );
+ } );
</ins><span class="cx" style="display: block; padding: 0 10px"> } )( wp.customize );
</span></span></pre>
</div>
</div>
</body>
</html>