Changeset 23568

Timestamp:

03/01/2013 05:14:59 PM (14 years ago)

Author:

lancewillett

Message:

Twenty Twelve: better handling for cases where a background color is set to white or an empty value (like first run with no theme_mods set) and a background image is enabled, which resulted previously in a broken layout. Fixes #23586, props obenland.

Location:

trunk/wp-content/themes/twentytwelve

Files:

• functions.php (modified) (3 diffs)
• js/theme-customizer.js (modified) (1 diff)

trunk/wp-content/themes/twentytwelve/functions.php

@@ -384 +384 @@
 function twentytwelve_body_class( $classes ) {
         $background_color = get_background_color();
+        $background_image = get_background_image();
 
         if ( ! is_active_sidebar( 'sidebar-1' ) || is_page_template( 'page-templates/full-width.php' ) )
@@ -396 +397 @@
         }
 
-        if ( empty( $background_color ) )
-                $classes[] = 'custom-background-empty';
-        elseif ( in_array( $background_color, array( 'fff', 'ffffff' ) ) )
-                $classes[] = 'custom-background-white';
+        if ( empty( $background_image ) ) {
+                if ( empty( $background_color ) )
+                        $classes[] = 'custom-background-empty';
+                elseif ( in_array( $background_color, array( 'fff', 'ffffff' ) ) )
+                        $classes[] = 'custom-background-white';
+        }
 
         // Enable custom font class only if the font CSS is queued to load.
@@ -446 +449 @@
  */
 function twentytwelve_customize_preview_js() {
-        wp_enqueue_script( 'twentytwelve-customizer', get_template_directory_uri() . '/js/theme-customizer.js', array( 'customize-preview' ), '20120827', true );
+        wp_enqueue_script( 'twentytwelve-customizer', get_template_directory_uri() . '/js/theme-customizer.js', array( 'customize-preview' ), '20130301', true );
 }
 add_action( 'customize_preview_init', 'twentytwelve_customize_preview_js' );

trunk/wp-content/themes/twentytwelve/js/theme-customizer.js

@@ -19 +19 @@
         } );
 
-        // Hook into background color change and adjust body class value as needed.
+        // Hook into background color/image change and adjust body class value as needed.
         wp.customize( 'background_color', function( value ) {
                 value.bind( function( to ) {
-                        if ( '#ffffff' == to || '#fff' == to )
-                                $( 'body' ).addClass( 'custom-background-white' );
-                        else if ( '' == to )
-                                $( 'body' ).addClass( 'custom-background-empty' );
+                        var body = $( 'body' );
+
+                        if ( ( '#ffffff' == to || '#fff' == to ) && 'none' == body.css( 'background-image' ) )
+                                body.addClass( 'custom-background-white' );
+                        else if ( '' == to && 'none' == body.css( 'background-image' ) )
+                                body.addClass( 'custom-background-empty' );
                         else
-                                $( 'body' ).removeClass( 'custom-background-empty custom-background-white' );
+                                body.removeClass( 'custom-background-empty custom-background-white' );
+                } );
+        } );
+        wp.customize( 'background_image', function( value ) {
+                value.bind( function( to ) {
+                        var body = $( 'body' );
+
+                        if ( '' != to )
+                                body.removeClass( 'custom-background-empty custom-background-white' );
+                        else if ( 'rgb(255, 255, 255)' == body.css( 'background-color' ) )
+                                body.addClass( 'custom-background-white' );
+                        else if ( 'rgb(230, 230, 230)' == body.css( 'background-color' ) && '' == _wpCustomizeSettings.values.background_color )
+                                body.addClass( 'custom-background-empty' );
                 } );
         } );