Jump to content
TNG Community

Kloosterman method display issues

reesjel

By reesjel
in WordPress

 Share

Recommended Posts

cfj

cfj

Posted
Posted

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

Link to comment
Share on other sites
cfj

cfj

Posted
Posted
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

Link to comment
Share on other sites
cfj

cfj

Posted
Posted
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

 

Link to comment
Share on other sites
cfj

cfj

Posted
Posted
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

Link to comment
Share on other sites
klooster

klooster

Posted
Posted

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

Link to comment
Share on other sites
klooster

klooster

Posted
Posted

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

Link to comment
Share on other sites
cfj

cfj

Posted
Posted
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

Link to comment
Share on other sites
klooster

klooster

Posted
Posted

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!

Link to comment
Share on other sites
cfj

cfj

Posted
Posted
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

Link to comment
Share on other sites
cfj

cfj

Posted
Posted
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 😲

Link to comment
Share on other sites
reesjel

reesjel

Posted
  • Author
Posted
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!

Link to comment
Share on other sites
reesjel

reesjel

Posted
  • Author
Posted
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.

Link to comment
Share on other sites
reesjel

reesjel

Posted
  • Author
Posted
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!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...