Changeset 17754

Timestamp:

04/28/2011 07:01:51 PM (15 years ago)

Author:

lancewillett

Message:

Twenty Eleven: theme options - see #17198

• Make color swatch clickable to open palette
• Change color picker link to a submit button to match existing UI

Location:

trunk/wp-content/themes/twentyeleven/inc

Files:

• theme-options.css (modified) (1 diff)
• theme-options.js (modified) (2 diffs)
• theme-options.php (modified) (2 diffs)

trunk/wp-content/themes/twentyeleven/inc/theme-options.css

@@ -22 +22 @@
 }
 #link-color-example {
-        padding: 4px 14px;
-        margin: 0 7px 0 3px;
         -moz-border-radius: 4px;
-        -khtml-border-radius: 4px;
         -webkit-border-radius: 4px;
         border-radius: 4px;
         border: 1px solid #dfdfdf;
+        margin: 0 7px 0 3px;
+        padding: 4px 14px;
 }

trunk/wp-content/themes/twentyeleven/inc/theme-options.js

@@ -6 +6 @@
                 $('#link-color').val(a);
                 $('#link-color-example').css('background-color', a);
-        }
+        };
 
         $(document).ready( function() {
@@ -13 +13 @@
                 pickColor( $('#link-color').val() );
 
-                $('#pickcolor').click( function(e) {
+                $('.pickcolor').click( function(e) {
                         $('#colorPickerDiv').show();
                         e.preventDefault();

trunk/wp-content/themes/twentyeleven/inc/theme-options.php

@@ -193 +193 @@
                                                 <fieldset><legend class="screen-reader-text"><span><?php _e( 'Link Color', 'twentyeleven' ); ?></span></legend>
                                                         <input type="text" name="twentyeleven_theme_options[link_color]" id="link-color" value="<?php echo esc_attr( $options['link_color'] ); ?>" />
-                                                        <span id="link-color-example"></span> <a class="hide-if-no-js" href="#" id="pickcolor"><?php _e( 'Select a Color', 'twentyeleven' ); ?></a>
+                                                        <a href="#" class="pickcolor hide-if-no-js" id="link-color-example"></a>
+                                                        <input type="button" class="pickcolor button hide-if-no-js" value="<?php esc_attr_e( 'Select a Color', 'twentyeleven' ); ?>">
                                                         <div id="colorPickerDiv" style="z-index: 100; background:#eee; border:1px solid #ccc; position:absolute; display:none;"></div>
                                                         <br />
@@ -284 +285 @@
 
         $default_options = twentyeleven_get_default_theme_options();
-        
+
         // Don't do anything if the current link color is the default.
         if ( $default_options['link_color'] == $link_color )