Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Buttons:

- Update the install/initial configuration/repair screens buttons, props DrewAPicture
- Fix the welcome screen buttons and fine-tune the buttons css, props lessbloat

fixes #21598


git-svn-id: http://core.svn.wordpress.org/trunk@22314 1a063a9b-81f0-0310-95a4-ce76da25c4cd
  • Loading branch information...
commit efbc9d2336cf00ca500e7a69affbcb4df2d51381 1 parent 2677205
Andrew Ozz authored
View
26 wp-admin/css/ie.css
@@ -237,34 +237,44 @@ table.fixed td {
width: 98%;
}
-button,
+.button,
input[type="reset"],
input[type="button"],
input[type="submit"] {
- padding: 2px 8px;
+ padding: 0 8px;
+ line-height: 20px;
+ height: auto;
}
-button.button-large,
+.button.button-large,
input[type="reset"].button-large,
input[type="button"].button-large,
input[type="submit"].button-large {
- padding: 4px 12px;
+ padding: 0 10px;
+ line-height: 24px;
+ height: auto;
}
-button.button-small,
+.button.button-small,
input[type="reset"].button-small,
input[type="button"].button-small,
input[type="submit"].button-small {
- padding: 0 8px;
+ padding: 0 6px;
+ line-height: 16px;
+ height: auto;
}
a.button {
margin: 1px;
- padding: 3px 8px;
+ padding: 1px 9px 2px;
+}
+
+a.button.button-large {
+ padding: 1px 11px 2px;
}
a.button.button-small {
- padding: 1px 8px;
+ padding: 1px 7px 2px;
}
#screen-options-wrap {
View
44 wp-admin/css/install.css
@@ -70,49 +70,9 @@ abbr {
text-align: left;
padding: 0;
}
-
-.submit input,
-.button,
-.button-secondary {
- font-family: sans-serif;
- text-decoration: none;
- font-size: 14px !important;
- line-height: 16px;
- padding: 6px 12px;
- cursor: pointer;
- border: 1px solid #bbb;
- color: #464646;
- -webkit-border-radius: 15px;
- border-radius: 15px;
- -webkit-box-sizing: content-box;
- -moz-box-sizing: content-box;
- box-sizing: content-box;
- background: #f2f2f2;
- background-image: -webkit-gradient(linear, left bottom, left top, from(#ededed), to(#fff));
- background-image: -webkit-linear-gradient(bottom, #ededed, #fff);
- background-image: -moz-linear-gradient(bottom, #ededed, #fff);
- background-image: -o-linear-gradient(bottom, #ededed, #fff);
- background-image: linear-gradient(to top, #ededed, #fff);
-}
-
-.button:hover,
-.button-secondary:hover,
-.submit input:hover {
- color: #000;
- border-color: #666;
-}
-
-.button:active,
-.submit input:active,
-.button-secondary:active {
- background: #eee;
- background-image: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
- background-image: -webkit-linear-gradient(top, #ededed, #fff);
- background-image: -moz-linear-gradient(top, #ededed, #fff);
- background-image: -o-linear-gradient(top, #ededed, #fff);
- background-image: linear-gradient(to bottom, #ededed, #fff);
+.step .button-large {
+ font-size: 14px;
}
-
textarea {
border: 1px solid #dfdfdf;
-webkit-border-radius: 3px;
View
8 wp-admin/css/wp-admin.css
@@ -2262,9 +2262,11 @@ html.wp-toolbar {
}
.welcome-panel .welcome-button {
- margin: -9px 0 3px;
- padding: 1em 3em;
- font: normal 15px/1 sans-serif;
+ font: normal 15px sans-serif;
+ height: 46px;
+ line-height: 44px;
+ margin: -9px 0 3px;
+ padding: 0 36px;
}
.welcome-panel-content {
View
11 wp-admin/install.php
@@ -58,7 +58,10 @@ function display_header() {
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php _e( 'WordPress &rsaquo; Installation' ); ?></title>
- <?php wp_admin_css( 'install', true ); ?>
+ <?php
+ wp_admin_css( 'install', true );
+ wp_admin_css( 'buttons', true );
+ ?>
</head>
<body<?php if ( is_rtl() ) echo ' class="rtl"'; ?>>
<h1 id="logo"><img alt="WordPress" src="images/wordpress-logo.png?ver=20120216" /></h1>
@@ -134,7 +137,7 @@ function display_setup_form( $error = null ) {
<td colspan="2"><label><input type="checkbox" name="blog_public" value="1" <?php checked( $blog_public ); ?> /> <?php _e( 'Allow search engines to index this site.' ); ?></label></td>
</tr>
</table>
- <p class="step"><input type="submit" name="Submit" value="<?php esc_attr_e( 'Install WordPress' ); ?>" class="button" /></p>
+ <p class="step"><input type="submit" name="Submit" value="<?php esc_attr_e( 'Install WordPress' ); ?>" class="button button-large" /></p>
</form>
<?php
} // end display_setup_form()
@@ -142,7 +145,7 @@ function display_setup_form( $error = null ) {
// Let's check to make sure WP isn't already installed.
if ( is_blog_installed() ) {
display_header();
- die( '<h1>' . __( 'Already Installed' ) . '</h1><p>' . __( 'You appear to have already installed WordPress. To reinstall please clear your old database tables first.' ) . '</p><p class="step"><a href="../wp-login.php" class="button">' . __('Log In') . '</a></p></body></html>' );
+ die( '<h1>' . __( 'Already Installed' ) . '</h1><p>' . __( 'You appear to have already installed WordPress. To reinstall please clear your old database tables first.' ) . '</p><p class="step"><a href="../wp-login.php" class="button button-large">' . __( 'Log In' ) . '</a></p></body></html>' );
}
$php_version = phpversion();
@@ -241,7 +244,7 @@ function display_setup_form( $error = null ) {
</tr>
</table>
-<p class="step"><a href="../wp-login.php" class="button"><?php _e( 'Log In' ); ?></a></p>
+<p class="step"><a href="../wp-login.php" class="button button-large"><?php _e( 'Log In' ); ?></a></p>
<?php
}
View
9 wp-admin/maint/repair.php
@@ -16,7 +16,10 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php _e( 'WordPress &rsaquo; Database Repair' ); ?></title>
- <?php wp_admin_css( 'install', true ); ?>
+ <?php
+ wp_admin_css( 'install', true );
+ wp_admin_css( 'buttons', true );
+ ?>
</head>
<body>
<h1 id="logo"><img alt="WordPress" src="../images/wordpress-logo.png?ver=20120216" /></h1>
@@ -102,9 +105,9 @@
else
echo '<p>' . __( 'WordPress can automatically look for some common database problems and repair them. Repairing can take a while, so please be patient.' ) . '</p>';
?>
- <p class="step"><a class="button" href="repair.php?repair=1"><?php _e( 'Repair Database' ); ?></a></p>
+ <p class="step"><a class="button button-large" href="repair.php?repair=1"><?php _e( 'Repair Database' ); ?></a></p>
<p><?php _e( 'WordPress can also attempt to optimize the database. This improves performance in some situations. Repairing and optimizing the database can take a long time and the database will be locked while optimizing.' ); ?></p>
- <p class="step"><a class="button" href="repair.php?repair=2"><?php _e( 'Repair and Optimize Database' ); ?></a></p>
+ <p class="step"><a class="button button-large" href="repair.php?repair=2"><?php _e( 'Repair and Optimize Database' ); ?></a></p>
<?php
}
?>
View
11 wp-admin/setup-config.php
@@ -96,6 +96,7 @@ function setup_config_display_header() {
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php _e( 'WordPress &rsaquo; Setup Configuration File' ); ?></title>
<link rel="stylesheet" href="css/install.css?ver=<?php echo preg_replace( '/[^0-9a-z\.-]/i', '', $wp_version ); ?>" type="text/css" />
+<link rel="stylesheet" href="../wp-includes/css/buttons.css?ver=<?php echo preg_replace( '/[^0-9a-z\.-]/i', '', $wp_version ); ?>" type="text/css" />
</head>
<body<?php if ( is_rtl() ) echo ' class="rtl"'; ?>>
@@ -119,7 +120,7 @@ function setup_config_display_header() {
<p><strong><?php _e( "If for any reason this automatic file creation doesn&#8217;t work, don&#8217;t worry. All this does is fill in the database information to a configuration file. You may also simply open <code>wp-config-sample.php</code> in a text editor, fill in your information, and save it as <code>wp-config.php</code>." ); ?></strong></p>
<p><?php _e( "In all likelihood, these items were supplied to you by your Web Host. If you do not have this information, then you will need to contact them before you can continue. If you&#8217;re all ready&hellip;" ); ?></p>
-<p class="step"><a href="setup-config.php?step=1<?php if ( isset( $_GET['noapi'] ) ) echo '&amp;noapi'; ?>" class="button"><?php _e( 'Let&#8217;s go!' ); ?></a></p>
+<p class="step"><a href="setup-config.php?step=1<?php if ( isset( $_GET['noapi'] ) ) echo '&amp;noapi'; ?>" class="button button-large"><?php _e( 'Let&#8217;s go!' ); ?></a></p>
<?php
break;
@@ -156,7 +157,7 @@ function setup_config_display_header() {
</tr>
</table>
<?php if ( isset( $_GET['noapi'] ) ) { ?><input name="noapi" type="hidden" value="1" /><?php } ?>
- <p class="step"><input name="submit" type="submit" value="<?php echo htmlspecialchars( __( 'Submit' ), ENT_QUOTES ); ?>" class="button" /></p>
+ <p class="step"><input name="submit" type="submit" value="<?php echo htmlspecialchars( __( 'Submit' ), ENT_QUOTES ); ?>" class="button button-large" /></p>
</form>
<?php
break;
@@ -165,7 +166,7 @@ function setup_config_display_header() {
foreach ( array( 'dbname', 'uname', 'pwd', 'dbhost', 'prefix' ) as $key )
$$key = trim( stripslashes( $_POST[ $key ] ) );
- $tryagain_link = '</p><p class="step"><a href="setup-config.php?step=1" onclick="javascript:history.go(-1);return false;" class="button">' . __( 'Try again' ) . '</a>';
+ $tryagain_link = '</p><p class="step"><a href="setup-config.php?step=1" onclick="javascript:history.go(-1);return false;" class="button button-large">' . __( 'Try again' ) . '</a>';
if ( empty( $prefix ) )
wp_die( __( '<strong>ERROR</strong>: "Table Prefix" must not be empty.' . $tryagain_link ) );
@@ -264,7 +265,7 @@ function get_bloginfo() {
}
?></textarea>
<p><?php _e( 'After you&#8217;ve done that, click &#8220;Run the install.&#8221;' ); ?></p>
-<p class="step"><a href="install.php" class="button"><?php _e( 'Run the install' ); ?></a></p>
+<p class="step"><a href="install.php" class="button button-large"><?php _e( 'Run the install' ); ?></a></p>
<script>
(function(){
var el=document.getElementById('wp-config');
@@ -284,7 +285,7 @@ function get_bloginfo() {
?>
<p><?php _e( "All right sparky! You&#8217;ve made it through this part of the installation. WordPress can now communicate with your database. If you are ready, time now to&hellip;" ); ?></p>
-<p class="step"><a href="install.php" class="button"><?php _e( 'Run the install' ); ?></a></p>
+<p class="step"><a href="install.php" class="button button-large"><?php _e( 'Run the install' ); ?></a></p>
<?php
endif;
break;
View
18 wp-includes/css/buttons.css
@@ -39,12 +39,12 @@ TABLE OF CONTENTS:
.button-primary,
.button-secondary {
display: inline-block;
- vertical-align: middle;
text-decoration: none;
font-size: 12px;
- line-height: 1.45em;
+ line-height: 23px;
+ height: 24px;
margin: 0;
- padding: 3px 10px;
+ padding: 0 10px 1px;
cursor: pointer;
border-width: 1px;
border-style: solid;
@@ -61,18 +61,24 @@ button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
- border: 1px solid transparent;
+ border-width: 1px 0;
+ border-style: solid none;
+ border-color: transparent;
padding: 0;
}
.button.button-large,
.button-group.button-large .button {
- padding: 5px 12px;
+ height: 30px;
+ line-height: 28px;
+ padding: 0 12px 2px;
}
.button.button-small,
.button-group.button-small .button {
- padding: 2px 8px;
+ height: 21px;
+ line-height: 20px;
+ padding: 0 8px 1px;
}
.button:active {
View
86 wp-includes/functions.php
@@ -2126,42 +2126,72 @@ function _default_wp_die_handler( $message, $title = '', $args = array() ) {
a:hover {
color: #D54E21;
}
-
.button {
- font-family: sans-serif;
+ display: inline-block;
text-decoration: none;
- font-size: 14px !important;
- line-height: 16px;
- padding: 6px 12px;
+ font-size: 14px;
+ line-height: 23px;
+ height: 24px;
+ margin: 0;
+ padding: 0 10px 1px;
cursor: pointer;
- border: 1px solid #bbb;
- color: #464646;
- -webkit-border-radius: 15px;
- border-radius: 15px;
- -moz-box-sizing: content-box;
- -webkit-box-sizing: content-box;
- box-sizing: content-box;
- background-color: #f5f5f5;
- background-image: -ms-linear-gradient(top, #ffffff, #f2f2f2);
- background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2);
- background-image: -o-linear-gradient(top, #ffffff, #f2f2f2);
- background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f2f2f2));
- background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2);
- background-image: linear-gradient(top, #ffffff, #f2f2f2);
+ border-width: 1px;
+ border-style: solid;
+ -webkit-border-radius: 3px;
+ border-radius: 3px;
+ white-space: nowrap;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ background: #f3f3f3;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#f4f4f4));
+ background-image: -webkit-linear-gradient(top, #fefefe, #f4f4f4);
+ background-image: -moz-linear-gradient(top, #fefefe, #f4f4f4);
+ background-image: -o-linear-gradient(top, #fefefe, #f4f4f4);
+ background-image: linear-gradient(to bottom, #fefefe, #f4f4f4);
+ border-color: #bbb;
+ color: #333;
+ text-shadow: 0 1px 0 #fff;
+ }
+
+ .button.button-large {
+ height: 29px;
+ line-height: 28px;
+ padding: 0 12px;
}
- .button:hover {
- color: #000;
- border-color: #666;
+ .button:hover,
+ .button:focus {
+ background: #f3f3f3;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f3f3f3));
+ background-image: -webkit-linear-gradient(top, #fff, #f3f3f3);
+ background-image: -moz-linear-gradient(top, #fff, #f3f3f3);
+ background-image: -ms-linear-gradient(top, #fff, #f3f3f3);
+ background-image: -o-linear-gradient(top, #fff, #f3f3f3);
+ background-image: linear-gradient(to bottom, #fff, #f3f3f3);
+ border-color: #999;
+ color: #222;
+ }
+
+ .button:focus {
+ -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.2);
+ box-shadow: 1px 1px 1px rgba(0,0,0,.2);
}
.button:active {
- background-image: -ms-linear-gradient(top, #f2f2f2, #ffffff);
- background-image: -moz-linear-gradient(top, #f2f2f2, #ffffff);
- background-image: -o-linear-gradient(top, #f2f2f2, #ffffff);
- background-image: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#ffffff));
- background-image: -webkit-linear-gradient(top, #f2f2f2, #ffffff);
- background-image: linear-gradient(top, #f2f2f2, #ffffff);
+ outline: none;
+ background: #eee;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#f4f4f4), to(#fefefe));
+ background-image: -webkit-linear-gradient(top, #f4f4f4, #fefefe);
+ background-image: -moz-linear-gradient(top, #f4f4f4, #fefefe);
+ background-image: -ms-linear-gradient(top, #f4f4f4, #fefefe);
+ background-image: -o-linear-gradient(top, #f4f4f4, #fefefe);
+ background-image: linear-gradient(to bottom, #f4f4f4, #fefefe);
+ border-color: #999;
+ color: #333;
+ text-shadow: 0 -1px 0 #fff;
+ -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
+ box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
}
<?php if ( 'rtl' == $text_direction ) : ?>
View
2  wp-load.php
@@ -57,7 +57,7 @@
$die = __( "There doesn't seem to be a <code>wp-config.php</code> file. I need this before we can get started." ) . '</p>';
$die .= '<p>' . __( "Need more help? <a href='http://codex.wordpress.org/Editing_wp-config.php'>We got it</a>." ) . '</p>';
$die .= '<p>' . __( "You can create a <code>wp-config.php</code> file through a web interface, but this doesn't work for all server setups. The safest way is to manually create the file." ) . '</p>';
- $die .= '<p><a href="' . $path . '" class="button">' . __( "Create a Configuration File" ) . '</a>';
+ $die .= '<p><a href="' . $path . '" class="button button-large">' . __( "Create a Configuration File" ) . '</a>';
wp_die( $die, __( 'WordPress &rsaquo; Error' ) );
}
Please sign in to comment.
Something went wrong with that request. Please try again.