Kloosterman method CSS issue

[rakelbara]

I am trying to get the Klosterman method a try since the TNG WP plugin wasn't working for me. I went through the guide that is found here (5 steps): https://www.kloosterman.be/info/tng-wp-avada/#skipintro

But now the formatting of the TNG pages looks weird. It seems the WP CSS is overriding the TNG CSS and I can't figure out how to fix it.

See here: https://www.hafdal.dk/testing/tng/places.php

Any idea how I can fix this?
Thanks in advance!

[klooster]

Well it is not easy to check from here what is wrong.

But if your TNG files are in and I quote: "https://www.hafdal.dk/testing/tng/places.php" they are are not in a sub-root folder of WP, as they are supposed to be.

• Step 1.) Install WordPress in the root folder of your website
• Step 2.) Install TNG in a sub-root folder. I called my TNG folder “genealogy” but any name will do.  

If your WP files are in: : "https://www.hafdal.dk/"

• The TNG files should be in: : "https://www.hafdal.dk/tng/places.php"

 

[rakelbara]

Hello Klooster and thank you for your reply.

Everything is now in the root, hafdal.dk, but I am still having the same issue. I made a fresh install and did not move any files. Any idea what might be the problem?

Best regards

Rakel

[cfj]

@rakelbara I suggest you try to add your own div id in WPTNG-topmenu.php

<div id="TNGWP">

Add CSS style to div id

#TNGWP {
    max-width: 1240px;
}

 

PS: You can Install WordPress and TNG in a Subdirectory . Just use absolute path to WordPress in WPTNG-topmenu.php

 

[rakelbara]

Hi cfj, and thank you for your reply.

I have the WP installation in the root and TNG in a folder called TNG, just as Klooster describes in his guide, sorry about not being clear.

Just to be absolutely sure I am doing the right thing. 

WPTNG-topmenu.php now looks like this:

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

But where should I add the CSS style to div id? Sorry I am not so savy when it comes to programming.

Best regards

Rakel

[cfj]

Hi Rakel.

Try this:

<?php
require ("../wp-blog-header.php");
get_header ();
 ?>
<style>
  #TNGWP {
    max-width: 1240px;
}
</style>
<div id="TNGWP">

 

[rakelbara]

I tried that, but it didn't help unfortunately. Any other ideas?
Thanks for trying to help me 😃

[rakelbara]

I tried swiching to another theme (Astra) and it's a little better there, but not much.

[cfj]

Can you upload WPTNG-topmenu.php  again with my code?

[rakelbara]

Sure, I have done that.

It now looks like this when I check the file that is on the server: 

<?php
require ("../wp-blog-header.php");
get_header ();
 ?>
<style>
  #TNGWP {
    max-width: 1240px;
}
</style>
<div id="TNGWP">

 

[cfj]

https://www.hafdal.dk/tng/surnames.php

[rakelbara]

Yes exactly, after I changed the theme it looks a lot better. But it still looks a lot different from what TNG looks normally. And the TNG menu should not be visible, otherwise there will be two menus, right?

[cfj]

I use both, but you can change it in backend of TNG

Setup >> Configuration >> General Settings >> Site Design and Definition

 

Here is my TNG menu

 

 

[rakelbara]

Ah I didn't know that you can turn it off. It's strange though, I have turned everything off but I still have the menubar, now it's just empty.

[cfj]

CSS

.innercontainer {display:none;} or .menucontainer {display:none;}

[rakelbara]

Sorry again, in which CSS file should I add this?
Best regards

Rakel

[cfj]

Sorry I forgot. Add it in mytngstyle.css

If it don't work you can use !important; rule

.innercontainer {display:none!important;}

https://www.w3schools.com/css/css_important.asp

[fluffy82]

21 hours ago, rakelbara said:

It seems the WP CSS is overriding the TNG CSS and I can't figure out how to fix it.

I take that as an advantage. I totally disable the TNG CSS and do everything in WordPress. Besides being more consistent, it also works faster and more efficient, as you don't have to see what you want to change, download the css fil, make the change, upload the css file, see if it works, restart if it didn't. You just make your changes in the WordPress style editor and tadaaaah, instant changes.

[rakelbara]

Yes I can see that advantage. The problem is, I am not very CSS savy so this is just creating extra work for me. And unfortunately I don´t have time for it either.

[Kare]

Don't try to integrate TNG and WP unless you are a CSS nerd, and don't try if you have limited time to spend on necessary additions and adjustments...

[John Paul]

On 7/11/2021 at 11:05 AM, fluffy82 said:

I take that as an advantage. I totally disable the TNG CSS and do everything in WordPress. Besides being more consistent, it also works faster and more efficient, as you don't have to see what you want to change, download the css fil, make the change, upload the css file, see if it works, restart if it didn't. You just make your changes in the WordPress style editor and tadaaaah, instant changes.

I know this is an older thread, but could you briefly explain how you accomplished this?

[fluffy82]

11 hours ago, John Paul said:

I know this is an older thread, but could you briefly explain how you accomplished this?

Very easy. There's a few steps (probably some are unnecessary or could be done differently, but I'm used to doing it like this).

• make a copy of genstyle.css and give it a name of your choice
• empty the original stylesheet, but keep the line /* Classes for TNG Mods to be added below */ if you want to use mods
• in the file adminlib.php you replace the word mytngstyle.css with the name you chose above (it should be somewhere around line 50; this assures that the admin pages still work, it's too much of a hassle to get those right manually)

When you did this, your TNG pages will use all make up that's defined in your WP theme. These are all the standard things, like columns, buttons, paragraphs, titles, fonts, colours, etc. There still is quite a lot of work setting the TNG specific parts right, but that all depends on your theme. I have about 1500 lines of extra css I wrote myself, but that's because I wanted to change certain things in TNG (like having the getperson menubar vertically rather than horizontally, which means all the content needs to be reduced etc). If you're less exigant than me, you'll probably do with a lot less lines. You do that once, and it just requires a small upkeep every time there's a TNG or WP update that changed something.

There are two things that cause some extra work, which could be solved if TNG would change the source code. But I do realise it's a lot of work, and totally unnecessary for TNG to be used as a stand alone. So I'm of course not expecting them to apply this. Life would be much easier if TNG would use:

• more specific ID's for div's (so you can change a div's properties on one page without changing them on the other)
• less hardcoded sizes (like "width: 250px") and more relative sizes ("width: 75%")

[John Paul]

fluffy82. Thanks for this information.  I'll print it out and will definitely put it to use.  Right now I

I'm just starting to setup wp/tng as a subdomain of my site joneshyman.org.  It'll be wpng.joneshyman.org  I'll probably have it up and running over the weekend.