You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1259 lines
31 KiB
1259 lines
31 KiB
<?php |
|
/** |
|
* Twenty Sixteen Customizer functionality |
|
* |
|
* @package WordPress |
|
* @subpackage Twenty_Sixteen |
|
* @since Twenty Sixteen 1.0 |
|
*/ |
|
|
|
/** |
|
* Sets up the WordPress core custom header and custom background features. |
|
* |
|
* @since Twenty Sixteen 1.0 |
|
* |
|
* @see twentysixteen_header_style() |
|
*/ |
|
function twentysixteen_custom_header_and_background() { |
|
$color_scheme = twentysixteen_get_color_scheme(); |
|
$default_background_color = trim( $color_scheme[0], '#' ); |
|
$default_text_color = trim( $color_scheme[3], '#' ); |
|
|
|
/** |
|
* Filter the arguments used when adding 'custom-background' support in Twenty Sixteen. |
|
* |
|
* @since Twenty Sixteen 1.0 |
|
* |
|
* @param array $args { |
|
* An array of custom-background support arguments. |
|
* |
|
* @type string $default-color Default color of the background. |
|
* } |
|
*/ |
|
add_theme_support( |
|
'custom-background', |
|
apply_filters( |
|
'twentysixteen_custom_background_args', |
|
array( |
|
'default-color' => $default_background_color, |
|
) |
|
) |
|
); |
|
|
|
/** |
|
* Filter the arguments used when adding 'custom-header' support in Twenty Sixteen. |
|
* |
|
* @since Twenty Sixteen 1.0 |
|
* |
|
* @param array $args { |
|
* An array of custom-header support arguments. |
|
* |
|
* @type string $default-text-color Default color of the header text. |
|
* @type int $width Width in pixels of the custom header image. Default 1200. |
|
* @type int $height Height in pixels of the custom header image. Default 280. |
|
* @type bool $flex-height Whether to allow flexible-height header images. Default true. |
|
* @type callable $wp-head-callback Callback function used to style the header image and text |
|
* displayed on the blog. |
|
* } |
|
*/ |
|
add_theme_support( |
|
'custom-header', |
|
apply_filters( |
|
'twentysixteen_custom_header_args', |
|
array( |
|
'default-text-color' => $default_text_color, |
|
'width' => 1200, |
|
'height' => 280, |
|
'flex-height' => true, |
|
'wp-head-callback' => 'twentysixteen_header_style', |
|
) |
|
) |
|
); |
|
} |
|
add_action( 'after_setup_theme', 'twentysixteen_custom_header_and_background' ); |
|
|
|
if ( ! function_exists( 'twentysixteen_header_style' ) ) : |
|
/** |
|
* Styles the header text displayed on the site. |
|
* |
|
* Create your own twentysixteen_header_style() function to override in a child theme. |
|
* |
|
* @since Twenty Sixteen 1.0 |
|
* |
|
* @see twentysixteen_custom_header_and_background(). |
|
*/ |
|
function twentysixteen_header_style() { |
|
// If the header text option is untouched, let's bail. |
|
if ( display_header_text() ) { |
|
return; |
|
} |
|
|
|
// If the header text has been hidden. |
|
?> |
|
<style type="text/css" id="twentysixteen-header-css"> |
|
.site-branding { |
|
margin: 0 auto 0 0; |
|
} |
|
|
|
.site-branding .site-title, |
|
.site-description { |
|
clip: rect(1px, 1px, 1px, 1px); |
|
position: absolute; |
|
} |
|
</style> |
|
<?php |
|
} |
|
endif; // twentysixteen_header_style |
|
|
|
/** |
|
* Adds postMessage support for site title and description for the Customizer. |
|
* |
|
* @since Twenty Sixteen 1.0 |
|
* |
|
* @param WP_Customize_Manager $wp_customize The Customizer object. |
|
*/ |
|
function twentysixteen_customize_register( $wp_customize ) { |
|
$color_scheme = twentysixteen_get_color_scheme(); |
|
|
|
$wp_customize->get_setting( 'blogname' )->transport = 'postMessage'; |
|
$wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage'; |
|
|
|
if ( isset( $wp_customize->selective_refresh ) ) { |
|
$wp_customize->selective_refresh->add_partial( |
|
'blogname', |
|
array( |
|
'selector' => '.site-title a', |
|
'container_inclusive' => false, |
|
'render_callback' => 'twentysixteen_customize_partial_blogname', |
|
) |
|
); |
|
$wp_customize->selective_refresh->add_partial( |
|
'blogdescription', |
|
array( |
|
'selector' => '.site-description', |
|
'container_inclusive' => false, |
|
'render_callback' => 'twentysixteen_customize_partial_blogdescription', |
|
) |
|
); |
|
} |
|
|
|
// Add color scheme setting and control. |
|
$wp_customize->add_setting( |
|
'color_scheme', |
|
array( |
|
'default' => 'default', |
|
'sanitize_callback' => 'twentysixteen_sanitize_color_scheme', |
|
'transport' => 'postMessage', |
|
) |
|
); |
|
|
|
$wp_customize->add_control( |
|
'color_scheme', |
|
array( |
|
'label' => __( 'Base Color Scheme', 'twentysixteen' ), |
|
'section' => 'colors', |
|
'type' => 'select', |
|
'choices' => twentysixteen_get_color_scheme_choices(), |
|
'priority' => 1, |
|
) |
|
); |
|
|
|
// Add page background color setting and control. |
|
$wp_customize->add_setting( |
|
'page_background_color', |
|
array( |
|
'default' => $color_scheme[1], |
|
'sanitize_callback' => 'sanitize_hex_color', |
|
'transport' => 'postMessage', |
|
) |
|
); |
|
|
|
$wp_customize->add_control( |
|
new WP_Customize_Color_Control( |
|
$wp_customize, |
|
'page_background_color', |
|
array( |
|
'label' => __( 'Page Background Color', 'twentysixteen' ), |
|
'section' => 'colors', |
|
) |
|
) |
|
); |
|
|
|
// Remove the core header textcolor control, as it shares the main text color. |
|
$wp_customize->remove_control( 'header_textcolor' ); |
|
|
|
// Add link color setting and control. |
|
$wp_customize->add_setting( |
|
'link_color', |
|
array( |
|
'default' => $color_scheme[2], |
|
'sanitize_callback' => 'sanitize_hex_color', |
|
'transport' => 'postMessage', |
|
) |
|
); |
|
|
|
$wp_customize->add_control( |
|
new WP_Customize_Color_Control( |
|
$wp_customize, |
|
'link_color', |
|
array( |
|
'label' => __( 'Link Color', 'twentysixteen' ), |
|
'section' => 'colors', |
|
) |
|
) |
|
); |
|
|
|
// Add main text color setting and control. |
|
$wp_customize->add_setting( |
|
'main_text_color', |
|
array( |
|
'default' => $color_scheme[3], |
|
'sanitize_callback' => 'sanitize_hex_color', |
|
'transport' => 'postMessage', |
|
) |
|
); |
|
|
|
$wp_customize->add_control( |
|
new WP_Customize_Color_Control( |
|
$wp_customize, |
|
'main_text_color', |
|
array( |
|
'label' => __( 'Main Text Color', 'twentysixteen' ), |
|
'section' => 'colors', |
|
) |
|
) |
|
); |
|
|
|
// Add secondary text color setting and control. |
|
$wp_customize->add_setting( |
|
'secondary_text_color', |
|
array( |
|
'default' => $color_scheme[4], |
|
'sanitize_callback' => 'sanitize_hex_color', |
|
'transport' => 'postMessage', |
|
) |
|
); |
|
|
|
$wp_customize->add_control( |
|
new WP_Customize_Color_Control( |
|
$wp_customize, |
|
'secondary_text_color', |
|
array( |
|
'label' => __( 'Secondary Text Color', 'twentysixteen' ), |
|
'section' => 'colors', |
|
) |
|
) |
|
); |
|
} |
|
add_action( 'customize_register', 'twentysixteen_customize_register', 11 ); |
|
|
|
/** |
|
* Render the site title for the selective refresh partial. |
|
* |
|
* @since Twenty Sixteen 1.2 |
|
* @see twentysixteen_customize_register() |
|
* |
|
* @return void |
|
*/ |
|
function twentysixteen_customize_partial_blogname() { |
|
bloginfo( 'name' ); |
|
} |
|
|
|
/** |
|
* Render the site tagline for the selective refresh partial. |
|
* |
|
* @since Twenty Sixteen 1.2 |
|
* @see twentysixteen_customize_register() |
|
* |
|
* @return void |
|
*/ |
|
function twentysixteen_customize_partial_blogdescription() { |
|
bloginfo( 'description' ); |
|
} |
|
|
|
/** |
|
* Registers color schemes for Twenty Sixteen. |
|
* |
|
* Can be filtered with {@see 'twentysixteen_color_schemes'}. |
|
* |
|
* The order of colors in a colors array: |
|
* 1. Main Background Color. |
|
* 2. Page Background Color. |
|
* 3. Link Color. |
|
* 4. Main Text Color. |
|
* 5. Secondary Text Color. |
|
* |
|
* @since Twenty Sixteen 1.0 |
|
* |
|
* @return array An associative array of color scheme options. |
|
*/ |
|
function twentysixteen_get_color_schemes() { |
|
/** |
|
* Filter the color schemes registered for use with Twenty Sixteen. |
|
* |
|
* The default schemes include 'default', 'dark', 'gray', 'red', and 'yellow'. |
|
* |
|
* @since Twenty Sixteen 1.0 |
|
* |
|
* @param array $schemes { |
|
* Associative array of color schemes data. |
|
* |
|
* @type array $slug { |
|
* Associative array of information for setting up the color scheme. |
|
* |
|
* @type string $label Color scheme label. |
|
* @type array $colors HEX codes for default colors prepended with a hash symbol ('#'). |
|
* Colors are defined in the following order: Main background, page |
|
* background, link, main text, secondary text. |
|
* } |
|
* } |
|
*/ |
|
return apply_filters( |
|
'twentysixteen_color_schemes', |
|
array( |
|
'default' => array( |
|
'label' => __( 'Default', 'twentysixteen' ), |
|
'colors' => array( |
|
'#1a1a1a', |
|
'#ffffff', |
|
'#007acc', |
|
'#1a1a1a', |
|
'#686868', |
|
), |
|
), |
|
'dark' => array( |
|
'label' => __( 'Dark', 'twentysixteen' ), |
|
'colors' => array( |
|
'#262626', |
|
'#1a1a1a', |
|
'#9adffd', |
|
'#e5e5e5', |
|
'#c1c1c1', |
|
), |
|
), |
|
'gray' => array( |
|
'label' => __( 'Gray', 'twentysixteen' ), |
|
'colors' => array( |
|
'#616a73', |
|
'#4d545c', |
|
'#c7c7c7', |
|
'#f2f2f2', |
|
'#f2f2f2', |
|
), |
|
), |
|
'red' => array( |
|
'label' => __( 'Red', 'twentysixteen' ), |
|
'colors' => array( |
|
'#ffffff', |
|
'#ff675f', |
|
'#640c1f', |
|
'#402b30', |
|
'#402b30', |
|
), |
|
), |
|
'yellow' => array( |
|
'label' => __( 'Yellow', 'twentysixteen' ), |
|
'colors' => array( |
|
'#3b3721', |
|
'#ffef8e', |
|
'#774e24', |
|
'#3b3721', |
|
'#5b4d3e', |
|
), |
|
), |
|
) |
|
); |
|
} |
|
|
|
if ( ! function_exists( 'twentysixteen_get_color_scheme' ) ) : |
|
/** |
|
* Retrieves the current Twenty Sixteen color scheme. |
|
* |
|
* Create your own twentysixteen_get_color_scheme() function to override in a child theme. |
|
* |
|
* @since Twenty Sixteen 1.0 |
|
* |
|
* @return array An associative array of either the current or default color scheme HEX values. |
|
*/ |
|
function twentysixteen_get_color_scheme() { |
|
$color_scheme_option = get_theme_mod( 'color_scheme', 'default' ); |
|
$color_schemes = twentysixteen_get_color_schemes(); |
|
|
|
if ( array_key_exists( $color_scheme_option, $color_schemes ) ) { |
|
return $color_schemes[ $color_scheme_option ]['colors']; |
|
} |
|
|
|
return $color_schemes['default']['colors']; |
|
} |
|
endif; // twentysixteen_get_color_scheme |
|
|
|
if ( ! function_exists( 'twentysixteen_get_color_scheme_choices' ) ) : |
|
/** |
|
* Retrieves an array of color scheme choices registered for Twenty Sixteen. |
|
* |
|
* Create your own twentysixteen_get_color_scheme_choices() function to override |
|
* in a child theme. |
|
* |
|
* @since Twenty Sixteen 1.0 |
|
* |
|
* @return array Array of color schemes. |
|
*/ |
|
function twentysixteen_get_color_scheme_choices() { |
|
$color_schemes = twentysixteen_get_color_schemes(); |
|
$color_scheme_control_options = array(); |
|
|
|
foreach ( $color_schemes as $color_scheme => $value ) { |
|
$color_scheme_control_options[ $color_scheme ] = $value['label']; |
|
} |
|
|
|
return $color_scheme_control_options; |
|
} |
|
endif; // twentysixteen_get_color_scheme_choices |
|
|
|
|
|
if ( ! function_exists( 'twentysixteen_sanitize_color_scheme' ) ) : |
|
/** |
|
* Handles sanitization for Twenty Sixteen color schemes. |
|
* |
|
* Create your own twentysixteen_sanitize_color_scheme() function to override |
|
* in a child theme. |
|
* |
|
* @since Twenty Sixteen 1.0 |
|
* |
|
* @param string $value Color scheme name value. |
|
* @return string Color scheme name. |
|
*/ |
|
function twentysixteen_sanitize_color_scheme( $value ) { |
|
$color_schemes = twentysixteen_get_color_scheme_choices(); |
|
|
|
if ( ! array_key_exists( $value, $color_schemes ) ) { |
|
return 'default'; |
|
} |
|
|
|
return $value; |
|
} |
|
endif; // twentysixteen_sanitize_color_scheme |
|
|
|
/** |
|
* Enqueues front-end CSS for color scheme. |
|
* |
|
* @since Twenty Sixteen 1.0 |
|
* |
|
* @see wp_add_inline_style() |
|
*/ |
|
function twentysixteen_color_scheme_css() { |
|
$color_scheme_option = get_theme_mod( 'color_scheme', 'default' ); |
|
|
|
// Don't do anything if the default color scheme is selected. |
|
if ( 'default' === $color_scheme_option ) { |
|
return; |
|
} |
|
|
|
$color_scheme = twentysixteen_get_color_scheme(); |
|
|
|
// Convert main text hex color to rgba. |
|
$color_textcolor_rgb = twentysixteen_hex2rgb( $color_scheme[3] ); |
|
|
|
// If the rgba values are empty return early. |
|
if ( empty( $color_textcolor_rgb ) ) { |
|
return; |
|
} |
|
|
|
// If we get this far, we have a custom color scheme. |
|
$colors = array( |
|
'background_color' => $color_scheme[0], |
|
'page_background_color' => $color_scheme[1], |
|
'link_color' => $color_scheme[2], |
|
'main_text_color' => $color_scheme[3], |
|
'secondary_text_color' => $color_scheme[4], |
|
'border_color' => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.2)', $color_textcolor_rgb ), |
|
|
|
); |
|
|
|
$color_scheme_css = twentysixteen_get_color_scheme_css( $colors ); |
|
|
|
wp_add_inline_style( 'twentysixteen-style', $color_scheme_css ); |
|
} |
|
add_action( 'wp_enqueue_scripts', 'twentysixteen_color_scheme_css' ); |
|
|
|
/** |
|
* Binds the JS listener to make Customizer color_scheme control. |
|
* |
|
* Passes color scheme data as colorScheme global. |
|
* |
|
* @since Twenty Sixteen 1.0 |
|
*/ |
|
function twentysixteen_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' ), '20170530', true ); |
|
wp_localize_script( 'color-scheme-control', 'colorScheme', twentysixteen_get_color_schemes() ); |
|
} |
|
add_action( 'customize_controls_enqueue_scripts', 'twentysixteen_customize_control_js' ); |
|
|
|
/** |
|
* Binds JS handlers to make the Customizer preview reload changes asynchronously. |
|
* |
|
* @since Twenty Sixteen 1.0 |
|
*/ |
|
function twentysixteen_customize_preview_js() { |
|
wp_enqueue_script( 'twentysixteen-customize-preview', get_template_directory_uri() . '/js/customize-preview.js', array( 'customize-preview' ), '20170530', true ); |
|
} |
|
add_action( 'customize_preview_init', 'twentysixteen_customize_preview_js' ); |
|
|
|
/** |
|
* Returns CSS for the color schemes. |
|
* |
|
* @since Twenty Sixteen 1.0 |
|
* |
|
* @param array $colors Color scheme colors. |
|
* @return string Color scheme CSS. |
|
*/ |
|
function twentysixteen_get_color_scheme_css( $colors ) { |
|
$colors = wp_parse_args( |
|
$colors, |
|
array( |
|
'background_color' => '', |
|
'page_background_color' => '', |
|
'link_color' => '', |
|
'main_text_color' => '', |
|
'secondary_text_color' => '', |
|
'border_color' => '', |
|
) |
|
); |
|
|
|
return <<<CSS |
|
/* Color Scheme */ |
|
|
|
/* Background Color */ |
|
body { |
|
background-color: {$colors['background_color']}; |
|
} |
|
|
|
/* Page Background Color */ |
|
.site { |
|
background-color: {$colors['page_background_color']}; |
|
} |
|
|
|
mark, |
|
ins, |
|
button, |
|
button[disabled]:hover, |
|
button[disabled]:focus, |
|
input[type="button"], |
|
input[type="button"][disabled]:hover, |
|
input[type="button"][disabled]:focus, |
|
input[type="reset"], |
|
input[type="reset"][disabled]:hover, |
|
input[type="reset"][disabled]:focus, |
|
input[type="submit"], |
|
input[type="submit"][disabled]:hover, |
|
input[type="submit"][disabled]:focus, |
|
.menu-toggle.toggled-on, |
|
.menu-toggle.toggled-on:hover, |
|
.menu-toggle.toggled-on:focus, |
|
.pagination .prev, |
|
.pagination .next, |
|
.pagination .prev:hover, |
|
.pagination .prev:focus, |
|
.pagination .next:hover, |
|
.pagination .next:focus, |
|
.pagination .nav-links:before, |
|
.pagination .nav-links:after, |
|
.widget_calendar tbody a, |
|
.widget_calendar tbody a:hover, |
|
.widget_calendar tbody a:focus, |
|
.page-links a, |
|
.page-links a:hover, |
|
.page-links a:focus { |
|
color: {$colors['page_background_color']}; |
|
} |
|
|
|
/* Link Color */ |
|
.menu-toggle:hover, |
|
.menu-toggle:focus, |
|
a, |
|
.main-navigation a:hover, |
|
.main-navigation a:focus, |
|
.dropdown-toggle:hover, |
|
.dropdown-toggle:focus, |
|
.social-navigation a:hover:before, |
|
.social-navigation a:focus:before, |
|
.post-navigation a:hover .post-title, |
|
.post-navigation a:focus .post-title, |
|
.tagcloud a:hover, |
|
.tagcloud a:focus, |
|
.site-branding .site-title a:hover, |
|
.site-branding .site-title a:focus, |
|
.entry-title a:hover, |
|
.entry-title a:focus, |
|
.entry-footer a:hover, |
|
.entry-footer a:focus, |
|
.comment-metadata a:hover, |
|
.comment-metadata a:focus, |
|
.pingback .comment-edit-link:hover, |
|
.pingback .comment-edit-link:focus, |
|
.comment-reply-link, |
|
.comment-reply-link:hover, |
|
.comment-reply-link:focus, |
|
.required, |
|
.site-info a:hover, |
|
.site-info a:focus { |
|
color: {$colors['link_color']}; |
|
} |
|
|
|
mark, |
|
ins, |
|
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, |
|
.page-links a:hover, |
|
.page-links a:focus { |
|
background-color: {$colors['link_color']}; |
|
} |
|
|
|
input[type="date"]:focus, |
|
input[type="time"]:focus, |
|
input[type="datetime-local"]:focus, |
|
input[type="week"]:focus, |
|
input[type="month"]:focus, |
|
input[type="text"]:focus, |
|
input[type="email"]:focus, |
|
input[type="url"]:focus, |
|
input[type="password"]:focus, |
|
input[type="search"]:focus, |
|
input[type="tel"]:focus, |
|
input[type="number"]:focus, |
|
textarea:focus, |
|
.tagcloud a:hover, |
|
.tagcloud a:focus, |
|
.menu-toggle:hover, |
|
.menu-toggle:focus { |
|
border-color: {$colors['link_color']}; |
|
} |
|
|
|
/* Main Text Color */ |
|
body, |
|
blockquote cite, |
|
blockquote small, |
|
.main-navigation a, |
|
.menu-toggle, |
|
.dropdown-toggle, |
|
.social-navigation a, |
|
.post-navigation a, |
|
.pagination a:hover, |
|
.pagination a:focus, |
|
.widget-title a, |
|
.site-branding .site-title a, |
|
.entry-title a, |
|
.page-links > .page-links-title, |
|
.comment-author, |
|
.comment-reply-title small a:hover, |
|
.comment-reply-title small a:focus { |
|
color: {$colors['main_text_color']}; |
|
} |
|
|
|
blockquote, |
|
.menu-toggle.toggled-on, |
|
.menu-toggle.toggled-on:hover, |
|
.menu-toggle.toggled-on:focus, |
|
.post-navigation, |
|
.post-navigation div + div, |
|
.pagination, |
|
.widget, |
|
.page-header, |
|
.page-links a, |
|
.comments-title, |
|
.comment-reply-title { |
|
border-color: {$colors['main_text_color']}; |
|
} |
|
|
|
button, |
|
button[disabled]:hover, |
|
button[disabled]:focus, |
|
input[type="button"], |
|
input[type="button"][disabled]:hover, |
|
input[type="button"][disabled]:focus, |
|
input[type="reset"], |
|
input[type="reset"][disabled]:hover, |
|
input[type="reset"][disabled]:focus, |
|
input[type="submit"], |
|
input[type="submit"][disabled]:hover, |
|
input[type="submit"][disabled]:focus, |
|
.menu-toggle.toggled-on, |
|
.menu-toggle.toggled-on:hover, |
|
.menu-toggle.toggled-on:focus, |
|
.pagination:before, |
|
.pagination:after, |
|
.pagination .prev, |
|
.pagination .next, |
|
.page-links a { |
|
background-color: {$colors['main_text_color']}; |
|
} |
|
|
|
/* Secondary Text Color */ |
|
|
|
/** |
|
* IE8 and earlier will drop any block with CSS3 selectors. |
|
* Do not combine these styles with the next block. |
|
*/ |
|
body:not(.search-results) .entry-summary { |
|
color: {$colors['secondary_text_color']}; |
|
} |
|
|
|
blockquote, |
|
.post-password-form label, |
|
a:hover, |
|
a:focus, |
|
a:active, |
|
.post-navigation .meta-nav, |
|
.image-navigation, |
|
.comment-navigation, |
|
.widget_recent_entries .post-date, |
|
.widget_rss .rss-date, |
|
.widget_rss cite, |
|
.site-description, |
|
.author-bio, |
|
.entry-footer, |
|
.entry-footer a, |
|
.sticky-post, |
|
.taxonomy-description, |
|
.entry-caption, |
|
.comment-metadata, |
|
.pingback .edit-link, |
|
.comment-metadata a, |
|
.pingback .comment-edit-link, |
|
.comment-form label, |
|
.comment-notes, |
|
.comment-awaiting-moderation, |
|
.logged-in-as, |
|
.form-allowed-tags, |
|
.site-info, |
|
.site-info a, |
|
.wp-caption .wp-caption-text, |
|
.gallery-caption, |
|
.widecolumn label, |
|
.widecolumn .mu_register label { |
|
color: {$colors['secondary_text_color']}; |
|
} |
|
|
|
.widget_calendar tbody a:hover, |
|
.widget_calendar tbody a:focus { |
|
background-color: {$colors['secondary_text_color']}; |
|
} |
|
|
|
/* Border Color */ |
|
fieldset, |
|
pre, |
|
abbr, |
|
acronym, |
|
table, |
|
th, |
|
td, |
|
input[type="date"], |
|
input[type="time"], |
|
input[type="datetime-local"], |
|
input[type="week"], |
|
input[type="month"], |
|
input[type="text"], |
|
input[type="email"], |
|
input[type="url"], |
|
input[type="password"], |
|
input[type="search"], |
|
input[type="tel"], |
|
input[type="number"], |
|
textarea, |
|
.main-navigation li, |
|
.main-navigation .primary-menu, |
|
.menu-toggle, |
|
.dropdown-toggle:after, |
|
.social-navigation a, |
|
.image-navigation, |
|
.comment-navigation, |
|
.tagcloud a, |
|
.entry-content, |
|
.entry-summary, |
|
.page-links a, |
|
.page-links > span, |
|
.comment-list article, |
|
.comment-list .pingback, |
|
.comment-list .trackback, |
|
.comment-reply-link, |
|
.no-comments, |
|
.widecolumn .mu_register .mu_alert { |
|
border-color: {$colors['main_text_color']}; /* Fallback for IE7 and IE8 */ |
|
border-color: {$colors['border_color']}; |
|
} |
|
|
|
hr, |
|
code { |
|
background-color: {$colors['main_text_color']}; /* Fallback for IE7 and IE8 */ |
|
background-color: {$colors['border_color']}; |
|
} |
|
|
|
@media screen and (min-width: 56.875em) { |
|
.main-navigation li:hover > a, |
|
.main-navigation li.focus > a { |
|
color: {$colors['link_color']}; |
|
} |
|
|
|
.main-navigation ul ul, |
|
.main-navigation ul ul li { |
|
border-color: {$colors['border_color']}; |
|
} |
|
|
|
.main-navigation ul ul:before { |
|
border-top-color: {$colors['border_color']}; |
|
border-bottom-color: {$colors['border_color']}; |
|
} |
|
|
|
.main-navigation ul ul li { |
|
background-color: {$colors['page_background_color']}; |
|
} |
|
|
|
.main-navigation ul ul:after { |
|
border-top-color: {$colors['page_background_color']}; |
|
border-bottom-color: {$colors['page_background_color']}; |
|
} |
|
} |
|
|
|
CSS; |
|
} |
|
|
|
|
|
/** |
|
* Outputs an Underscore template for generating CSS for the color scheme. |
|
* |
|
* The template generates the css dynamically for instant display in the |
|
* Customizer preview. |
|
* |
|
* @since Twenty Sixteen 1.0 |
|
*/ |
|
function twentysixteen_color_scheme_css_template() { |
|
$colors = array( |
|
'background_color' => '{{ data.background_color }}', |
|
'page_background_color' => '{{ data.page_background_color }}', |
|
'link_color' => '{{ data.link_color }}', |
|
'main_text_color' => '{{ data.main_text_color }}', |
|
'secondary_text_color' => '{{ data.secondary_text_color }}', |
|
'border_color' => '{{ data.border_color }}', |
|
); |
|
?> |
|
<script type="text/html" id="tmpl-twentysixteen-color-scheme"> |
|
<?php echo twentysixteen_get_color_scheme_css( $colors ); ?> |
|
</script> |
|
<?php |
|
} |
|
add_action( 'customize_controls_print_footer_scripts', 'twentysixteen_color_scheme_css_template' ); |
|
|
|
/** |
|
* Enqueues front-end CSS for the page background color. |
|
* |
|
* @since Twenty Sixteen 1.0 |
|
* |
|
* @see wp_add_inline_style() |
|
*/ |
|
function twentysixteen_page_background_color_css() { |
|
$color_scheme = twentysixteen_get_color_scheme(); |
|
$default_color = $color_scheme[1]; |
|
$page_background_color = get_theme_mod( 'page_background_color', $default_color ); |
|
|
|
// Don't do anything if the current color is the default. |
|
if ( $page_background_color === $default_color ) { |
|
return; |
|
} |
|
|
|
$css = ' |
|
/* Custom Page Background Color */ |
|
.site { |
|
background-color: %1$s; |
|
} |
|
|
|
mark, |
|
ins, |
|
button, |
|
button[disabled]:hover, |
|
button[disabled]:focus, |
|
input[type="button"], |
|
input[type="button"][disabled]:hover, |
|
input[type="button"][disabled]:focus, |
|
input[type="reset"], |
|
input[type="reset"][disabled]:hover, |
|
input[type="reset"][disabled]:focus, |
|
input[type="submit"], |
|
input[type="submit"][disabled]:hover, |
|
input[type="submit"][disabled]:focus, |
|
.menu-toggle.toggled-on, |
|
.menu-toggle.toggled-on:hover, |
|
.menu-toggle.toggled-on:focus, |
|
.pagination .prev, |
|
.pagination .next, |
|
.pagination .prev:hover, |
|
.pagination .prev:focus, |
|
.pagination .next:hover, |
|
.pagination .next:focus, |
|
.pagination .nav-links:before, |
|
.pagination .nav-links:after, |
|
.widget_calendar tbody a, |
|
.widget_calendar tbody a:hover, |
|
.widget_calendar tbody a:focus, |
|
.page-links a, |
|
.page-links a:hover, |
|
.page-links a:focus { |
|
color: %1$s; |
|
} |
|
|
|
@media screen and (min-width: 56.875em) { |
|
.main-navigation ul ul li { |
|
background-color: %1$s; |
|
} |
|
|
|
.main-navigation ul ul:after { |
|
border-top-color: %1$s; |
|
border-bottom-color: %1$s; |
|
} |
|
} |
|
'; |
|
|
|
wp_add_inline_style( 'twentysixteen-style', sprintf( $css, $page_background_color ) ); |
|
} |
|
add_action( 'wp_enqueue_scripts', 'twentysixteen_page_background_color_css', 11 ); |
|
|
|
/** |
|
* Enqueues front-end CSS for the link color. |
|
* |
|
* @since Twenty Sixteen 1.0 |
|
* |
|
* @see wp_add_inline_style() |
|
*/ |
|
function twentysixteen_link_color_css() { |
|
$color_scheme = twentysixteen_get_color_scheme(); |
|
$default_color = $color_scheme[2]; |
|
$link_color = get_theme_mod( 'link_color', $default_color ); |
|
|
|
// Don't do anything if the current color is the default. |
|
if ( $link_color === $default_color ) { |
|
return; |
|
} |
|
|
|
$css = ' |
|
/* Custom Link Color */ |
|
.menu-toggle:hover, |
|
.menu-toggle:focus, |
|
a, |
|
.main-navigation a:hover, |
|
.main-navigation a:focus, |
|
.dropdown-toggle:hover, |
|
.dropdown-toggle:focus, |
|
.social-navigation a:hover:before, |
|
.social-navigation a:focus:before, |
|
.post-navigation a:hover .post-title, |
|
.post-navigation a:focus .post-title, |
|
.tagcloud a:hover, |
|
.tagcloud a:focus, |
|
.site-branding .site-title a:hover, |
|
.site-branding .site-title a:focus, |
|
.entry-title a:hover, |
|
.entry-title a:focus, |
|
.entry-footer a:hover, |
|
.entry-footer a:focus, |
|
.comment-metadata a:hover, |
|
.comment-metadata a:focus, |
|
.pingback .comment-edit-link:hover, |
|
.pingback .comment-edit-link:focus, |
|
.comment-reply-link, |
|
.comment-reply-link:hover, |
|
.comment-reply-link:focus, |
|
.required, |
|
.site-info a:hover, |
|
.site-info a:focus { |
|
color: %1$s; |
|
} |
|
|
|
mark, |
|
ins, |
|
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, |
|
.page-links a:hover, |
|
.page-links a:focus { |
|
background-color: %1$s; |
|
} |
|
|
|
input[type="date"]:focus, |
|
input[type="time"]:focus, |
|
input[type="datetime-local"]:focus, |
|
input[type="week"]:focus, |
|
input[type="month"]:focus, |
|
input[type="text"]:focus, |
|
input[type="email"]:focus, |
|
input[type="url"]:focus, |
|
input[type="password"]:focus, |
|
input[type="search"]:focus, |
|
input[type="tel"]:focus, |
|
input[type="number"]:focus, |
|
textarea:focus, |
|
.tagcloud a:hover, |
|
.tagcloud a:focus, |
|
.menu-toggle:hover, |
|
.menu-toggle:focus { |
|
border-color: %1$s; |
|
} |
|
|
|
@media screen and (min-width: 56.875em) { |
|
.main-navigation li:hover > a, |
|
.main-navigation li.focus > a { |
|
color: %1$s; |
|
} |
|
} |
|
'; |
|
|
|
wp_add_inline_style( 'twentysixteen-style', sprintf( $css, $link_color ) ); |
|
} |
|
add_action( 'wp_enqueue_scripts', 'twentysixteen_link_color_css', 11 ); |
|
|
|
/** |
|
* Enqueues front-end CSS for the main text color. |
|
* |
|
* @since Twenty Sixteen 1.0 |
|
* |
|
* @see wp_add_inline_style() |
|
*/ |
|
function twentysixteen_main_text_color_css() { |
|
$color_scheme = twentysixteen_get_color_scheme(); |
|
$default_color = $color_scheme[3]; |
|
$main_text_color = get_theme_mod( 'main_text_color', $default_color ); |
|
|
|
// Don't do anything if the current color is the default. |
|
if ( $main_text_color === $default_color ) { |
|
return; |
|
} |
|
|
|
// Convert main text hex color to rgba. |
|
$main_text_color_rgb = twentysixteen_hex2rgb( $main_text_color ); |
|
|
|
// If the rgba values are empty return early. |
|
if ( empty( $main_text_color_rgb ) ) { |
|
return; |
|
} |
|
|
|
// If we get this far, we have a custom color scheme. |
|
$border_color = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.2)', $main_text_color_rgb ); |
|
|
|
$css = ' |
|
/* Custom Main Text Color */ |
|
body, |
|
blockquote cite, |
|
blockquote small, |
|
.main-navigation a, |
|
.menu-toggle, |
|
.dropdown-toggle, |
|
.social-navigation a, |
|
.post-navigation a, |
|
.pagination a:hover, |
|
.pagination a:focus, |
|
.widget-title a, |
|
.site-branding .site-title a, |
|
.entry-title a, |
|
.page-links > .page-links-title, |
|
.comment-author, |
|
.comment-reply-title small a:hover, |
|
.comment-reply-title small a:focus { |
|
color: %1$s |
|
} |
|
|
|
blockquote, |
|
.menu-toggle.toggled-on, |
|
.menu-toggle.toggled-on:hover, |
|
.menu-toggle.toggled-on:focus, |
|
.post-navigation, |
|
.post-navigation div + div, |
|
.pagination, |
|
.widget, |
|
.page-header, |
|
.page-links a, |
|
.comments-title, |
|
.comment-reply-title { |
|
border-color: %1$s; |
|
} |
|
|
|
button, |
|
button[disabled]:hover, |
|
button[disabled]:focus, |
|
input[type="button"], |
|
input[type="button"][disabled]:hover, |
|
input[type="button"][disabled]:focus, |
|
input[type="reset"], |
|
input[type="reset"][disabled]:hover, |
|
input[type="reset"][disabled]:focus, |
|
input[type="submit"], |
|
input[type="submit"][disabled]:hover, |
|
input[type="submit"][disabled]:focus, |
|
.menu-toggle.toggled-on, |
|
.menu-toggle.toggled-on:hover, |
|
.menu-toggle.toggled-on:focus, |
|
.pagination:before, |
|
.pagination:after, |
|
.pagination .prev, |
|
.pagination .next, |
|
.page-links a { |
|
background-color: %1$s; |
|
} |
|
|
|
/* Border Color */ |
|
fieldset, |
|
pre, |
|
abbr, |
|
acronym, |
|
table, |
|
th, |
|
td, |
|
input[type="date"], |
|
input[type="time"], |
|
input[type="datetime-local"], |
|
input[type="week"], |
|
input[type="month"], |
|
input[type="text"], |
|
input[type="email"], |
|
input[type="url"], |
|
input[type="password"], |
|
input[type="search"], |
|
input[type="tel"], |
|
input[type="number"], |
|
textarea, |
|
.main-navigation li, |
|
.main-navigation .primary-menu, |
|
.menu-toggle, |
|
.dropdown-toggle:after, |
|
.social-navigation a, |
|
.image-navigation, |
|
.comment-navigation, |
|
.tagcloud a, |
|
.entry-content, |
|
.entry-summary, |
|
.page-links a, |
|
.page-links > span, |
|
.comment-list article, |
|
.comment-list .pingback, |
|
.comment-list .trackback, |
|
.comment-reply-link, |
|
.no-comments, |
|
.widecolumn .mu_register .mu_alert { |
|
border-color: %1$s; /* Fallback for IE7 and IE8 */ |
|
border-color: %2$s; |
|
} |
|
|
|
hr, |
|
code { |
|
background-color: %1$s; /* Fallback for IE7 and IE8 */ |
|
background-color: %2$s; |
|
} |
|
|
|
@media screen and (min-width: 56.875em) { |
|
.main-navigation ul ul, |
|
.main-navigation ul ul li { |
|
border-color: %2$s; |
|
} |
|
|
|
.main-navigation ul ul:before { |
|
border-top-color: %2$s; |
|
border-bottom-color: %2$s; |
|
} |
|
} |
|
'; |
|
|
|
wp_add_inline_style( 'twentysixteen-style', sprintf( $css, $main_text_color, $border_color ) ); |
|
} |
|
add_action( 'wp_enqueue_scripts', 'twentysixteen_main_text_color_css', 11 ); |
|
|
|
/** |
|
* Enqueues front-end CSS for the secondary text color. |
|
* |
|
* @since Twenty Sixteen 1.0 |
|
* |
|
* @see wp_add_inline_style() |
|
*/ |
|
function twentysixteen_secondary_text_color_css() { |
|
$color_scheme = twentysixteen_get_color_scheme(); |
|
$default_color = $color_scheme[4]; |
|
$secondary_text_color = get_theme_mod( 'secondary_text_color', $default_color ); |
|
|
|
// Don't do anything if the current color is the default. |
|
if ( $secondary_text_color === $default_color ) { |
|
return; |
|
} |
|
|
|
$css = ' |
|
/* Custom Secondary Text Color */ |
|
|
|
/** |
|
* IE8 and earlier will drop any block with CSS3 selectors. |
|
* Do not combine these styles with the next block. |
|
*/ |
|
body:not(.search-results) .entry-summary { |
|
color: %1$s; |
|
} |
|
|
|
blockquote, |
|
.post-password-form label, |
|
a:hover, |
|
a:focus, |
|
a:active, |
|
.post-navigation .meta-nav, |
|
.image-navigation, |
|
.comment-navigation, |
|
.widget_recent_entries .post-date, |
|
.widget_rss .rss-date, |
|
.widget_rss cite, |
|
.site-description, |
|
.author-bio, |
|
.entry-footer, |
|
.entry-footer a, |
|
.sticky-post, |
|
.taxonomy-description, |
|
.entry-caption, |
|
.comment-metadata, |
|
.pingback .edit-link, |
|
.comment-metadata a, |
|
.pingback .comment-edit-link, |
|
.comment-form label, |
|
.comment-notes, |
|
.comment-awaiting-moderation, |
|
.logged-in-as, |
|
.form-allowed-tags, |
|
.site-info, |
|
.site-info a, |
|
.wp-caption .wp-caption-text, |
|
.gallery-caption, |
|
.widecolumn label, |
|
.widecolumn .mu_register label { |
|
color: %1$s; |
|
} |
|
|
|
.widget_calendar tbody a:hover, |
|
.widget_calendar tbody a:focus { |
|
background-color: %1$s; |
|
} |
|
'; |
|
|
|
wp_add_inline_style( 'twentysixteen-style', sprintf( $css, $secondary_text_color ) ); |
|
} |
|
add_action( 'wp_enqueue_scripts', 'twentysixteen_secondary_text_color_css', 11 );
|
|
|