WordPress.org

Make WordPress Core

Changeset 26567


Ignore:
Timestamp:
12/03/2013 06:04:56 PM (6 years ago)
Author:
lancewillett
Message:

Twenty Fourteen: remove Accent Color feature. Props celloexpressions, fixes #26220.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-content/themes/twentyfourteen/inc/customizer.php

    r26556 r26567  
    2323    $wp_customize->get_section( 'colors' )->description           = __( 'Background may only be visible on wide screens.', 'twentyfourteen' );
    2424    $wp_customize->get_section( 'background_image' )->description = __( 'Background may only be visible on wide screens.', 'twentyfourteen' );
    25 
    26     // Add the custom accent color setting and control.
    27     $wp_customize->add_setting( 'accent_color', array(
    28         'default'           => '#24890d',
    29         'sanitize_callback' => 'sanitize_hex_color',
    30     ) );
    31 
    32     $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'accent_color', array(
    33         'label'    => __( 'Accent Color', 'twentyfourteen' ),
    34         'section'  => 'colors',
    35     ) ) );
    36 
    37     add_filter( 'theme_mod_accent_mid',   'twentyfourteen_accent_mid'   );
    38     add_filter( 'theme_mod_accent_light', 'twentyfourteen_accent_light' );
    3925
    4026    // Add the featured content section in case it's not already there.
     
    7359
    7460/**
    75  * Tweak the brightness of a color by adjusting the RGB
    76  * values by the given interval.
    77  *
    78  * Use positive values of $steps to brighten the color and negative
    79  * values to darken the color. All three RGB values are modified by
    80  * the specified steps, within the range of 0-255. The hue is generally
    81  * maintained unless the number of steps causes one value to be capped
    82  * at 0 or 255.
    83  *
    84  * @since Twenty Fourteen 1.0
    85  *
    86  * @param string $color The original color, in 3- or 6-digit hexadecimal form.
    87  * @param int    $steps The number of steps to adjust the color by, in RGB units.
    88  * @return string $color The new color, in 6-digit hexadecimal form.
    89  */
    90 function twentyfourteen_adjust_color( $color, $steps ) {
    91     // Convert shorthand to full hex.
    92     if ( strlen( $color ) == 3 ) {
    93         $color = str_repeat( substr( $color, 1, 1 ), 2 ) . str_repeat( substr( $color, 2, 1 ), 2 ) . str_repeat( substr( $color, 3, 1), 2 );
    94     }
    95 
    96     // Convert hex to rgb.
    97     $rgb = array( hexdec( substr( $color, 1, 2 ) ), hexdec( substr( $color, 3, 2 ) ), hexdec( substr( $color, 5, 2 ) ) );
    98 
    99     // Adjust color and switch back to 6-digit hex.
    100     $hex = '#';
    101     foreach ( $rgb as $value ) {
    102         $value += $steps;
    103         if ( $value > 255 ) {
    104             $value = 255;
    105         } elseif ( $value < 0 ) {
    106             $value = 0;
    107         }
    108         $hex .= str_pad( dechex( $value ), 2, '0', STR_PAD_LEFT);
    109     }
    110 
    111     return $hex;
    112 }
    113 
    114  /**
    115  * Return a slightly lighter color than what is set as the theme's
    116  * accent color.
    117  *
    118  * @since Twenty Fourteen 1.0
    119  *
    120  * @return string Hex color.
    121  */
    122 function twentyfourteen_accent_mid() {
    123     return twentyfourteen_adjust_color( get_theme_mod( 'accent_color' ), 29 );
    124 }
    125 
    126 /**
    127  * Return a lighter color than what is set as the theme's accent color.
    128  *
    129  * @since Twenty Fourteen 1.0
    130  *
    131  * @return string Hex color.
    132  */
    133 function twentyfourteen_accent_light() {
    134     return twentyfourteen_adjust_color( get_theme_mod( 'accent_color' ), 49 );
    135 }
    136 
    137 /**
    138  * Cache the generated variants of the theme's accent color.
    139  *
    140  * @since Twenty Fourteen 1.0
    141  *
    142  * @return void
    143  */
    144 function twentyfourteen_rebuild_accent_colors() {
    145     set_theme_mod( 'accent_mid',   twentyfourteen_accent_mid()   );
    146     set_theme_mod( 'accent_light', twentyfourteen_accent_light() );
    147 }
    148 add_action( 'update_option_theme_mods_twentyfourteen', 'twentyfourteen_rebuild_accent_colors' );
    149 
    150 /**
    151  * Output the CSS for the Theme Customizer options.
    152  *
    153  * @since Twenty Fourteen 1.0
    154  *
    155  * @return void
    156  */
    157 function twentyfourteen_customizer_styles() {
    158     $accent_color = get_theme_mod( 'accent_color', '#24890d' );
    159 
    160     // Don't do anything if the current color is the default.
    161     if ( '#24890d' === $accent_color ) {
    162         return;
    163     }
    164 
    165     $accent_mid   = get_theme_mod( 'accent_mid'   );
    166     $accent_light = get_theme_mod( 'accent_light' );
    167 
    168     $css = '/* Custom accent color. */
    169         a,
    170         .content-sidebar .widget a {
    171             color: ' . $accent_color . ';
    172         }
    173 
    174         button,
    175         .contributor-posts-link,
    176         input[type="button"],
    177         input[type="reset"],
    178         input[type="submit"],
    179         .search-toggle,
    180         .hentry .mejs-controls .mejs-time-rail .mejs-time-current,
    181         .widget button,
    182         .widget input[type="button"],
    183         .widget input[type="reset"],
    184         .widget input[type="submit"],
    185         .widget_calendar tbody a,
    186         .content-sidebar .widget input[type="button"],
    187         .content-sidebar .widget input[type="reset"],
    188         .content-sidebar .widget input[type="submit"],
    189         .slider-control-paging .slider-active:before,
    190         .slider-control-paging .slider-active:hover:before,
    191         .slider-direction-nav a:hover {
    192             background-color: ' . $accent_color . ';
    193         }
    194 
    195         ::-moz-selection {
    196             background: ' . $accent_color . ';
    197         }
    198 
    199         ::selection {
    200             background: ' . $accent_color . ';
    201         }
    202 
    203         .paging-navigation .page-numbers.current {
    204             border-color: ' .  $accent_color . ';
    205         }
    206 
    207         @media screen and (min-width: 782px) {
    208             .primary-navigation li:hover > a,
    209             .primary-navigation li.focus > a,
    210             .primary-navigation ul ul {
    211                 background-color: ' . $accent_color . ';
    212             }
    213         }
    214 
    215         @media screen and (min-width: 1008px) {
    216             .secondary-navigation li:hover > a,
    217             .secondary-navigation li.focus > a,
    218             .secondary-navigation ul ul {
    219                 background-color: ' . $accent_color . ';
    220             }
    221         }
    222 
    223         /* Generated "mid" variant of custom accent color. */
    224         button:hover,
    225         button:focus,
    226         .contributor-posts-link:hover,
    227         input[type="button"]:hover,
    228         input[type="button"]:focus,
    229         input[type="reset"]:hover,
    230         input[type="reset"]:focus,
    231         input[type="submit"]:hover,
    232         input[type="submit"]:focus,
    233         .search-toggle:hover,
    234         .search-toggle.active,
    235         .search-box,
    236         .entry-meta .tag-links a:hover,
    237         .widget input[type="button"]:hover,
    238         .widget input[type="button"]:focus,
    239         .widget input[type="reset"]:hover,
    240         .widget input[type="reset"]:focus,
    241         .widget input[type="submit"]:hover,
    242         .widget input[type="submit"]:focus,
    243         .widget_calendar tbody a:hover,
    244         .content-sidebar .widget input[type="button"]:hover,
    245         .content-sidebar .widget input[type="button"]:focus,
    246         .content-sidebar .widget input[type="reset"]:hover,
    247         .content-sidebar .widget input[type="reset"]:focus,
    248         .content-sidebar .widget input[type="submit"]:hover,
    249         .content-sidebar .widget input[type="submit"]:focus,
    250         .slider-control-paging a:hover:before {
    251             background-color: ' . $accent_mid . ';
    252         }
    253 
    254         a:active,
    255         a:hover,
    256         .site-navigation a:hover,
    257         .entry-title a:hover,
    258         .entry-meta a:hover,
    259         .cat-links a:hover,
    260         .entry-content .edit-link a:hover,
    261         .page-links a:hover,
    262         .post-navigation a:hover,
    263         .image-navigation a:hover,
    264         .comment-author a:hover,
    265         .comment-list .pingback a:hover,
    266         .comment-list .trackback a:hover,
    267         .comment-metadata a:hover,
    268         .comment-reply-title small a:hover,
    269         .widget a:hover,
    270         .widget-title a:hover,
    271         .widget_twentyfourteen_ephemera .entry-meta a:hover,
    272         .content-sidebar .widget a:hover,
    273         .content-sidebar .widget .widget-title a:hover,
    274         .content-sidebar .widget_twentyfourteen_ephemera .entry-meta a:hover,
    275         .site-info a:hover,
    276         .featured-content a:hover {
    277             color: ' . $accent_mid . ';
    278         }
    279 
    280         .page-links a:hover,
    281         .paging-navigation a:hover {
    282             border-color: ' . $accent_mid . ';
    283         }
    284 
    285         .entry-meta .tag-links a:hover:before {
    286             border-right-color: ' . $accent_mid . ';
    287         }
    288 
    289         @media screen and (min-width: 782px) {
    290             .primary-navigation ul ul a:hover,
    291             .primary-navigation ul ul li.focus > a {
    292                 background-color: ' . $accent_mid . ';
    293             }
    294         }
    295 
    296         @media screen and (min-width: 1008px) {
    297             .secondary-navigation ul ul a:hover,
    298             .secondary-navigation ul ul li.focus > a {
    299                 background-color: ' . $accent_mid . ';
    300             }
    301         }
    302 
    303         /* Generated "light" variant of custom accent color. */
    304         button:active,
    305         .contributor-posts-link:active,
    306         input[type="button"]:active,
    307         input[type="reset"]:active,
    308         input[type="submit"]:active,
    309         .widget input[type="button"]:active,
    310         .widget input[type="reset"]:active,
    311         .widget input[type="submit"]:active,
    312         .content-sidebar .widget input[type="button"]:active,
    313         .content-sidebar .widget input[type="reset"]:active,
    314         .content-sidebar .widget input[type="submit"]:active {
    315             background-color: ' . $accent_light . ';
    316         }
    317 
    318         .site-navigation .current_page_item > a,
    319         .site-navigation .current_page_ancestor > a,
    320         .site-navigation .current-menu-item > a,
    321         .site-navigation .current-menu-ancestor > a {
    322             color: ' . $accent_light . ';
    323         }';
    324 
    325     wp_add_inline_style( 'twentyfourteen-style', $css );
    326 }
    327 add_action( 'wp_enqueue_scripts', 'twentyfourteen_customizer_styles' );
    328 
    329 /**
    33061 * Add contextual help to the Themes and Post edit screens.
    33162 *
Note: See TracChangeset for help on using the changeset viewer.