customizer.js 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. /**
  2. * Theme Customizer enhancements for a better user experience.
  3. *
  4. * Contains handlers to make Theme Customizer preview reload changes asynchronously.
  5. */
  6. ( function( $ ) {
  7. // Site title and description.
  8. wp.customize( 'blogname', function( value ) {
  9. value.bind( function( to ) {
  10. $( '.site-title a' ).text( to );
  11. } );
  12. } );
  13. wp.customize( 'blogdescription', function( value ) {
  14. value.bind( function( to ) {
  15. $( '.site-description' ).text( to );
  16. } );
  17. } );
  18. // Header text color.
  19. wp.customize( 'header_textcolor', function( value ) {
  20. value.bind( function( to ) {
  21. if ( 'blank' === to ) {
  22. $( '.site-title, .site-description' ).css( {
  23. 'clip': 'rect(1px, 1px, 1px, 1px)',
  24. 'position': 'absolute'
  25. } );
  26. $( '.site-branding' ).css( {
  27. 'text-align': 'center'
  28. } );
  29. $( '.site-logo' ).css( {
  30. 'float': 'none',
  31. 'margin-top': '0',
  32. 'margin-bottom': '3.5px'
  33. } );
  34. } else if ( false === to ) {
  35. $( '.site-title a, .site-description' ).css( {
  36. 'color': ''
  37. } );
  38. } else {
  39. // If reset to default colour, change description back to grey
  40. if ( '#362e77' === to ) {
  41. $( '.site-title a' ).css( {
  42. 'color': to
  43. } );
  44. $( '.site-description' ).css({
  45. 'color': '#999999'
  46. } );
  47. } else {
  48. $( '.site-title a, .site-description' ).css( {
  49. 'color': to
  50. } );
  51. }
  52. $( '.site-title, .site-description' ).css( {
  53. 'clip': 'auto',
  54. 'position': 'relative'
  55. } );
  56. $( '.site-branding' ).css( {
  57. 'text-align': 'left'
  58. } );
  59. $( '.site-logo' ).css( {
  60. 'float': 'left',
  61. 'margin-top': '',
  62. 'margin-bottom': ''
  63. } );
  64. }
  65. } );
  66. } );
  67. } )( jQuery );