Jump to content
TNG Community
reesjel

Kloosterman method display issues

Recommended Posts

cfj

I'm a css freak, so more info.

If you would like some more width of your content in TNG your theme have inner-content class set to max-width 1100px

I tried to set it to .inner-content{max-width:1200px!important} Try to use this in your mytngstyle

See screenshoot below

 

screenshot-rootz-content-max-width.png

Share this post


Link to post
Share on other sites
cfj
50 minutes ago, klooster said:

PS:  the first (ul.tngdd .menulink) defines the height of the find, media, info menu links and the second (#newlanguage1) defines the height of the language links.

You can try different pixel heights of course.

As Kloosterman said, "try different pixel"

Remember to always use !important everytime when you need to override style

Screenshoot of Kloosterman's suggestion 21px

 

screenshot-rootz-select-language.png

Share this post


Link to post
Share on other sites
klooster

Do not forget to put the link to mtngstyle.css in yout wpTNG-meta.php

Share this post


Link to post
Share on other sites
cfj
14 minutes ago, klooster said:

Do not forget to put the link to mtngstyle.css in yout wpTNG-meta.php

It's there, but I recomend that you delete

css/MY-TNG-EXTRA.css

since nothing found on your server

 

Share this post


Link to post
Share on other sites
cfj
On 8/9/2018 at 5:05 PM, reesjel said:

2. Mobile: No Wordpress layout, only TNG with fixed, expanded menus

20180809-TNG-Wordpress-Mobile-issue.JPG

As you can see in the screenshot above, whe I check my website on mobile I encounter two issues. I don't see my WordPress environment at all anymore and the mobile environment I do see has the menu expanded and I'm not able to undo that. I would like to see my WordPress layout with the TNG data underneath, just like it is the desktop version.

Has anybody encountered these issues before and/or know how to fix them?

 

If you only want to show WordPress header in TNG mobile display you need to do some changes.

I know that Kloosterman don't approve my method, but it works fine on my site, I think You can try it out and see if it works on your site.

The benefits  of  my method with header-tng.php, you avoid double Document type declaration (Look at your source on a tng page)

  1. In WPTNG-topmenu.php copy everything over to WPTNG-meta.php
  2. Delete everything WPTNG-topmenu.php (Now you just have a blank page and you can use it to copy div tags from your WP theme.)
  3. Hide TNG mobile header: In mytngstyle.css add: #tngheader {display:none!important;}

Screenshot of your site below

screenshot-rootz-nomobile.png

--------------------------

My site on ?sitever=mobile https://www.jegersberg.com/slekt/surnames.php?sitever=mobile

Screenshoot Iphone 6

Screenshot-iphone-7.png

I hope this can resolve your issues

 

Share this post


Link to post
Share on other sites
klooster

As I mentioned earlier, when I check your website for instance with Responsinator ( https://www.responsinator.com/or other responsive webdesign tester I do get the WP-TNG header, see attached screenshot ??

Schermafbeelding 2018-08-13 om 15.44.52.png

Schermafbeelding 2018-08-13 om 15.44.18.png

Share this post


Link to post
Share on other sites
cfj
31 minutes ago, klooster said:

As I mentioned earlier, when I check your website for instance with Responsinator

Kloosterman, the trouble is that TNG use a script, that detect mobile, tablet devices, so tng create a url ?sitever=mobile - See Mobile Mode Display Wiki

The issue I have with this, is not just the display, but Google consider this as duplicate Title and Description tags

Screenshoot of your site below. Test your site by adding ?sitever=mobile to your url

 

Screenshot_2018-08-13-Surnames.png

Share this post


Link to post
Share on other sites
klooster

Yes, but that is not What a real mobile shows. On a real mobile phone everything is responsive. See attached81907A83-E7E2-4674-A03B-0E7B99AA4566.jpeg screenshot of my iPhoneX

Share this post


Link to post
Share on other sites
cfj

"Yes, but that is not What a real mobile shows. On a real mobile phone everything is responsive"

Visit your site on my Iphone 7. See screenshoot 

 

427DE40E-1DF5-4592-B682-1199B19C88D3.png

Share this post


Link to post
Share on other sites
klooster

Now you have got me hooked!

That makes the mystery even more interesting.

On every responsive webdesign tester I tested and on my iphone and ipad, everything is responsive.
Also on the iPhone 6 of my wife (with IOS 11) see print screen of he iPhone 6 no responsive problem.

 

PS: I am using the IOS 12 BETA 6

IMG_7216.png

Share this post


Link to post
Share on other sites
cfj
5 minutes ago, klooster said:

Now you have got me hooked!

That makes the mystery even more interesting.

On every responsive webdesign tester I tested and on my iphone and ipad, everything is responsive

The trouble is the script in TNG -> siteversion.php and in genlib, so a webdesign tester does nothing regarding this issue.

I'm using IOS 11.4.1

Share this post


Link to post
Share on other sites
klooster

Yes I understand that, but on my iPhone X and on the iPhone 6 of my wife, everything is responsive.

 

PS: when I click on the responsive (Ubermenu) menu!

Share this post


Link to post
Share on other sites
cfj
4 minutes ago, klooster said:

Yes I understand that, but on my iPhone X and on the iPhone 6 of my wife, everything is responsive

Try to copy the url from your iPhone and see if the url ends with ?sitever=standard

Delete history, cache, and cookies on your iPhone and then try to open your site

Share this post


Link to post
Share on other sites
cfj
37 minutes ago, cfj said:

Delete history, cache, and cookies on your iPhone and then try to open your site

Followed my own advice and deleted cache. Your site looks fine. Sorry for all the confusion I made 😲

Share this post


Link to post
Share on other sites
klooster

I try to stay in a constant state of confusion just because of the expression it leaves on my face.

“Johnny Depp”

Share this post


Link to post
Share on other sites
reesjel
12 hours ago, cfj said:

In your css/mytngstyle change it:


input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="month"], textarea, select {
    display: inline-block;
    width: 47%;
    height: inherit!important;
    padding: 6px 12px !important;
    line-height: 20px;
    margin-bottom: 10px;
    color: #555;
    vertical-align: middle;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ddd;
        border-top-color: rgb(221, 221, 221);
        border-right-color: rgb(221, 221, 221);
        border-bottom-color: rgb(221, 221, 221);
        border-left-color: rgb(221, 221, 221);
    border-radius: 2px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    transition: all .3s ease;
}

 

Thanks. I changed my .css

11 hours ago, klooster said:

Your first problem, the find, media, info and language layout:: Put !important behind it, like this:

In your mytngstyle.css put the following css code:

ul.tngdd .menulink {
    height:21px !important;
    width:70px !important;
    line-height:1.5 !important;
} 

#newlanguage1 {
    height:21px !important;
    width:90px !important;
    line-height:1.5 !important;
} 

PS:  the first (ul.tngdd .menulink) defines the height of the find, media, info menu links and the second (#newlanguage1) defines the height of the language links.

You can try different pixel heights of course.

 

Thanks, I changed the .css as you suggested, played around with the height and width and added another line:

div.innercontainer, ul.tngdd .langmenu, ul.tngdd .stubmenu {
	  height: 30px
}

This did the trick, thanks so much for all your help! I've gotten myself a refresh and crash course on .css in the process. 😄

Thanks again for your help and patience in this matter, I'm really glad I've been able to solve it!

Share this post


Link to post
Share on other sites
reesjel
3 hours ago, cfj said:

Followed my own advice and deleted cache. Your site looks fine. Sorry for all the confusion I made 😲

I actually had the same thing. But I noticed in the footer of the TNG mobile version it said "Switch to regular website" once I clicked that I haven't been reverted back to the TNG mobile version. It's certainly a mystery! But my site looks responsive now as well, but I wouldn't be suprised with people see the TNG mobile version when visiting my site on mobile for the first time.

Share this post


Link to post
Share on other sites
reesjel
On 8/13/2018 at 1:14 PM, cfj said:

If you only want to show WordPress header in TNG mobile display you need to do some changes.

I know that Kloosterman don't approve my method, but it works fine on my site, I think You can try it out and see if it works on your site.

The benefits  of  my method with header-tng.php, you avoid double Document type declaration (Look at your source on a tng page) 

  1. In WPTNG-topmenu.php copy everything over to WPTNG-meta.php
  2. Delete everything WPTNG-topmenu.php (Now you just have a blank page and you can use it to copy div tags from your WP theme.)
  3. Hide TNG mobile header: In mytngstyle.css add: #tngheader {display:none!important;}

Screenshot of your site below

screenshot-rootz-nomobile.png

--------------------------

My site on ?sitever=mobile https://www.jegersberg.com/slekt/surnames.php?sitever=mobile

Screenshoot Iphone 6

Screenshot-iphone-7.png

I hope this can resolve your issues

 

This workaround seems to have worked for me. Thanks!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×