Jump to content
TNG Community

Kloosterman method setup question


rakelbara

Recommended Posts

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!

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 ();
?>

 

Link to comment
Share on other sites

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?
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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  */

Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

  • 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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

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.

×
×
  • Create New...