rakelbara Posted June 26, 2022 Report Share Posted June 26, 2022 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: 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! Quote Link to comment Share on other sites More sharing options...
klooster Posted June 26, 2022 Report Share Posted June 26, 2022 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 Quote Link to comment Share on other sites More sharing options...
rakelbara Posted June 27, 2022 Author Report Share Posted June 27, 2022 Ok, I took the chance and installed wp in public_html. Now I have the same CSS issue as before. See here https://www.legstadaleit.com/tng/famsearchform.php Quote Link to comment Share on other sites More sharing options...
rakelbara Posted June 27, 2022 Author Report Share Posted June 27, 2022 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 (); ?> Quote Link to comment Share on other sites More sharing options...
klooster Posted June 27, 2022 Report Share Posted June 27, 2022 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? Quote Link to comment Share on other sites More sharing options...
klooster Posted June 27, 2022 Report Share Posted June 27, 2022 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 Quote Link to comment Share on other sites More sharing options...
rakelbara Posted June 27, 2022 Author Report Share Posted June 27, 2022 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. Quote Link to comment Share on other sites More sharing options...
klooster Posted June 27, 2022 Report Share Posted June 27, 2022 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 */ Quote Link to comment Share on other sites More sharing options...
rakelbara Posted June 28, 2022 Author Report Share Posted June 28, 2022 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 Quote Link to comment Share on other sites More sharing options...
klooster Posted June 28, 2022 Report Share Posted June 28, 2022 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 Quote Link to comment Share on other sites More sharing options...
rakelbara Posted June 28, 2022 Author Report Share Posted June 28, 2022 Thank you 😄 I guess it´s just a question of taking it one item at at time then Thanks for the link. Quote Link to comment Share on other sites More sharing options...
klooster Posted June 28, 2022 Report Share Posted June 28, 2022 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. Quote Link to comment Share on other sites More sharing options...
rakelbara Posted June 28, 2022 Author Report Share Posted June 28, 2022 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. Quote Link to comment Share on other sites More sharing options...
klooster Posted June 28, 2022 Report Share Posted June 28, 2022 You have to set the overall site width in your Theme options, not in TNG. Did you do that? Quote Link to comment Share on other sites More sharing options...
fluffy82 Posted June 28, 2022 Report Share Posted June 28, 2022 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. Quote Link to comment Share on other sites More sharing options...
rakelbara Posted June 28, 2022 Author Report Share Posted June 28, 2022 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 Quote Link to comment Share on other sites More sharing options...
klooster Posted June 28, 2022 Report Share Posted June 28, 2022 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; } Quote Link to comment Share on other sites More sharing options...
rakelbara Posted June 28, 2022 Author Report Share Posted June 28, 2022 It worked better with fluffy82's solution. If I try your code it looks like this: Quote Link to comment Share on other sites More sharing options...
klooster Posted June 28, 2022 Report Share Posted June 28, 2022 Well it is an Astra Theme related thing, I cannot help you there, MAIN THING is that the TNG integration is working Quote Link to comment Share on other sites More sharing options...
rakelbara Posted June 28, 2022 Author Report Share Posted June 28, 2022 Yes, it is. Quote Link to comment Share on other sites More sharing options...
fluffy82 Posted June 28, 2022 Report Share Posted June 28, 2022 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. Quote Link to comment Share on other sites More sharing options...
rakelbara Posted June 28, 2022 Author Report Share Posted June 28, 2022 Excellent! Thank you! As you can see I am a complete noob when it comes to CSS.😂 Quote Link to comment Share on other sites More sharing options...
klooster Posted June 28, 2022 Report Share Posted June 28, 2022 Glad you got it straightened out! Quote Link to comment Share on other sites More sharing options...
fluffy82 Posted June 28, 2022 Report Share Posted June 28, 2022 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.