Make WordPress Core

Ticket #25580: 25580.1.diff

File 25580.1.diff, 5.9 KB (added by obenland, 13 years ago)

This would fix it too. Food for thought.

  • wp-content/themes/twentyfourteen/inc/customizer.php

     
    1717function twentyfourteen_customize_register( $wp_customize ) {
    1818        $wp_customize->get_setting( 'blogname' )->transport        = 'postMessage';
    1919        $wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage';
    20 
    21         $wp_customize->add_setting( 'accent_color', array(
    22                 'default'           => '#24890d',
    23                 'sanitize_callback' => 'twentyfourteen_generate_accent_colors',
    24         ) );
    25 
    26         $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'accent_color', array(
    27                 'label'    => __( 'Accent Color', 'twentyfourteen' ),
    28                 'section'  => 'colors',
    29                 'settings' => 'accent_color',
    30         ) ) );
    3120}
    3221add_action( 'customize_register', 'twentyfourteen_customize_register' );
    3322
     
    4029        wp_enqueue_script( 'twentyfourteen_customizer', get_template_directory_uri() . '/js/customizer.js', array( 'customize-preview' ), '20120827', true );
    4130}
    4231add_action( 'customize_preview_init', 'twentyfourteen_customize_preview_js' );
    43 
    44 /**
    45  * Generate two variants of the accent color, return the original, and
    46  * save the others as theme mods.
    47  *
    48  * @since Twenty Fourteen 1.0
    49  *
    50  * @param string $color The original color.
    51  * @return string $color The original color, sanitized.
    52  */
    53 function twentyfourteen_generate_accent_colors( $color ) {
    54         $color = sanitize_hex_color( $color );
    55 
    56         set_theme_mod( 'accent_lighter', twentyfourteen_adjust_color( $color, 14 ) );
    57         set_theme_mod( 'accent_much_lighter', twentyfourteen_adjust_color( $color, 71 ) );
    58 
    59         return $color;
    60 }
    61 
    62 /**
    63  * Tweak the brightness of a color by adjusting the RGB values by the given interval.
    64  *
    65  * Use positive values of $steps to brighten the color and negative values to darken the color.
    66  * All three RGB values are modified by the specified steps, within the range of 0-255. The hue
    67  * is generally maintained unless the number of steps causes one value to be capped at 0 or 255.
    68  *
    69  * @since Twenty Fourteen 1.0
    70  *
    71  * @param string $color The original color, in 3- or 6-digit hexadecimal form.
    72  * @param int $steps The number of steps to adjust the color by, in RGB units.
    73  * @return string $color The new color, in 6-digit hexadecimal form.
    74  */
    75 function twentyfourteen_adjust_color( $color, $steps ) {
    76         // Convert shorthand to full hex.
    77         if ( strlen( $color ) == 3 ) {
    78                 $color = str_repeat( substr( $color, 1, 1 ), 2 ) . str_repeat( substr( $color, 2, 1 ), 2 ) . str_repeat( substr( $color, 3, 1), 2 );
    79         }
    80 
    81         // Convert hex to rgb.
    82         $rgb = array( hexdec( substr( $color, 1, 2 ) ), hexdec( substr( $color, 3, 2 ) ), hexdec( substr( $color, 5, 2 ) ) );
    83 
    84         // Adjust color and switch back to hex.
    85         $hex = '#';
    86         foreach ( $rgb as $c ) {
    87                 $c += $steps;
    88                 if ( $c > 255 )
    89                         $c = 255;
    90                 elseif ( $c < 0 )
    91                         $c = 0;
    92                 $hex .= str_pad( dechex( $c ), 2, '0', STR_PAD_LEFT);
    93         }
    94 
    95         return $hex;
    96 }
    97 
    98 /**
    99  * Output the CSS for the Theme Customizer options.
    100  *
    101  * @since Twenty Fourteen 1.0
    102  *
    103  * @return void
    104  */
    105 function twentyfourteen_customizer_styles() {
    106         $accent_color = get_theme_mod( 'accent_color' );
    107 
    108         // Don't do anything if the current color is the default.
    109         if ( '#24890d' === $accent_color )
    110                 return;
    111 
    112         $accent_lighter = get_theme_mod( 'accent_lighter' );
    113         $accent_much_lighter = get_theme_mod( 'accent_much_lighter' );
    114 
    115         $css = '<style type="text/css" id="twentyfourteen-accent-color">
    116                 /* Custom accent color. */
    117                 h1 a:hover,
    118                 h2 a:hover,
    119                 h3 a:hover,
    120                 h4 a:hover,
    121                 h5 a:hover,
    122                 h6 a:hover,
    123                 a,
    124                 .entry-title a:hover,
    125                 .cat-links a:hover,
    126                 .site-content .post-navigation a:hover,
    127                 .site-content .image-navigation a:hover,
    128                 .comment-author a:hover,
    129                 .comment-metadata a:hover,
    130                 .comment-list .trackback a:hover,
    131                 .comment-list .pingback a:hover,
    132                 .paging-navigation .page-numbers.current,
    133                 .content-sidebar.widget-area a:hover,
    134                 .content-sidebar .widget_twentyfourteen_ephemera .post-format-archive-link {
    135                         color: ' . $accent_color . ';
    136                 }
    137 
    138                 button,
    139                 html input[type="button"],
    140                 input[type="reset"],
    141                 input[type="submit"],
    142                 .hentry .mejs-controls .mejs-time-rail .mejs-time-current,
    143                 .header-extra,
    144                 .search-toggle,
    145                 .primary-navigation ul ul,
    146                 .primary-navigation li:hover > a,
    147                 .page-links a:hover,
    148                 .widget_calendar tbody a {
    149                         background-color: ' . $accent_color . ';
    150                 }
    151 
    152                 ::-moz-selection {
    153                         background: ' . $accent_color . ';
    154                 }
    155 
    156                 ::selection {
    157                         background: ' . $accent_color . ';
    158                 }
    159 
    160                 .page-links a:hover,
    161                 .paging-navigation .page-numbers.current {
    162                         border-color: ' .  $accent_color . ';
    163                 }
    164 
    165                 /* Generated variant of custom accent color: slightly lighter. */
    166                 .search-toggle:hover,
    167                 .search-toggle.active,
    168                 .search-box,
    169                 button:hover,
    170                 html input[type="button"]:hover,
    171                 input[type="reset"]:hover,
    172                 input[type="submit"]:hover,
    173                 button:focus,
    174                 html input[type="button"]:focus,
    175                 input[type="reset"]:focus,
    176                 input[type="submit"]:focus,
    177                 .widget_calendar tbody a:hover {
    178                         background-color: ' . $accent_lighter . ';
    179                 }
    180 
    181                 /* Generated variant of custom accent color: much lighter. */
    182                 button:active,
    183                 html input[type="button"]:active,
    184                 input[type="reset"]:active,
    185                 input[type="submit"]:active {
    186                         background-color: ' . $accent_much_lighter . ';
    187                 }
    188 
    189                 a:hover,
    190                 a:focus,
    191                 a:active,
    192                 .primary-navigation li.current_page_item > a,
    193                 .primary-navigation li.current-menu-item > a,
    194                 .secondary-navigation a:hover,
    195                 #secondary .current_page_item > a,
    196                 #secondary .current-menu-item > a,
    197                 .featured-content a:hover,
    198                 .featured-content .more-link,
    199                 .widget-area a:hover {
    200                         color: ' . $accent_much_lighter . ';
    201                 }
    202                 </style>';
    203 
    204         wp_add_inline_style( 'twentyfourteen-style', $css );
    205 }
    206 add_action( 'wp_enqueue_scripts', 'twentyfourteen_customizer_styles' );