Changeset 17754

Timestamp:

04/28/2011 07:01:51 PM (12 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 )