Jump to content
TNG Community
rakelbara

Kloosterman method CSS issue

Recommended Posts

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!

Share this post


Link to post
Share on other sites
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/"

 

Share this post


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

Share this post


Link to post
Share on other sites
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;
}

Screenshot- Surname-List.png

 

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

 

Share this post


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

Share this post


Link to post
Share on other sites
cfj

Hi Rakel.

Try this:

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

 

Share this post


Link to post
Share on other sites
rakelbara

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

Share this post


Link to post
Share on other sites
rakelbara

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

Share this post


Link to post
Share on other sites
cfj

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

Share this post


Link to post
Share on other sites
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">

 

Share this post


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

Share this post


Link to post
Share on other sites
cfj

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

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

 

Screenshot-tngmenu.png

Here is my TNG menu

 

 

Screenshot-tngmenu2.png

Share this post


Link to post
Share on other sites
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.
image.pngimage.png

Share this post


Link to post
Share on other sites
cfj

CSS

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

Share this post


Link to post
Share on other sites
rakelbara

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

Rakel

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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...

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

×