Ticket #19616: 19616.diff

wp-admin/js/custom-background.dev.js

@@ -3 +3 @@
 function pickColor(color) {
         farbtastic.setColor(color);
         jQuery('#background-color').val(color);
-        jQuery('#custom-background-image').css('background-color', color);
+        jQuery('#custom-background-image,#link-color-example').css('background-color', color);
         if ( color && color !== '#' )
                 jQuery('#clearcolor').show();
         else

wp-admin/css/colors-classic.dev.css

@@ -25 +25 @@
         background-color: #fff;
 }
 
+#link-color-example,
 * html input,
 * html .widget {
         border-color: #dfdfdf;

wp-admin/css/colors-fresh.dev.css

@@ -25 +25 @@
         background-color: #fff;
 }
 
+#link-color-example,
 textarea,
 input[type="text"],
 input[type="password"],

wp-admin/css/wp-admin.dev.css

@@ -447 +447 @@
         padding: 0;
 }
 
+#link-color-example,
 .widefat,
 div.updated,
 div.error,
@@ -4323 +4324 @@
         margin: 2.5em 0 8px;
 }
 
+#link-color-example {
+        margin: 0 7px 0 3px;
+        padding: 4px 14px;
+}
 
+
 /*------------------------------------------------------------------------------
   16.1 - Custom Header Screen
 ------------------------------------------------------------------------------*/

wp-admin/custom-background.php

@@ -306 +306 @@
 <td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Color' ); ?></span></legend>
 <?php $show_clear = get_background_color() ? '' : ' style="display:none"'; ?>
 <input type="text" name="background-color" id="background-color" value="#<?php echo esc_attr(get_background_color()) ?>" />
-<a class="hide-if-no-js" href="#" id="pickcolor"><?php _e('Select a Color'); ?></a> <span<?php echo $show_clear; ?> class="hide-if-no-js" id="clearcolor"> (<a href="#"><?php _e( 'Clear' ); ?></a>)</span>
+<a href="#" class="pickcolor hide-if-no-js" id="link-color-example"></a>
+<input type="button" class="pickcolor button hide-if-no-js" id="pickcolor" value="<?php esc_attr_e( 'Select a Color' ); ?>" />
+<span<?php echo $show_clear; ?> class="hide-if-no-js" id="clearcolor"> (<a href="#"><?php _e( 'Clear' ); ?></a>)</span>
 <div id="colorPickerDiv" style="z-index: 100; background:#eee; border:1px solid #ccc; position:absolute; display:none;"></div>
 </fieldset></td>
 </tr>

wp-admin/custom-header.php

@@ -339 +339 @@
                 $('#name').css('color', color);
                 $('#desc').css('color', color);
                 $('#text-color').val(color);
+                $('#link-color-example').css('background-color', color);
                 farbtastic.setColor(color);
+                if ( color && color !== '#' )
+                        jQuery('#clearcolor').show();
+                else
+                        jQuery('#clearcolor').hide();
         }
 
         function toggle_text() {
@@ -364 +369 @@
                         $('#color-picker').show();
                 });
 
+                jQuery('#clearcolor a').click( function(e) {
+                        pickColor('');
+                        e.preventDefault();
+                });
+
                 $('#display-header-text').click( toggle_text );
 
                 $('#defaultcolor').click(function() {
@@ -395 +405 @@
                 <?php if ( display_header_text() ) { ?>
                 pickColor('#<?php echo get_header_textcolor(); ?>');
                 <?php } else { ?>
-                toggle_text();          
+                toggle_text();
                 <?php } ?>
         });
 })(jQuery);
@@ -634 +644 @@
 <?php else : ?>
                 <input type="text" name="text-color" id="text-color" value="#<?php echo esc_attr( get_theme_support( 'custom-header', 'default-text-color' ) ); ?>" />
 <?php endif; ?>
-                <a href="#" class="hide-if-no-js" id="pickcolor"><?php _e( 'Select a Color' ); ?></a>
+                <a href="#" class="pickcolor hide-if-no-js" id="link-color-example"></a>
+                <input type="button" class="pickcolor button hide-if-no-js" id="pickcolor" value="<?php esc_attr_e( 'Select a Color' ); ?>" />
+                <span<?php echo $show_clear; ?> class="hide-if-no-js" id="clearcolor"> (<a href="#"><?php _e( 'Clear' ); ?></a>)</span>
         </p>
         <div id="color-picker" style="z-index: 100; background:#eee; border:1px solid #ccc; position:absolute; display:none;"></div>
 </td>