diff --git src/wp-content/themes/twentyseventeen/assets/css/ie8.css src/wp-content/themes/twentyseventeen/assets/css/ie8.css index 83342ba..624687b 100644 --- src/wp-content/themes/twentyseventeen/assets/css/ie8.css +++ src/wp-content/themes/twentyseventeen/assets/css/ie8.css @@ -61,11 +61,13 @@ img { } .has-header-image.twentyseventeen-front-page .custom-header, -.has-header-image.home.blog .custom-header { +.has-header-video.twentyseventeen-front-page .custom-header, +.has-header-image.home.blog .custom-header, +.has-header-video.home.blog .custom-header { display: block; } -.custom-header-image { +.custom-header-media { background-position: bottom center; } @@ -74,7 +76,9 @@ img { } .has-header-image.twentyseventeen-front-page .site-branding, -.has-header-image.home.blog .site-branding { +.has-header-video.twentyseventeen-front-page .site-branding, +.has-header-image.home.blog .site-branding, +.has-header-video.home.blog .site-branding { bottom: 0; display: block; left: 0; @@ -84,8 +88,8 @@ img { width: 100%; } -.has-header-image .custom-header-image img, -.has-header-image .custom-header-image video { +.has-header-image .custom-header-media img, +.has-header-video .custom-header-media video { left: 0; top: 0; } @@ -135,20 +139,24 @@ img { /* Front Page */ .twentyseventeen-front-page.has-header-image .custom-header, +.twentyseventeen-front-page.has-header-video .custom-header, .blog.home.has-header-image .custom-header, +.blog.home.has-header-video .custom-header, .panel-image { height: 800px; max-height: 800px; padding-top: 0; } -.twentyseventeen-front-page .custom-header-image, -.blog.home .custom-header-image { +.twentyseventeen-front-page .custom-header-media, +.blog.home .custom-header-media { background-position: center center; } .twentyseventeen-front-page.has-header-image .site-branding, -.home.blog.has-header-image .site-branding { +.twentyseventeen-front-page.has-header-video .site-branding, +.home.blog.has-header-image .site-branding, +.home.blog.has-header-video .site-branding { bottom: 20px; position: absolute; width: 100%; @@ -210,7 +218,9 @@ ol.children .children { /* RTL Styles */ .rtl .has-header-image.twentyseventeen-front-page .site-branding, -.rtl .has-header-image.home.blog .site-branding { +.rtl .has-header-video.twentyseventeen-front-page .site-branding, +.rtl .has-header-image.home.blog .site-branding, +.rtl .has-header-video.home.blog .site-branding { left: auto; right: 0; } diff --git src/wp-content/themes/twentyseventeen/assets/css/ie9.css src/wp-content/themes/twentyseventeen/assets/css/ie9.css index 24c8905..9f8f766 100644 --- src/wp-content/themes/twentyseventeen/assets/css/ie9.css +++ src/wp-content/themes/twentyseventeen/assets/css/ie9.css @@ -4,22 +4,26 @@ Description: IE9 specific styles. */ .has-header-image.twentyseventeen-front-page .custom-header, -.has-header-image.home.blog .custom-header { +.has-header-video.twentyseventeen-front-page .custom-header, +.has-header-image.home.blog .custom-header, +.has-header-video.home.blog .custom-header { height: 300px; } -.has-header-image .custom-header-image img, -.has-header-image .custom-header-image video, -.has-header-image .custom-header-image iframe { +.has-header-image .custom-header-media img, +.has-header-video .custom-header-media video, +.has-header-video .custom-header-media iframe { min-width: 100%; } @media screen and (min-width: 30em) { .has-header-image.twentyseventeen-front-page .custom-header, + .has-header-video.twentyseventeen-front-page .custom-header, .has-header-image.home.blog .custom-header, - .twentyseventeen-front-page.has-header-image .custom-header-image, - .home.blog.has-header-image .custom-header-image, + .has-header-video.home.blog .custom-header, + .twentyseventeen-front-page.has-header-image .custom-header-media, + .home.blog.has-header-image .custom-header-media, .panel-image { height: 700px; } @@ -28,9 +32,11 @@ Description: IE9 specific styles. @media screen and (min-width: 48em) { .has-header-image.twentyseventeen-front-page .custom-header, + .has-header-video.twentyseventeen-front-page .custom-header, .has-header-image.home.blog .custom-header, - .twentyseventeen-front-page.has-header-image .custom-header-image, - .home.blog.has-header-image .custom-header-image, + .has-header-video.home.blog .custom-header, + .twentyseventeen-front-page.has-header-image .custom-header-media, + .home.blog.has-header-image .custom-header-media, .panel-image { height: 1000px; } diff --git src/wp-content/themes/twentyseventeen/assets/js/customize-preview.js src/wp-content/themes/twentyseventeen/assets/js/customize-preview.js index 651e034..9105c0a 100644 --- src/wp-content/themes/twentyseventeen/assets/js/customize-preview.js +++ src/wp-content/themes/twentyseventeen/assets/js/customize-preview.js @@ -123,11 +123,17 @@ $.each( [ 'external_header_video', 'header_image', 'header_video' ], function( index, settingId ) { wp.customize( settingId, function( setting ) { setting.bind(function() { - if ( hasHeaderImage() || ( hasHeaderVideo() && $( 'body' ).hasClass( 'twentyseventeen-front-page' ) ) ) { + if ( hasHeaderImage() ) { $( document.body ).addClass( 'has-header-image' ); } else { $( document.body ).removeClass( 'has-header-image' ); } + + if ( hasHeaderVideo() ) { + $( document.body ).addClass( 'has-header-video' ); + } else { + $( document.body ).removeClass( 'has-header-video' ); + } } ); } ); } ); diff --git src/wp-content/themes/twentyseventeen/assets/js/global.js src/wp-content/themes/twentyseventeen/assets/js/global.js index cb8a6ec..cf1b3a5 100644 --- src/wp-content/themes/twentyseventeen/assets/js/global.js +++ src/wp-content/themes/twentyseventeen/assets/js/global.js @@ -4,7 +4,7 @@ // Variables and DOM Caching. var $body = $( 'body' ), $customHeader = $body.find( '.custom-header' ), - $customHeaderImage = $customHeader.find( '.custom-header-image' ), + $customHeaderMedia = $customHeader.find( '.custom-header-media' ), $branding = $customHeader.find( '.site-branding' ), $navigation = $body.find( '.navigation-top' ), $navWrap = $navigation.find( '.wrap' ), @@ -65,7 +65,7 @@ if ( navIsNotTooTall ) { // When there's a custom header image, the header offset includes the height of the navigation. - if ( isFrontPage && $customHeaderImage.length ) { + if ( isFrontPage && $customHeaderMedia.length ) { headerOffset = $customHeader.innerHeight() - navigationOuterHeight; } else { headerOffset = $customHeader.innerHeight(); @@ -242,4 +242,9 @@ setTimeout( adjustHeaderHeight, 1000 ); }); + // Add header video class after the video is loaded. + $( document ).on( 'wp-custom-header-video-loaded', function() { + $body.addClass( 'has-header-video' ); + }); + })( jQuery ); diff --git src/wp-content/themes/twentyseventeen/inc/color-patterns.php src/wp-content/themes/twentyseventeen/inc/color-patterns.php index c3913e1..f1ae457 100644 --- src/wp-content/themes/twentyseventeen/inc/color-patterns.php +++ src/wp-content/themes/twentyseventeen/inc/color-patterns.php @@ -443,8 +443,11 @@ body.colors-custom, .colors-custom .next.page-numbers:focus, .colors-custom .next.page-numbers:hover, .colors-custom.has-header-image .site-title, +.colors-custom.has-header-video .site-title, .colors-custom.has-header-image .site-title a, -.colors-custom.has-header-image .site-description { +.colors-custom.has-header-video .site-title a, +.colors-custom.has-header-image .site-description, +.colors-custom.has-header-video .site-description { color: hsl( ' . $hue . ', ' . $saturation . ', 100% ); /* base: #fff; */ } diff --git src/wp-content/themes/twentyseventeen/inc/template-functions.php src/wp-content/themes/twentyseventeen/inc/template-functions.php index 4479f37..6b136c4 100644 --- src/wp-content/themes/twentyseventeen/inc/template-functions.php +++ src/wp-content/themes/twentyseventeen/inc/template-functions.php @@ -35,7 +35,7 @@ function twentyseventeen_body_classes( $classes ) { } // Add a class if there is a custom header. - if ( has_header_image() || has_header_video() && is_front_page() ) { + if ( has_header_image() ) { $classes[] = 'has-header-image'; } diff --git src/wp-content/themes/twentyseventeen/style.css src/wp-content/themes/twentyseventeen/style.css index 0f17b19..f9e5a8e 100644 --- src/wp-content/themes/twentyseventeen/style.css +++ src/wp-content/themes/twentyseventeen/style.css @@ -1580,7 +1580,9 @@ body { } body.has-header-image .site-title, -body.has-header-image .site-title a { +body.has-header-video .site-title, +body.has-header-image .site-title a, +body.has-header-video .site-title a { color: #fff; } @@ -1591,7 +1593,8 @@ body.has-header-image .site-title a { margin-bottom: 0; } -body.has-header-image .site-description { +body.has-header-image .site-description, +body.has-header-video .site-description { color: #fff; opacity: 0.8; } @@ -1629,14 +1632,16 @@ body:not(.title-tagline-hidden) .site-branding-text { } .has-header-image.twentyseventeen-front-page .custom-header, -.has-header-image.home.blog .custom-header { +.has-header-video.twentyseventeen-front-page .custom-header, +.has-header-image.home.blog .custom-header, +.has-header-video.home.blog .custom-header { display: table; height: 300px; height: 75vh; width: 100%; } -.custom-header-image { +.custom-header-media { bottom: 0; left: 0; overflow: hidden; @@ -1646,7 +1651,7 @@ body:not(.title-tagline-hidden) .site-branding-text { width: 100%; } -.custom-header-image:before { +.custom-header-media:before { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.3+75 */ background: -moz-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%); /* Chrome10-25,Safari5.1-6 */ @@ -1662,9 +1667,9 @@ body:not(.title-tagline-hidden) .site-branding-text { z-index: 2; } -.has-header-image .custom-header-image img, -.has-header-image .custom-header-image video, -.has-header-image .custom-header-image iframe { +.has-header-image .custom-header-media img, +.has-header-video .custom-header-media video, +.has-header-video .custom-header-media iframe { position: fixed; height: auto; left: 50%; @@ -1707,7 +1712,7 @@ body:not(.title-tagline-hidden) .site-branding-text { top: 62px; } -.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-image img { +.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img { bottom: 0; position: absolute; top: auto; @@ -1719,12 +1724,14 @@ body:not(.title-tagline-hidden) .site-branding-text { /* Hides div in Customizer preview when header images or videos change. */ -body:not(.has-header-image) .custom-header-image { +body:not(.has-header-image):not(.has-header-video) .custom-header-media { display: none; } .has-header-image.twentyseventeen-front-page .site-branding, -.has-header-image.home.blog .site-branding { +.has-header-video.twentyseventeen-front-page .site-branding, +.has-header-image.home.blog .site-branding, +.has-header-video.home.blog .site-branding { display: table-cell; height: 100%; vertical-align: bottom; @@ -3270,7 +3277,9 @@ object { } .has-header-image.twentyseventeen-front-page .site-branding, - .has-header-image.home.blog .site-branding { + .has-header-video.twentyseventeen-front-page .site-branding, + .has-header-image.home.blog .site-branding, + .has-header-video.home.blog .site-branding { bottom: 0; display: block; left: 0; @@ -3281,23 +3290,28 @@ object { } .has-header-image.twentyseventeen-front-page .custom-header, - .has-header-image.home.blog .custom-header { + .has-header-video.twentyseventeen-front-page .custom-header, + .has-header-image.home.blog .custom-header, + .has-header-video.home.blog .custom-header { display: block; height: auto; } - .custom-header-image { + .custom-header-media { height: 165px; position: relative; } - .twentyseventeen-front-page.has-header-image .custom-header-image, - .home.blog.has-header-image .custom-header-image { + .twentyseventeen-front-page.has-header-image .custom-header-media, + .twentyseventeen-front-page.has-header-video .custom-header-media, + .home.blog.has-header-image .custom-header-media, + .home.blog.has-header-video .custom-header-media { height: 0; position: relative; } - .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-image { + .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media, + .has-header-video:not(.twentyseventeen-front-page):not(.home) .custom-header-media { bottom: 0; height: auto; left: 0; @@ -3577,25 +3591,33 @@ object { /* Front Page */ .twentyseventeen-front-page.has-header-image .site-branding, - .home.blog.has-header-image .site-branding { + .twentyseventeen-front-page.has-header-video .site-branding, + .home.blog.has-header-image .site-branding, + .home.blog.has-header-video .site-branding { margin-bottom: 70px; } - .twentyseventeen-front-page.has-header-image .custom-header-image, - .home.blog.has-header-image .custom-header-image { + .twentyseventeen-front-page.has-header-image .custom-header-media, + .twentyseventeen-front-page.has-header-video .custom-header-media, + .home.blog.has-header-image .custom-header-media, + .home.blog.has-header-image .custom-header-video { height: 1200px; height: 100vh; max-height: 100%; overflow: hidden; } - .twentyseventeen-front-page.has-header-image .custom-header-image:before, - .home.blog.has-header-image .custom-header-image:before { + .twentyseventeen-front-page.has-header-image .custom-header-media:before, + .twentyseventeen-front-page.has-header-image .custom-header-video:before, + .home.blog.has-header-image .custom-header-media:before, + .home.blog.has-header-image .custom-header-video:before { height: 33%; } - .admin-bar.twentyseventeen-front-page.has-header-image .custom-header-image, - .admin-bar.home.blog.has-header-image .custom-header-image { + .admin-bar.twentyseventeen-front-page.has-header-image .custom-header-media, + .admin-bar.twentyseventeen-front-page.has-header-video .custom-header-media, + .admin-bar.home.blog.has-header-image .custom-header-media, + .admin-bar.home.blog.has-header-video .custom-header-media { height: calc(100vh - 32px); } @@ -4105,12 +4127,14 @@ object { padding: 0; } - .custom-header-image { + .custom-header-media { padding: 0; } .twentyseventeen-front-page.has-header-image .site-branding, - .home.blog.has-header-image .site-branding { + .twentyseventeen-front-page.has-header-video .site-branding, + .home.blog.has-header-image .site-branding, + .home.blog.has-header-video .site-branding { position: relative; } @@ -4149,7 +4173,9 @@ object { a, .site-title a, .twentyseventeen-front-page.has-header-image .site-title, - .twentyseventeen-front-page.has-header-image .site-title a { + .twentyseventeen-front-page.has-header-video .site-title, + .twentyseventeen-front-page.has-header-image .site-title a, + .twentyseventeen-front-page.has-header-video .site-title a { color: #222 !important; /* Make sure color schemes don't affect to print */ } @@ -4158,6 +4184,7 @@ object { blockquote, .site-description, .twentyseventeen-front-page.has-header-image .site-description, + .twentyseventeen-front-page.has-header-video .site-description, .entry-meta, .entry-meta a { color: #777 !important; /* Make sure color schemes don't affect to print */ diff --git src/wp-content/themes/twentyseventeen/template-parts/header/header-image.php src/wp-content/themes/twentyseventeen/template-parts/header/header-image.php index 5dea9d8..57f043f 100644 --- src/wp-content/themes/twentyseventeen/template-parts/header/header-image.php +++ src/wp-content/themes/twentyseventeen/template-parts/header/header-image.php @@ -11,7 +11,7 @@ ?>
-
+