"Display Header Text" In customizer/preview doesn't always work

Resolved Maximum_Results
(@maximum_results)

11 years ago

The issue is when the TwentyEleven theme is used with a child theme, and the child them styles the #site-title, #site-title a and/or #site-description elements.

If these elements are styled with positioning css (position:absolute, top, left, or other positioning elements), they will go away when you uncheck the “Display header text” box, but if you check the box again, the elements come back with css for ‘position:relative’ which is wrong if the style.css for the child them specifies ‘position:absolute’ (or any other value for ‘position’

Viewing 1 replies (of 1 total)

Thread Starter

(@maximum_results)

Answering my own question, in Version: 2.1 of the TwentyEleven theme, in the …/wp-content/themes/twenty-eleven/inc/theme-customizer.js file, this is the code causing the problem:

// Header text color
	wp.customize( 'header_textcolor', function( value ) {
		value.bind( function( to ) {
			if ( 'blank' === to ) {
				$( '#site-title, #site-title a, #site-description' ).css( {
					'clip': 'rect(1px, 1px, 1px, 1px)',
					'position': 'absolute'
				} );
			} else {
				$( '#site-title, #site-title a, #site-description' ).css( {
					'clip': 'auto',
					'color': to,
					'position': 'relative'
				} );
			}
		} );
	} );

I changed that code to call the jQuery hide() and show() methods instead of messing with the position and clip css.

Here’s what I have now.

// Header text color
	wp.customize( 'header_textcolor', function( value ) {
		value.bind( function( to ) {
			if ( 'blank' === to ) {
				$( '#site-title, #site-title a, #site-description' ).hide();
			} else {
				$( '#site-title, #site-title a, #site-description' ).show();
				$( '#site-title, #site-title a, #site-description' ).css( 'color', to );
			}
		} );
	} );

This works. But I had to change the file in the parent theme to make it work.
Perhaps this change can be incorporated into the next update of the TwentyEleven theme.

Viewing 1 replies (of 1 total)

The topic ‘"Display Header Text" In customizer/preview doesn't always work’ is closed to new replies.