Kloosterman Method - Presentation question.

[quarlton]

Hi

I wonder if anyone can help me please.

I have successfully integrated TNG into WordPress using the Kloosterman method.

However I have 2 display issues that I am trying to resolve.

1. The WordPress header displays, which I don't want on the page.

2. The TNG page is going too close to the left hand edge of the page.

Any help gratefully received

Dave Simpson

[klooster]

• What WP theme are you using?
• What is the URL of your website?
• What is the WP page ID of the WP page where you do not want the header?

[quarlton]

Hi Cees

Many thanks for your reply.

Currently I am using the Coldbox theme but will be changing to the Kandence theme.

URL: https://www.quarlton.co.uk/tngds/searchform.php

Your question about the WP Page ID makes me think that I have missed something.

Currently I just have a menu link directly to the TNG page.

I don't know how to assign it to a specific page in WP

I have a page ready for it https://www.quarlton.co.uk/wp-admin/post.php?post=4033&action=edit but I couldn't see how to link the TNG page to it.

 

Many thanks

 

[quarlton]

Hi Cees

I've managed to solve the problem.

It was thanks to you asking which WordPress page I was using.

I suddenly realised where I had gone wrong.

Many thanks for your input

Dave

[quarlton]

I spoke too soon

URL: https://www.quarlton.co.uk/3481-2/

This page opens perfectly correctly.

My problem now is that when I press the Home link it loads the WordPress Home page within the current page instead of opening it on its own.

 

The WordPress page for displaying TNG contains an Advanced iFrame shortcut:-

[advanced_iframe securitykey="My key value" src="https://www.quarlton.co.uk/tngds/searchform.php"]

I have modified Site Definitions in TNG as shown below

 

Many thanks for any help

[klooster]

Well you do not have to use an iFrame to open the homepage, IF you have followed my instructions.

Beside this point,  try to avoid iFrames, its an old fashioned way to display a page. when you use an iframe, you’re handling content from a third-party source that you have no control over. As a result, iframes often pose security threats to the applications.

BUT when I click on your home page it renders (in my opinion) correctly, see printscreen.

So I cannot pinpoint your problem

[quarlton]

Hi Cees

The website you have screen captured is not the one I am working on at the moment.

The site I am working on is www.quarlton.co.uk

The link on the menu is Search People.

I thought that I had followed your instructions, but obviously I haven’t done it well enough.

Could you tell me how I put the link to TNG into a WordPress page without using an iFrame please.

Many thanks

Dave

 

[klooster]

Hi Quarlton,

Well, I think the question you are asking
"Could you tell me how I put the link to TNG into a WordPress page without using an iFrame please."
is puzzling me.

Because if you have installed my method correctly, you do not need an iFrame, any TNG page should load the Wp header and footer, and your searchform is NOT loading the WP header and footer,.

And your page https://www.quarlton.co.uk/3481-2/ IS NOT LOADING the Wp header and footer

Example: on my website the TNG is in the directory ROOT/genealogy. When I Click from my homepage menu the search people item the URL is : https://www.kloosterman.be/genealogy/searchform.php and it will load the the search form WITH the WP header and footer

So as far as I can conclude from here there is something wrong with your WP_TNG integration installation

PS-1 what is the TNG, WP and PhP version you are using???

PS-2 : I am not sure where you are living, but due the possible time difference I am signing off for tonight.

[klooster]

I can see that you are working on it, the  page https://www.quarlton.co.uk/3481-2/ IS NOW LOADING the Wp header BUT not the footer,

 

[quarlton]

Hi Cees

Many thanks for the tip. I shall try again tomorrow.

Thanks again for your help.

Dave

[quarlton]

Hi Cees

That’s the problem - I’m trying not to load the WP header.

Also trying to get a  border at the left

Dave

[quarlton]

Hi Cees

That page is still using the iFrame.

If you call TNG directly https://www.quarlton.co.uk/tngds/surnames.php it opens in the WP theme.

However what I am trying to do is lose the WP header and give it a left margin.

 

Dave

[quarlton]

If it's any help, this is the look I'm trying to achievee:-

https://heenan.one-name.net/tng/searchform.php

No WP header

Border at the left.

 

 

[klooster]

Well Quarlton if this is what you want: https://heenan.one-name.net/tng/searchform.php then you want just a clean TNG page with no WP integration. Why  would you like to have that!

The whole point of the WP_TNG integration is to have the TNG pages inside the WP header and footer. That makes a WP page and a TNG page have the same visual layout.

[quarlton]

Hi Cees

 

My apologies - I'm obviously note explaining myself very well.

I thought that the Heenan page was using their WP theme - I think that I am confused because the WP theme is also just plain white the same as their TNG theme.

What I want is to use my WP theme but when I do that the TNG page is fully left and I need some border at the left.

Sorry to be such a nuisance

[klooster]

No apologies needed Quarlton,

Oke I understand, but that is something that is theme dependent. For instance in my website (with the AVADA theme, content is 1500 pix wide, I can change that in the AVADA theme options).

In your case find the class or id  that holds the content and put some padding or margin in the custom css of WP.

PS-1 I use chrome browser and the inspector to find the class or id of something

PS-2: buy the AVADA theme, best investment I ever made!

[quarlton]

Many thanks Cees

I'll give it a try later today,

[klooster]

. 🇪🇬

[quarlton]

I finally managed to sort the problem of the TNG page being right against the edge of the page.

I just added body{margin:60px;} to custom CSS which gave me a big enough margin for TNG without affecting the rest of the site too much.

So I now have what I wanted.

Next task is to find out how to change the TNG style as with no Template selected I don't like the colour scheme.

Never satisfied

Again, thanks for your help.

Best wishes a Merry Christmas and a Happy New Year

Dave

[klooster]

Fine you got it sorted out Dave,

• One suggestion, make the width of your TNG pages the same width as your homepage. That will make it look a lot nicer and quieter. You can make this happen like this:

body {
margin: 0 auto;
width: 100%
max-width: 1500px;
height: 100%;       
    }

 

Of course you can change the width (in example 1500px) and margin or add padding

[quarlton]

Many thanks acres,

I will experiment with it tomorrow.

I assume that it goes in the TNG style sheet.

 

Dave

[klooster]

Yes it does

[quarlton]

I'm sorry to be a pain.

Could you identify which css file it should go in please - I think I've tried it in them all

Dave

[klooster]

In my opinion in the mytngstyle.css, ,

Sorry, I forgot to put an ; behind width: 100%;

if it stil  does not work put !important behind it:

body {
margin: 0 auto !important;
width: 100% !important;
max-width: 1500px !important;
height: 100% !important;      
    }

 

[quarlton]

Many thanks