News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

Viewport Issue

Started by jbridges87, June 29, 2020, 10:47:45 AM

Previous topic - Next topic

Chen Zhen

Actually it's only enabling these options that seem to cause problems:
QuoteDisplay board description as the meta-tag description
Display topic description as the meta-tag description

If you disable those options & test your forum it should be ok.
I haven't looked at the code of the mod but perhaps there is an issue with how those options have been applied.

My SMF Mods & Plug-Ins

WebDev

"Either you repeat the same conventional doctrines everybody is saying, or else you say something true, and it will sound like it's from Neptune." - Noam Chomsky

Chen Zhen

After reading the notation underneath those settings it seems another mod is required to make them work properly.
If you want those settings enabled, install this modification: https://custom.simplemachines.org/mods/index.php?mod=3012
Imo ignore its "core" theme install errors since I gather you do not use it.

Adjust its settings to your preference.

My SMF Mods & Plug-Ins

WebDev

"Either you repeat the same conventional doctrines everybody is saying, or else you say something true, and it will sound like it's from Neptune." - Noam Chomsky

Chen Zhen


When I messed with that above mod as stated I got a test site to pass the Google mobility test.
However, Lurkalot pointed out the issue for how it is displaying...   

Quote from: lurkalotLooks like the AddThis or Paypal icons are interfering with it anyway, because it becomes inactive once they load.

I don't see the "AddThis" mod in your screenshot.
There seems to be code added to the page from AddThis that is breaking the page.

Here are some points of interest FYI:

  • can't have the <iframe> tag after the "body" tag
  • can't have <style> tag within the <body> tag (has to be in the head tag)
  • div id _atssh has absolute position and also contains an iframe that has absolute position

.. the last point seems to be the main problem. The div has display: hidden but it is still messing up the layout. When I remove all of the above issues, the page functions properly.

Imo also update Tiny Portal to the latest version.

My SMF Mods & Plug-Ins

WebDev

"Either you repeat the same conventional doctrines everybody is saying, or else you say something true, and it will sound like it's from Neptune." - Noam Chomsky

jbridges87

@lurkalot - Yes, I have all of the panel expand/collapse options turned off. I need to locate which panel is displaying that little box, but it shouldn't be active. I set it that way.

@Chen Zhen - I've had the Optimus mod installed for quite a while now with no issue. I'm not sure how it could have become the culprit out of nowhere?
I did try turning off the ''Display board description as the meta-tag description', as you suggested, but it didn't seem to make a difference.

My main concern is just resolving the google errors at this point.
Perhaps I should just add the overflow-x: hidden;

I could always turn off the tools for addthis as a test as well, although, the code would still be on the site, I think if I turn the tool off, the code shouldn't load? Not really sure on that one...
Come by and check out my sports forum, here.
Running SMF v2.0.17

lurkalot

Quote from: jbridges87 on July 01, 2020, 12:01:22 AM

@lurkalot - Yes, I have all of the panel expand/collapse options turned off. I need to locate which panel is displaying that little box, but it shouldn't be active. I set it that way.


Best way to turn off all the Collapse/Expand icons is

TinyPortal Admin > Settings > Allow the panels to be collapsed? Yes / No

Save.

Quote from: jbridges87 on July 01, 2020, 12:01:22 AM

My main concern is just resolving the google errors at this point.

I could always turn off the tools for addthis as a test as well, although, the code would still be on the site, I think if I turn the tool off, the code shouldn't load? Not really sure on that one...

My sites fail the Google Mobile test when AddThis is enabled.  And Pass the test when I disable AddThis.   ;)

jbridges87

That was the panel setting! Turned off now. Thanks

So I was playing around last night, and discovered if I turn off the tools for AddThis Social/Donate buttons, then horizontal scroll bar goes away. I then tested it out on the Google Search Console, and confirmed the board pages then showed as mobile friendly.

Then I went ahead and re-enabled the social icons, but left the donate disabled, and everything was still good.
Once I re-enabled the donate buttons, the issue returned, so it's something to do with those specifically.

Now, I did make some modifications to the css to get those social icons moved to the right, and to display properly.

This is the thread where all the changes were discussed. The exact changes I made were from reply #24, and reply #31.

Perhaps a few of those settings just need tweaking?

Come by and check out my sports forum, here.
Running SMF v2.0.17

lurkalot

Quote from: jbridges87 on July 01, 2020, 01:40:09 PM
That was the panel setting! Turned off now. Thanks

So I was playing around last night, and discovered if I turn off the tools for AddThis Social/Donate buttons, then horizontal scroll bar goes away. I then tested it out on the Google Search Console, and confirmed the board pages then showed as mobile friendly.

Then I went ahead and re-enabled the social icons, but left the donate disabled, and everything was still good.
Once I re-enabled the donate buttons, the issue returned, so it's something to do with those specifically.

Now, I did make some modifications to the css to get those social icons moved to the right, and to display properly.

This is the thread where all the changes were discussed. The exact changes I made were from reply #24, and reply #31.

Perhaps a few of those settings just need tweaking?

You still get these mixed content warnings when you test on, https://www.whynopadlock.com/ and content is being blocked.

QuoteMixed Content - Errors

Hard Failure
A file with an insecure url of "http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff" was loaded on line: 359 of https://crown-sports.com/index.php.
This URL will need to be updated to use a secure URL for your padlock to return.

Hard Failure
A file with an insecure url of "http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff" was loaded via the javascript file: https://s7.addthis.com/js/300/addthis_widget.js on line 69. The insecure URL may not be directly contained in the script file and may exist elsewhere.
You may need to contact your web hosting provider for assistance.
This URL will need to be updated to use a secure URL for your padlock to return

Hard Failure
A file with an insecure url of "http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff" was loaded via the javascript file: https://s7.addthis.com/static/layers.33f5b85045a5f2308467.js on line 0. The insecure URL may not be directly contained in the script file and may exist elsewhere.
You may need to contact your web hosting provider for assistance.
This URL will need to be updated to use a secure URL for your padlock to return.


Hard Failure
A file with an insecure url of "http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff" was loaded, via a CSS file. You may need to contact your web hosting provider for assistance.
This URL will need to be updated to use a secure URL for your padlock to return.

jbridges87

I'm not sure if there's anything I can do about the two http URLs that are being loaded by AddThis, as that's coming from their end, I think.

I could reach out to my host about the other two though, as I do have SSL, and should be able to get those links update to https.
Or perhaps I could make these changes myself?
Come by and check out my sports forum, here.
Running SMF v2.0.17

jbridges87

Alright, so I just ran a test by removing all of the custom code that @Antechinus helped me with, and the problem with the horizontal scroll bar remained, so the code doesn't seem to be the issue.

Could it be something in the script that AddThis is running?
The only way I can get it to go away at this point is to disable the tipjar toolbar.
Come by and check out my sports forum, here.
Running SMF v2.0.17

Chen Zhen


I'm curious about how you added AddThis to your forum installation.

Is it the same version of the outdated mod that is available in the SMF customization section?
That mod in its current state will not install on SMF 2.0.17 nor many previous versions of SMF which is why I am asking.
It was superseded by Suki's "Share This Topic" mod from what I've read in its comments although that mod also seems outdated (8 years).
ref. https://www.simplemachines.org/community/index.php?topic=375136.msg3251985#msg3251985

The AddThis mod was not in your screenshot of installed mods that was posted earlier which is why I didn't test it but I did see it within the page HTML.
Specifically the stuff it inserts at the bottom of your page is what breaks it which I pointed out earlier.

Did you manually edit/parse your SMF files to get that AddThis mod installed in the first place? 

My SMF Mods & Plug-Ins

WebDev

"Either you repeat the same conventional doctrines everybody is saying, or else you say something true, and it will sound like it's from Neptune." - Noam Chomsky

jbridges87

AddThis isn't an SMF mod. It's a tool off the web. You can find more info on it, here.
Come by and check out my sports forum, here.
Running SMF v2.0.17

Chen Zhen

Ok so you made your choices and I assume opted inline for HTML?

Imo where you inserted the supplied code is part of the problem. Did you also attempt to change/adjust the supplied code?

My SMF Mods & Plug-Ins

WebDev

"Either you repeat the same conventional doctrines everybody is saying, or else you say something true, and it will sound like it's from Neptune." - Noam Chomsky

jbridges87

Yes, I have the tools set to inline, and are specifically put in the index.template file, directly underneath the following code

// The main content should go here.
echo '
Come by and check out my sports forum, here.
Running SMF v2.0.17

Chen Zhen

I'm not sure if the content somehow has your email in it because that seems to be all that is required by AddThis prior to providing the code insert.
If you want me to test it you can send the code to me via pm.

I can test it to see if I can get it to work without causing an issue. I have a live test forum already set up with all the same installed mods less your specific settings for them.

My SMF Mods & Plug-Ins

WebDev

"Either you repeat the same conventional doctrines everybody is saying, or else you say something true, and it will sound like it's from Neptune." - Noam Chomsky

Chen Zhen


The instructions don't actually tell you to put their code at that point.
They say to put the first given file loading code directly before the </body> tag.
Then they give you inline code to put the payment icons (or social media, etc.) where you want on your page (within the body).

I'll give you some instruction:

file: ../Themes/Reseller/index.template.php

This should patch the mixed content...
find:

<head>


add this after the above code:

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">





The first code they give you to load their external javascript file is instructed to go just before this (in that file):

</body></html>


.. after that you put the second given inline code for the actual buttons where you want but they have to be in the body of the page.





Imo the loading of their js file should actually go in the head of the document but what I just stated previously is their initial instruction.

My SMF Mods & Plug-Ins

WebDev

"Either you repeat the same conventional doctrines everybody is saying, or else you say something true, and it will sound like it's from Neptune." - Noam Chomsky

jbridges87

#35
That code at the beginning did clear the mixed content messages, so thanks for that.

I already had the AddThis code above the </body> tag, and the other two lines of code were placed where I had mentioned before

// The main content should go here.
echo '
<!-- Go to www.addthis.com/dashboard to customize your tools -->
                <div class="addthis_inline_share_toolbox"></div>

                <!-- Go to www.addthis.com/dashboard to customize your tools -->
                <div class="addthis_tipjar_inline_8pfy"></div>


I tried turning the tipjar back on, but the horizontal bar remains.
Should I try moving the code to fix the horizontal scroll bar?
Come by and check out my sports forum, here.
Running SMF v2.0.17

Chen Zhen


Alright I had the same issues on my test forum with the code placemants.
However I was able to place them without issue by making a few changes.

The first code that loads the 3rd party js file can go prior to </head> instead of </body>.

So for that theme place the first code prior to this:
</head>
<body>


Your other inline codes that you want at the top.. do not add them to the template file.

Create a "top" block & opt HTML style.
Disable the title & body styles for that block.
Change permissions so that everyone can view it & make sure it is enabled.
Also make sure it is visible everywhere by opting all those options including boards.
Add your inline HTML code to the block.

This should have it appear in the same place as you had it but without issues.
You have the option of changing the placement of the block to where you want it (top, sides, bottom, etc.).

My SMF Mods & Plug-Ins

WebDev

"Either you repeat the same conventional doctrines everybody is saying, or else you say something true, and it will sound like it's from Neptune." - Noam Chomsky

Chen Zhen

Try that out which should work for you.
The only thing I see about issues on the page is robots.txt blocking things but it doesn't seem to cause any problems.

If all you provide your users is one theme option then that should be good.
If you want me to post an option for you that uses your portal for everything, does not involve any template edits and will work for all themes let me know.

My SMF Mods & Plug-Ins

WebDev

"Either you repeat the same conventional doctrines everybody is saying, or else you say something true, and it will sound like it's from Neptune." - Noam Chomsky

jbridges87

I just tested it out using the portal, and it works great. Thanks a bunch.
I noticed the robots.txt issues as well, and I did a bit of research on it, and like you said, it seems like it's not really anything to worry.

If it's not too much trouble, I would love the option for users to be able to change themes and have all of this work. That would be fantastic.
Come by and check out my sports forum, here.
Running SMF v2.0.17

Chen Zhen

#39
No problem & glad it works for you.

Remove the edit to the template file but retain the src value of the tag they instructed you to insert.
Create an upper HTML type block with Tiny Portal.

Same thing applies for its settings as with the top block you created:
Disable the title & body styles for that block.
Change permissions so that everyone can view it & make sure it is enabled.
Also make sure it is visible everywhere by opting all those options including boards.

Add the following HTML code to the block:

<script type="text/javascript">
function addThisJavascript() {
var s = document.createElement("SCRIPT");
s.type = "text/javascript";
s.src = "<--CHANGE TO THE SPECIFIC SRC ADDRESS-->";
if (document.head) {
document.head.appendChild(s);
}
else {
document.getElementsByTagName("HEAD")[0].appendChild(s);
}
}
if (window.addEventListener) {
window.addEventListener("load", addThisJavascript, false);
}
else if (window.attachEvent) {
window.attachEvent("onload", addThisJavascript);
}
else {
window.onload = addThisJavascript();
}
</script>


... just change the src value above which shows: <--CHANGE TO THE SPECIFIC SRC ADDRESS-->
to the src value of the first code that AddThis gave you.




This will dynamically create the javascript tag that loads the 3rd party js, adding it to the head of the document & it will load it for every page the block appears on which is for all themes.
BTW - make sure both blocks you created are set at position 0 which places them at the onset of block execution for their placements.





Now about the meta tag... The way we previously did that here you would need to add it to every template.
I attempted to dynamically create the meta tag the same way as above but it does not convert/upgrade those requests to TLS (https) when done that way.
At least not when the AddThis js content is being loaded dynamically.
However I did figure out how to do it using .htaccess (you are using Apache ... I checked).

Mod headers in your apache config must be enabled/available for this to work.
If you don't want to add the meta tag to all theme index.template files then do the following...

Either create a .htaccess file for your main forum directory or add to the bottom of your current .htaccess file if one already exists.
Add this code to the file:

<ifModule mod_headers.c>
Header set Content-Security-Policy "upgrade-insecure-requests;"
</IfModule>


That's it... those changes should allow you to use AddThis content without page or protocol violations less the robots.txt warnings for any template being used on your website.


My SMF Mods & Plug-Ins

WebDev

"Either you repeat the same conventional doctrines everybody is saying, or else you say something true, and it will sound like it's from Neptune." - Noam Chomsky

Advertisement: