Changeset 39414 for branches/4.7/src/wp-content/themes/twentyseventeen/assets/css/ie9.css

Timestamp:

12/02/2016 05:19:44 AM (7 years ago)

Author:

joemcgill

Message:

Twenty Seventeen: Better handling of custom headers when no image is set.

This ensures that a standard header is shown on the front page whenever
a header video is set without a header image if the video doesn't load,
e.g., on mobile sizes or if the JS doesn't fire.

This adds a new class, .has-header-video that is added whenever the
wp-custom-header-video-loaded event is fired, which is then used to style
the custom headers along with .has-header-image whenever a header image
is available. This also changes the class name on the custom header media
wrapping div from .custom-header-image to .custom-header-media.

Props laurelfulford, joemcgill.
Fixes #38995 for 4.7.

Location:

branches/4.7

Files:

• . (modified) (1 prop)
• src/wp-content/themes/twentyseventeen/assets/css/ie9.css (modified) (3 diffs)

branches/4.7/src/wp-content/themes/twentyseventeen/assets/css/ie9.css

@@ -5 +5 @@
 
 .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%;
 }
@@ -18 +20 @@
 
     .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;
@@ -29 +33 @@
 
     .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;