picaporte

Same problem here, and an easy fix.

Thank you, Andrew.

Well, it seems that we’re finally done, Andrew. Let’s see:

– The child theme somehow got corrupted after applying the javascript snippet, so even getting back to the default theme settings there was the gap (the grey area) between header parent elements and header video elements. That happened to different wp installations, both local and online.

– Deleting the child theme and creating a brand new one set things in place, in terms of the video stretching to cover the full viewport area at any screen size.

– Again, using the same javascript snippet causes the grey gap (besides of risking a new file corruption, this time it didn’t happen at first), so definitely it’s not the one to use.

– So, to achieve the effect I want for the nav bar on scroll, I noticed that in the original global.js file there’s already a rule to set the nav bar style when the scroll is more than the custom header, so I only had to add there the couple of specific conditions I need for the nav bar to change in the way I want.

– Up to now it’s working well and apparently there’s no side effects. I have to test it in deep and adjust some minor things, but I hope things are going ok this time.

– Finally, I haven’t modified the Test Site (i tested it locally), but if you want to see the changes running let me know and I’ll be happy to arrange the Test Site for you.

Thank you very much for your time and help.

• This reply was modified 6 years, 9 months ago by picaporte.

Ok Andrew, think I have the clue about the issue: it is caused by the child theme.

Playing around i first disabled all plugins with no + result, then I came up with the idea to revert everything to default, so i changed themes to the original 17 template and voilà! any video i tried fits perfectly in its viewport at any screen size in WP Customiser, browser and Testsize.

By now you can see the Test Site video running appropriately for all screen sizes, using the original 17 theme template.

To create a child theme I always use the Child Theme Configurator plugin, I never had any problem with it, so is there anything special to be considered about 17 theme child themes?. I’m gonna try other plugin and see if it works.

Holy cow, I was getting mad!

I’ll let you know if it works with other plugins.
Tx

Ok, I’ve been testing some things:

https://2017.wordpress.net/
I think this is an official demo site for 17 theme w/ video header:
– Settings seem to be those of the default 17 theme.
– Checked the video size: 1920×1080, 3.69MB. I’ve downloaded it to test it later with my test site.
– Video covers the viewport at any screen size. It looks right with Firefox and MS Edge, but weirdly the video doesn’t run (black screen, no background image) with Chrome in my laptop (but it does correctly in an old desktop w/ XP!!). It’s also ok tested w/ testsize (dot) com.

My Test Site:
– Revert all settings and code back to default.
– Test w/ the original video you know (it is 1280×720): same grey area below video with any screen size in WP Customiser, Firefox, Edge and Testsize (dot) com. Chrome in my laptop doesn’t run the video, old XP desktop runs the video w/ the grey area again.
– Test the original video, 1920×1080 size: same result, grey area.
– Test the downloaded video from 2017.wordpress.net: same result as above ??

My laptop runs windows 10 fully updated and the browsers are also updated, so there shouldn’t be problems with vh, besides the WP 17 demo site works right. It all sounds an X file.

So you see my Test Site video rightly covering the viewports in your devices?

• This reply was modified 6 years, 9 months ago by picaporte.
• This reply was modified 6 years, 9 months ago by picaporte.

Here we go. Screenshots from the WP Customiser and testsize (dot) com.
header-video-issue-customiser-1
header-video-issue-customiser-2
header-video-issue-customiser-3
header-video-issue-testsize.com-1366×768
header-video-issue-testsize.com-1280×800
header-video-issue-testsize.com-1024×600
header-video-issue-testsize.com-800×600
header-video-issue-testsize.com-640×480
header-video-issue-testsize.com-320×480

Hope this helps

• This reply was modified 6 years, 9 months ago by picaporte.

Ok Andrew, I’ll prepare some screenshots, sure. Thank you.

Andrew, as I’m using a test site for support purposes I can create an admin level wp user for you, so you can check it from the bone, if you want. Just give me an email to send you the access info.

• This reply was modified 6 years, 9 months ago by picaporte.

Just another tip, if it could help: i’ve noticed that the .wp-custom-header element has no height at all (0) when using the original Twenty Seventeen template, after the javascript it has height; and the #wp-custom-header-video element has originally some Css properties that disappear with the js snippet.

@anevins
Hi Andrew, thanks for your prompt response.

No, it seems to happen with all viewports, but it is a bit tricky: working with my laptop (1280×800) it looks right, it’s also ok within the customizer for this screen size, not for the cell and tablet screen sizes. I also use an online size testing service (testsize (dot) com) and all screen sizes there show the grey band below the video.

• This reply was modified 6 years, 9 months ago by picaporte.

Ok Andrew, in fact the issue seems to happen with both Css and html. I explained it in detail with the first long post, but i’ll try to summarize it for you as much as posible:

– I wanted to apply a different font style (font-family and color, basically) to different words within certain h1 and h3 titles. I applied <span> tags to achieve this in editor’s Html tab, adding an extra class to each group of words, with the desired style (h1), and adding inline styling for h3. Extra classes are styled in Customizer’s Custom Css. That’s it:

Css:

.title1 {font-family: Philosopher; color: red;}
.title2 {font-family: Anton; color: blue;}
.title3 {font-family: Lobster; color: green;}

Html h1:
<h1 style="text-align: center;"><span class="title1">Lorem ipsum</span> <span class="title2">dolor</span> <span class="title3">sit amet</span></h1>

Html h3:
<h3 style="text-align: center; color: blue; font-family: 'Ubuntu';">Mauris at risus sit amet risus lacinia viverra ac eu lorem</h3>

– All style changes worked correctly, but the font-family (tried font-size also and it worked). Code (html and css) is displayed as correct by the browser inspector, temporary changes in Css with the inspector worked as usual, but for the font-family again. Font-family code displays with no errors, it simply doesn’t work. Weirder, when trying any other GFont (with the inspector), h1 and h3 affected text changes into not the Twenty Seventeen default font (Libre Franklin) but an unidentyfied Serif font. Trying WP default fonts (Verdana, Tahoma…) works rightly instead.

– I tested different possibilities, plain WP default Editor, SiteOrigin Page Builder Editor and Headline widgets, different Google Fonts plugins, with the same result: i’m able to only use the initial default chosen Google font, apart of those named WP default fonts. The rest of GFonts seem to be blocked somehow. Adding a GFont manually to the theme (child theme’s functions.php file) do work, instead.

I agree with you about inline styling is not the best practice, I use it very rarely just for particular items.

You can check all the above with the test site link I provided with my first post. A more detailed explanation can also be seen in that first post, but if you need any other info i’ll be happy to provide it to you.

Thank you for your time.

• This reply was modified 6 years, 10 months ago by picaporte.
• This reply was modified 6 years, 10 months ago by picaporte.

Thank for your answer Andrew.

Well, first, it is not a commercial problem, it’s just that i see that answers to support questions are usually pretty quick and it surprised me not to have any after 4 days. Probably it is my fault for not explaining it clear or made it too long.

Trying to summarize it, the point is that Twenty Seventeen theme doesn’t allow you to use the Google Fonts catalogue through a google font plugin (i.e. Easy Google Fonts), you just can select one default GFont, but you cannot use any other Gfonts, tipically changing fonts in specific parts of the site, in the editor’s html tab. Thus, we are losing an important custom design potential. More, you cannot also use the browser inspector to test temporarily a font, which is really weird.

There is the same problem with other Google Fonts plugins, so it is not a plugin not compatible with the theme, somehow the theme kinda block full access to GFonts catalogue. The only way to use a new GFont aside from the default Gfont selected is to manually install it (already tried it). Maybe it’s something that can be checked and if it’s the case, fixed.

Thanks again.

Quick update: Fooplugins has released a new version 1.4.15 which fix the problem. I mark this topic as solved.

Hi bradvin,

Problem solved with new update 1.4.15. I installed back to version 1.4.12 with wp rollback plugin the other day, so to provide you with the link requested i’ve updated again the plugin not being aware of the new release 1.4.15. Checking the video gallery i notice everything’s ok, and then realize of this 1.4.15 update. So it was v. 1.4.14 which was somehow interfering with videos.

Thank you, and you can close the topic if you want.
Rgds

Hi again,

I forgot to tell you also to make sure that your “blog” menu item is pointing to the right blog page url, once you have fixed the blog url issue. You will need to update this item as well, otherwise your blog menu tab will most probably keep pointing to the actual wrong url, https://sherryviray.com/trek-in-my-head/. Just go to the menu page, delete the “blog” element from your actual menu and then reload it again.

Hi there, Sherry

Even though i’m not from Shufflehound team ;-), i’m also using Maskitto Light with quite a bit customization, so maybe i can help you. Let’s see:

1.- “Read more” issue: there’s a lot of guessing here, but it seems that you don’t have a blog page defined in your wp settings. If you check the different posts url’s, you will see that all of them are something like “https://sherryviray.com/post1&#8243;, https://sherryviray.com/post2&#8221;, etc (i.e., https://sherryviray.com/thankful-on-veterans-day/), as if they are independent pages, instead of posts from a proper blog page containing them. So, when you first created your very first post somehow it became the reference url for your blog front page, that’s “https://sherryviray.com/trek-in-my-head/&#8221;, this is the actual url defined for your blog page (also, this post “trek-in-my-head” now seems to be deleted, check september archived posts page -first posts available-, it only shows october posts, no posts at all from september), when it should be something like https://sherryviray.com/blog, so the posts url’s should also look something like https://sherryviray.com/blog/post1/, https://sherryviray.com/blog/post2/ (i.e. https://sherryviray.com/blog/trek-in-my-head/). Following this kinda internal logic, the “Read more” button takes url of the oldest post published in your blog front page (set to show 6 posts within the widget settings), which is the one posted on November 3, 2016, “As the City Sleeps”.
The solution: in the wordpress dashboard, go to the side main menu, settings>reading, where you should already have selected the “static page” option, as it seems to be from your web site look, and then select a page to be your blog page, ideally you should already have a page called blog, if not you can easily create one named so, or choose any other you want from the existing ones. Once changes are saved, your blog url should look https://sherryviray.com/your-chosen-page, and your posts https://sherryviray.com/your-chosen-page/post1/, etc. Maybe you already chose a blog page at the beginning, and this page was deleted, or the page slug changed causing it to be unreachable, or… several things could happened if this is the case, so the best way is to newly define a blog page again. Once you have your new blog page set, you can go editing this blog page and style it through the “page settings” section as usual. There, checking the “show read more button” option should result in correctly loading the rest of the posts within your blog page. The button link should point now to https://sherryviray.com/your-chosen-page, not to a single post.

2.- The “All category” issue: once you have corrected the above issue, this one is also fixed, right now the “all” link points to the only post available in the particular post page loaded (guess it should point again to the oldest one posted if there were more than one post, but you have disabled the category switch in the blog front page), so after the fixing it should point to https://sherryviray.com/your-chosen-page, showing all your posts (all your categories).

3.- The comments issue: this is the easiest one ?? You can choose between a comments deactivation for the whole web site and for a particular page. For a general deactivation, go to wp dashboard>side menu>settings>comments and uncheck “allow comments in new posts” (or something similar, i’m actually using a dashboard in other language than English). Disabling comments in particular pages or posts is also easy: when editing the page/post, open the “screen options” tab right under the admin bar, at the top of the page, and make sure the “discussion” and/or “comments” options are checked. Then you will see both sections in the body of the editing screen for the page/post, tipically under the editor and other sections (depending on which plugins you have running or the theme functions), and make the necessary changes to disable comments. Another easiest way is the quick edit function available in the dashboard>side menu>pages, which lists all your pages, and as you surely know, when hovering any page name this option will show, select it and within the little edit window you will find an option to disable comments for that particular page.

Finally, as a general advise, i recommend you to clear your installation up from all pages and post once rejected, delete everything you are not using no more, tipically pages or posts types from Maskitto demo, and check both page and post slugs and links, to avoid missing links and wrong performance, as with the Load more button or the blog post-url.

I hope all this will be useful, despite there is some guessing in the way.