Jump to content
TNG Community
rakelbara

Kloosterman method setup question

Recommended Posts

rakelbara

Hello!

My site (www.legstadaleit.com) is currently using a plugin called "Advanced iframe" to get TNG to work with my WP installation. I have been advised to look at the Kloosterman method to avoid using iframes. 

Before I can begin to do that, I have to figure out how I can get that to work without making my site go offline. My current setup is like this:
image.png

What I could do was create a WP Staging that would create a folder on the same level as the other two folders (tng and wp). And then I could work on the WP setup there and then go live once everything is working correctly. That way I wouldn't have to "mess with" the TNG installation which is quite big.

But as far as I can read, the Kloosterman method puts the WP installation in the root and then TNG in a subfolder. So my question is, can I somehow get the Kloosterman method to work with the way I have things set up?

I really hope I have managed to describe this properly.

Thanks in advance for any help!

Share this post


Link to post
Share on other sites
klooster

If I go to your website, https://www.legstadaleit.com, I get an error:

This page doesn't seem to exist.

It looks like the link pointing here was faulty. Maybe try searching?
  • So what do you have in -public_html?? Because that is the root!
  • Which WP theme are you using?
  • Which version of TNG and PhP?

My advice is a fresh install of WP in public_html

Share this post


Link to post
Share on other sites
rakelbara

I went through all the 5 steps as described here: Wordpress and TNG direct integration, no plugin needed - TNG_Wiki (lythgoes.net)

Everything is exactly as described there except WPTNG-footer.php where I commented the get_sidebar function out.

<?php
/*get_sidebar ();
/* Use only if you want to have the sidebar displayed in TNG pages */
get_footer ();
?>

 

Share this post


Link to post
Share on other sites
klooster

BEWARE: PhP coding mistakes: one little wrong character or an empty space can create havoc in a PhP coded website like TNG/Wordpress. One of the most common, and basic, mistakes made when coding in PHP is to either forget or misplace a quote, brace or semi-colon causing a syntax error. 

The footer should look like this, if you are not using the sidebar;

 

WPTNG-footer.php
<?php
/* get_sidebar (); */
/* Use only if you want to have the sidebar displayed in TNG pages */
get_footer (); 
?>

What do you have in WPTNG-Topmenu.php?

  • Which WP theme are you using?
  • Which version of TNG and PhP?

Share this post


Link to post
Share on other sites
klooster

Well it seems TNG  loads the WP Astra header and footer, but there seems to be something wrong with your TNG setup, see the 3 screenshots

Schermafbeelding 2022-06-27 om 14.34.42.png

Schermafbeelding 2022-06-27 om 14.33.17.png

Schermafbeelding 2022-06-27 om 14.35.56.png

Share this post


Link to post
Share on other sites
rakelbara

Thank you for the correction! I have fixed that now.

Now my files look like this:

WPTNG-footer.php

<?php
/*get_sidebar ();*/
/* Use only if you want to have the sidebar displayed in TNG pages */
get_footer ();
?>

WPTNG-meta.php

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

WPTNG-topmenu.php

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

I am using Astra, TNG v.13.0.4 and php v.7.4

Is is somehow possible to get the TNG CSS to override the WP CSS instead of the WP CSS overriding the TNG CSS? All I need is for the TNG part to look like it ususally does.

Share this post


Link to post
Share on other sites
klooster

I would not advice that, I have all my TNG extra style css done with the Customise option of WP. This is super-easy, and you will be able to see your changes with a live preview instantly. And I love the syntax checker of WP and you can see the result of a css change in a TNG file directly before saving. 

PS: PHP coding has to be exact, so you need an extra space between /* and get_sidebar and and an extra space between (); and  */

Share this post


Link to post
Share on other sites
rakelbara

How do you use the Customizer for this? I thought you could only use it for headers, footers, sidebar, etc. Do you put it all in the Custom CSS field to make changes?

Thanks for the tip about the extra space, I have fixed it now :)

Share this post


Link to post
Share on other sites
klooster
  • Yes I put all my TNG changes in there
  • To make it easer to remember what ever css change is doing, I put something like this before and after every change :

/* START TNG change for .........   */

YOUR CSS

/* END TNG change for .........   */

  • EXAMPLE:

/* START TNG  TITLE COLOR  */

H1.entry-title  {
color: #7F1817;
}
/* END TNG  TITLE COLOR  */

PS: if the change is not working put !important behind it, like this  color: #7F1817 !important;

 

Here is an instruction link to use the WP customizer:

WP_Customize

Share this post


Link to post
Share on other sites
rakelbara

Thank you 😄 I guess it´s just a question of taking it one item at at time then :) Thanks for the link.

Share this post


Link to post
Share on other sites
klooster

There is also something wrong with the setup/layout? of your TNG pages, see screenshot of your website page with the surnames and my screenshot how it should look.

 

I have no experience with the Astra theme you are using, but it seems to me that the width of your container is to small, I use a width 0f 1650px.

Schermafbeelding 2022-06-28 om 08.38.36.png

Schermafbeelding 2022-06-28 om 08.40.05.png

Share this post


Link to post
Share on other sites
rakelbara

Yes I have noticed this also. I tried changing the container size to 1650px but the problem persists.

I'm going out on a limb here; would you be willing to share your TNG CSS with me? That way I know what I should look for, I hope.  I understand if you would prefer not to, but I thought I'd just ask.

Share this post


Link to post
Share on other sites
klooster

You have to set the overall site width in your Theme options, not in TNG. Did you do that?

Share this post


Link to post
Share on other sites
fluffy82
6 minutes ago, klooster said:

You have to set the overall site width in your Theme options, not in TNG. Did you do that?

The width is not the problem. The problem is that his main content is set to "flex" rather than inline.

@rakelbara in your theme's custom css, put:

.site-content .ast-container {
	display: inline;
}

That should work. You might need to add !important but normally that's not necessary.

Share this post


Link to post
Share on other sites
rakelbara
1 hour ago, fluffy82 said:

The width is not the problem. The problem is that his main content is set to "flex" rather than inline.

@rakelbara in your theme's custom css, put:


.site-content .ast-container {
	display: inline;
}

That should work. You might need to add !important but normally that's not necessary.

Thank you! That worked, however now the content has no margin LOL. See here: https://www.legstadaleit.com/tng/searchform.php

Share this post


Link to post
Share on other sites
klooster

In my opinion it is the width, flex just makes it full screen in every resolution.

 

Or you could try this:

 

.site-content .ast-container {
display:flex;
justify-content: space-around;
margin: 10%;
border: 1px solid blue;
box-sizing: border-box;
  
}

 

Share this post


Link to post
Share on other sites
rakelbara

It worked better with fluffy82's solution. If I try your code it looks like this:
image.png

Share this post


Link to post
Share on other sites
klooster

Well it is an Astra Theme related thing, I cannot help you there, MAIN THING is that the TNG integration is working

Share this post


Link to post
Share on other sites
fluffy82
5 hours ago, rakelbara said:

however now the content has no margin

Then add a margin :)

#content {
	margin-left: 50px;
  	margin-right: 50px;
}

Or however big/small you want the margin.

Share this post


Link to post
Share on other sites
rakelbara

Excellent! Thank you! As you can see I am a complete noob when it comes to CSS.😂

Share this post


Link to post
Share on other sites
klooster

Glad you got it straightened out!

Share this post


Link to post
Share on other sites
fluffy82
2 hours ago, rakelbara said:

Excellent! Thank you! As you can see I am a complete noob when it comes to CSS.😂

You'll learn, it's easier than it looks ;)

Don't hesitate to ask here if you have trouble.

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

×