Kloosterman method display issues

[reesjel]

I've used the Kloosterman method to integrate WordPress with TNG (v.12.0.1) but I'm running into a few little issues.

When I go to: http://www.rootz.one/genealogy/surnames.php I get two issues, one on desktop, one on mobile that I don't know how to resolve:

1. Desktop: TNG menu, language switcher covers links below.

In the image above, on the right hand side of the TNG menu you can see that the language drop down covers whatever text is shown below. It does this without me doing anything at all. I also have a language switcher in my Wordpress menu above, and that one is aligned to the top on TNG  pages but sits in line with the rest of the menu on my other pages.

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

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?

 

[theKiwi]

In regards to the first problem - I have seen before the situation where the TNG menus aren't exactly the right height, but not the language menu.

The other issue on the surnames page is that the two pie charts should be beside the list of names, not under it - is the settings for that page in WordPress allowing for flexible maximum width, or is the width capped with some limit?

Roger

 

[klooster]

Your first problem, the find, media, info and language layout:

In your mytngstyle.css put the following css code:

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

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

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.

 

[cfj]

15 hours ago, reesjel said:

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

When I view your page source  ?sitever=mobile, there is an error around line 42

<link href="/> 

I don't know if that has any effect?

[fluffy82]

The place of the pie charts depends on the theme you're using and how the main content is displayed. You might need to add an extra wrapper. (Not exactly sure how that works, the developer of my previous theme did it for me and my current theme didn't have the problem)

[cfj]

17 minutes ago, fluffy82 said:

The place of the pie charts depends on the theme you're using and how the main content is displayed

Try to use the code from your homepage template. It's fluid

<div id="main-content-wrapper">
			<div class="main-inner">
				<div class="inner-content">
		<div class="breadcrumbs"><div class="breadcrumbs-inner content-area-width"><div class="breadcrumbs-content"><ul class="breadcrumb"><li><a href="https://www.rootz.one/en/home" title="Rootz" aria-label="Home"><i class="bne-fa fas fa-home" aria-hidden="true"></i></a></li><li class="active">Home</li></ul></div><!-- .breadcrumbs-content (end) --></div><!-- .breadcrumbs-inner (end) --></div><!-- .breadcrumbs (end) -->
	<div id="sidebar_layout" class="full-width-template clearfix">
		<div id="content" class="clearfix" role="main">

 

[reesjel]

21 hours ago, theKiwi said:

In regards to the first problem - I have seen before the situation where the TNG menus aren't exactly the right height, but not the language menu.

The other issue on the surnames page is that the two pie charts should be beside the list of names, not under it - is the settings for that page in WordPress allowing for flexible maximum width, or is the width capped with some limit?

Roger

 

Thanks, I think the issue is indeed partly the teemplate. I don't know how the page that the TNG data is shown on is selected, it looks like it uses my default template but I prefer it to use my full width template. Not sure how and where to put the code to make that happen though.

 

13 hours ago, klooster said:

Your first problem, the find, media, info and language layout:

In your mytngstyle.css put the following css code:

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

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

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.

 

I've added your code to the css file but I don't see any change, not after changing the height either. 

 

12 hours ago, cfj said:

When I view your page source  ?sitever=mobile, there is an error around line 42

<link href="/> 

I don't know if that has any effect?

I'll check it out, thanks. 

 

8 hours ago, fluffy82 said:

The place of the pie charts depends on the theme you're using and how the main content is displayed. You might need to add an extra wrapper. (Not exactly sure how that works, the developer of my previous theme did it for me and my current theme didn't have the problem)

Thanks for the suggestion. I think I need to use another template. 

 

7 hours ago, cfj said:

Try to use the code from your homepage template. It's fluid

<div id="main-content-wrapper">
			<div class="main-inner">
				<div class="inner-content">
		<div class="breadcrumbs"><div class="breadcrumbs-inner content-area-width"><div class="breadcrumbs-content"><ul class="breadcrumb"><li><a href="https://www.rootz.one/en/home" title="Rootz" aria-label="Home"><i class="bne-fa fas fa-home" aria-hidden="true"></i></a></li><li class="active">Home</li></ul></div><!-- .breadcrumbs-content (end) --></div><!-- .breadcrumbs-inner (end) --></div><!-- .breadcrumbs (end) -->
	<div id="sidebar_layout" class="full-width-template clearfix">
		<div id="content" class="clearfix" role="main">

 

Thanks, for the code. I want to use the homepage template as well, I just don't know where to put the code so the correct template is used when accessing the TNG data. I don't know where that 'signal'  is given in the code. 

[reesjel]

Does anyone know how I can 'say'  that if I click on a URL that's connected to TNG data, a specific template should be used to display the content? Perhaps some of my issues can be solved if I can have the TNG displayed on a full width template instead of the template that's used now (which idk how it's picked as template to use). Trying to tackle one issue at a time 😕

[klooster]

The cause of your issues could be  that the Template selection is set to YES in your TNG admin panel.

With my TNG WP integration method the Template selection MUST be set to NO, see printscreen. Be sure to click SAVE afterwards.

 

[cfj]

14 hours ago, reesjel said:

Thanks, for the code. I want to use the homepage template as well, I just don't know where to put the code so the correct template is used when accessing the TNG data. I don't know where that 'signal'  is given in the code.

Since you use Kloosterman's method, you should have I file WPTNG-meta.php

Open the file in in a text editor, surch as Notepad++

Below this

<?php

global $cms;
?>
<link href="<?php echo $cms['tngpath']; ?>
css/YOUR-TNG-EXTRA.css" rel="stylesheet" type="text/css"/> 

Add this code from your WP theme (homepage)

<div id="main-content-wrapper">
			<div class="main-inner">
				<div class="inner-content">
		<div class="breadcrumbs"><div class="breadcrumbs-inner content-area-width"><div class="breadcrumbs-content"><ul class="breadcrumb"><li><a href="https://www.rootz.one/en/home" title="Rootz" aria-label="Home"><i class="bne-fa fas fa-home" aria-hidden="true"></i></a></li><li class="active">Home</li></ul></div><!-- .breadcrumbs-content (end) --></div><!-- .breadcrumbs-inner (end) --></div><!-- .breadcrumbs (end) -->
	<div id="sidebar_layout" class="full-width-template clearfix">
		<div id="content" class="clearfix" role="main">

Open WPTNG-footer.php

Add closing tags to div

</div></div></div></div></div>
<?php
get_footer ();
?> 

 

13 hours ago, reesjel said:

Does anyone know how I can 'say'  that if I click on a URL that's connected to TNG data, a specific template should be used to display the content?

I'm not sure if I understand what you mean, but in Wordpress -> menu add custom link to your genealogy page (pages)

 

 

[klooster]

 

If you integrate WP and TNG with my method you cannot use one of the TNG templates (including the homepage template), all the design (header, menu etc) has to be done from within WP and the WP template. Of course you can use all the settings in TNG admin, but as I have posted before the Template selection in TNG Admin MUST be set to NO.

You do not have to change anything (like tng index.php) in the core files of TNG, that is one of the great benefits of this integration method.  It is independent of Any WP and/or TNG update.

If you change anything in the tng-index.php that will screw up the integration. It's either TNG and a TNG template OR WP and a WP Template.

 

Answer:

So the answer to the question "Does anyone know how I can 'say'  that if I click on a URL that's connected to TNG data, a specific template should be used to display the content?" is NO, you cannot with this method.

One word of advice:

Use a professional WP theme, I recommend the AVADA theme, it will cost you around $ 50-60, but it is money well spent!. Of course there are quite a few other professional WP templates (like what CFJ is using) that will give you the opportunity to make great website. 

 

Avada has been brilliantly developed by its developers to help users create a multipurpose theme, packed with features, prebuilt layouts, customization options, and even third-party plugin integrations.If you’re looking for a flexible solution that can be tailored to build a full-fledged, functional website, then this is it.

Another important strength of Avada is that it’s great at letting you take control of a mobile website’s appearance. You can exclude specific elements from appearing in the mobile version, and you can adjust the mobile breakpoints.

See my WP AVADA explanation page : TNG-WP_AVADA

[cfj]

14 minutes ago, klooster said:

You do not have to change anything (like tng index.php) in the core files of TNG

Sorry my fault, since I have custom index file

[reesjel]

9 hours ago, klooster said:

 

Template selection in TNG Admin MUST be set to NO.

One word of advice:

Use a professional WP theme,

In the TNG admin my template settings are set on ' NO'. 

And I'm using a professional (paid) Wordpress theme. I already paid for this template which I chose based on the TNG plugin instructions (when I thought I was going to use that, before I found out I couldn't make it work and before I knew about the Kloosterman method), I really don't want to pay for another theme.

I never 'set' any template to use for the TNG data in the TNG admin. I followed the steps in the instructions, but somehow a template is used when I try to access a TNG URL, how do I know which template is used and how this template is chosen? I thought it was the default page.php so I changed my default to a full width template, but that didn't change anything. That's why I was wondering if I can 'guide'  the URL to a preferred template myself. I really don't understand why I can't get the TNG data to work with my template, it's frustrating since I paid for stuff that's not working 😕

[reesjel]

9 hours ago, cfj said:

Since you use Kloosterman's method, you should have I file WPTNG-meta.php

Open the file in in a text editor, surch as Notepad++

Below this

<?php

global $cms;
?>
<link href="<?php echo $cms['tngpath']; ?>
css/YOUR-TNG-EXTRA.css" rel="stylesheet" type="text/css"/> 

Add this code from your WP theme (homepage)

<div id="main-content-wrapper">
			<div class="main-inner">
				<div class="inner-content">
		<div class="breadcrumbs"><div class="breadcrumbs-inner content-area-width"><div class="breadcrumbs-content"><ul class="breadcrumb"><li><a href="https://www.rootz.one/en/home" title="Rootz" aria-label="Home"><i class="bne-fa fas fa-home" aria-hidden="true"></i></a></li><li class="active">Home</li></ul></div><!-- .breadcrumbs-content (end) --></div><!-- .breadcrumbs-inner (end) --></div><!-- .breadcrumbs (end) -->
	<div id="sidebar_layout" class="full-width-template clearfix">
		<div id="content" class="clearfix" role="main">

 Open WPTNG-footer.php

Add closing tags to div

</div></div></div></div></div>
<?php
get_footer ();
?> 

 

I'm not sure if I understand what you mean, but in Wordpress -> menu add custom link to your genealogy page (pages)

 

 

Thanks for the code, unfortunately the code didn't work 😕 

I'm still looking for a solution. I'm really close to getting things to work but I don't seem to be able to fix these last issues. 

[klooster]

Which WP theme are you using?

[klooster]

Try this in your WP-TNG topmenu:

 

<?php
require ("../wp-blog-header.php");
get_header ();
 ?>

[cfj]

Have you created a copy WordPress header?

If yes, can you show us the code + the code from your WPTNG topmenu

[reesjel]

On 8/11/2018 at 8:54 PM, klooster said:

Which WP theme are you using?

I'm using the Sweetness Theme from BNE Creative. 

[reesjel]

On 8/11/2018 at 8:56 PM, klooster said:

Try this in your WP-TNG topmenu:

 

<?php
require ("../wp-blog-header.php");
get_header ();
 ?>

I've got this in the header right now and it hasn't changed anything

[reesjel]

13 hours ago, cfj said:

Have you created a copy WordPress header?

If yes, can you show us the code + the code from your WPTNG topmenu

I haven't created a copy of my header. In the WPTNG-topmenu I have the following code:

<?php
require ("../wp-blog-header.php");
get_header ();
 ?>

I am using a child theme, I don't know if that could be an issue?

[reesjel]

Just an update, I did a complete re-installation of both WordPress as well as TNG today. I thought that perhaps due to switching from the plugin to the Kloosterman method maybe some code got inserted somewhere that caused the problems. Unfortunately this didn't do the trick either. I'm still having the same issue. I checked it with the standard WordPress template and saw the same issue there as well. 

[cfj]

1 hour ago, reesjel said:

I am using a child theme, I don't know if that could be an issue?

No, thats good. In your child theme download the header.php -> open it in notepad++

Create a copy called header-tng.php

Delete everything before <?php wp_head(); ?>

Upload the new file header-tng.php into your child theme

Next step WPTNG topmenu - Here you get the new custom header from WordPress

<?php
require ("/path/to your wordpress/wp-blog-header.php");
get_header ('tng');
?>

Oops forgot to tell you that my site require this code:

<?php
require ('/path/to your wordpress/wp-load.php');
get_header ('tng');
 ?>

 

[klooster]

In my opinion using a child theme does not make any difference. If it would make a difference then the non responsive mode would not work also and it works fine with Reesjel. So the child theme is not the source of the problem.

A WordPress child theme is a WordPress theme that inherits its functionality from another WordPress theme, the parent theme. Child themes are  used when you want to customize or tweak an existing WordPress theme without losing the ability to upgrade that theme.

It is important to know that even though you can always create a child theme of any WordPress theme, sometimes you may not need a child theme. Think about the number of changes you have planned for your child theme, if the changes you are planning are minor, then you can always create a custom-style.css file in your theme or use a Custom CSS plugin. If the changes are too extreme where you find yourself overriding the core parent theme files, then you probably should be creating a custom theme.

That's why I recommend child themes only if you find yourself constantly adding new functions to your theme’s functions.php file and/or constantly adding/modifying the style.css file of your theme.

I am using a child theme myself because I want to customize and tweak my AVADA WP theme and WP-TNG has no problem with that in the responsive mode.

PS: I noticed that now responsive mode is working fine  with Reesjel??

[cfj]

On 8/9/2018 at 5:05 PM, reesjel said:

In the image above, on the right hand side of the TNG menu you can see that the language drop down covers whatever text is shown below

In your WP css you have this code: height is set to 45px

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: 45px;
    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;
}

I tried to set it to inherit!important;

See screenshoot below

 

 

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;
}

 

[klooster]

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.