Theme Customizer: Improve sidebar CSS. Display most elements inline, refine padding/line-heights. see #19910.

git-svn-id: http://svn.automattic.com/wordpress/trunk@20181 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
koopersmith 2012-03-15 05:30:11 +00:00
parent 88fbf34f8f
commit 6bda61536e
4 changed files with 84 additions and 23 deletions

View File

@ -72,7 +72,7 @@ class WP_Customize_Section {
<?php endif; ?>
<?php foreach ( $this->settings as $setting ) : ?>
<li id="customize-control-<?php echo esc_attr( $setting->id ); ?>" class="customize-control">
<li id="customize-control-<?php echo esc_attr( $setting->id ); ?>" class="customize-control customize-control-<?php echo esc_attr( $setting->control ); ?>">
<?php $setting->_render(); ?>
</li>
<?php endforeach; ?>

View File

@ -336,7 +336,8 @@ class WP_Customize_Setting {
switch( $this->control ) {
case 'text':
?>
<label><?php echo esc_html( $this->label ); ?><br/>
<label>
<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
<input type="text" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->name(); ?> />
</label>
<?php
@ -344,7 +345,7 @@ class WP_Customize_Setting {
case 'color':
?>
<label>
<span><?php echo esc_html( $this->label ); ?></span>
<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
<div class="color-picker">
<input type="hidden" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->name(); ?> />
<a href="#"></a>
@ -364,8 +365,8 @@ class WP_Customize_Setting {
case 'checkbox':
?>
<label>
<input type="checkbox" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->name(); checked( $this->value() ); ?> />
<?php echo esc_html( $this->label ); ?>
<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
<input type="checkbox" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->name(); checked( $this->value() ); ?> class="customize-control-content" />
</label>
<?php
break;
@ -373,7 +374,9 @@ class WP_Customize_Setting {
if ( empty( $this->choices ) )
return;
echo esc_html( $this->label ) . '<br/>';
?>
<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
<?php
foreach ( $this->choices as $value => $label ) :
?>
<label>
@ -388,21 +391,26 @@ class WP_Customize_Setting {
return;
?>
<label><?php echo esc_html( $this->label ); ?><br/>
<select <?php $this->name(); ?>>
<?php
foreach ( $this->choices as $value => $label )
echo '<option value="' . esc_attr( $value ) . '"' . selected( $this->value(), $value, false ) . '>' . $label . '</option>';
?>
</select>
<label>
<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
<select <?php $this->name(); ?> class="customize-control-content">
<?php
foreach ( $this->choices as $value => $label )
echo '<option value="' . esc_attr( $value ) . '"' . selected( $this->value(), $value, false ) . '>' . $label . '</option>';
?>
</select>
</label>
<?php
break;
case 'upload':
?>
<label><?php echo esc_html( $this->label ); ?><br/>
<input type="hidden" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->name(); ?> />
<a href="#" class="button-secondary upload"><?php _e( 'Upload' ); ?></a>
<a href="#" class="remove"><?php _e( 'Remove' ); ?></a>
<label>
<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
<div>
<input type="hidden" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->name(); ?> />
<a href="#" class="button-secondary upload"><?php _e( 'Upload' ); ?></a>
<a href="#" class="remove"><?php _e( 'Remove' ); ?></a>
</div>
</label>
<?php
break;

View File

@ -588,7 +588,7 @@ final class WP_Customize {
) );
$this->add_setting( 'page_on_front', array(
'label' => __( 'Front page:' ),
'label' => __( 'Front page' ),
// 'theme_supports' => 'static-front-page',
'section' => 'static_front_page',
'control' => 'dropdown-pages',
@ -597,7 +597,7 @@ final class WP_Customize {
) );
$this->add_setting( 'page_for_posts', array(
'label' => __( 'Posts page:' ),
'label' => __( 'Posts page' ),
// 'theme_supports' => 'static-front-page',
'section' => 'static_front_page',
'control' => 'dropdown-pages',

View File

@ -31,6 +31,7 @@ body {
.customize-section-content {
display: none;
padding: 0 20px 15px;
overflow: hidden;
}
.customize-section.open .customize-section-content {
@ -107,6 +108,62 @@ body {
margin: 0;
}
.customize-control {
float: left;
clear: both;
}
.customize-control-title {
clear: left;
float: left;
min-width: 110px;
margin-right: 10px;
line-height: 28px;
}
.customize-control-text input,
.customize-control-select select,
.customize-control-checkbox input,
.customize-control-color .color-picker,
.customize-control-upload div {
float: left;
clear: right;
line-height: 28px;
}
.customize-control-text input {
width: 138px;
line-height: 18px;
margin: 1px 1px 5px;
}
.customize-control-select select {
width: 138px;
height: 28px;
line-height: 28px;
}
.customize-control-checkbox input {
margin-top: 8px;
}
.customize-control-radio {
padding: 10px 0;
}
.customize-control-radio .customize-control-title {
margin-bottom: 0;
line-height: 22px;
}
.customize-control-radio label {
float: left;
clear: both;
line-height: 20px;
}
.customize-control-radio input {
margin-right: 5px;
}
#customize-preview {
position: fixed;
left: 300px;
@ -188,10 +245,6 @@ body {
* Color Picker
*/
.customize-section .color-picker {
margin-top: 4px;
}
.customize-section .color-picker a {
display: block;
height: 20px;