Changeset 23568

Timestamp:

03/01/2013 05:14:59 PM (12 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' );
         } );
     } );