Kloosterman Method

[klooster]

• I wil give it one more shot,

1.] Step one
Now with a css class, named b-famtree, placed in the table in the index.php
Put the next b-famtree class in WP --> Appaerance --> Customize ---> Additional css and publish.

/* START WP-TNG INDEX_PHP CLASS */
.b-famtree {
width: 1050px;
background-color: #FFFFFF ;
margin: auto;
border-spacing: 10px;
}
/* END WP-TNG INDEX_PHP CLASS */

You can change the values of the css of course to your liking.

2.] Step two

Download the index-birkey4.php, rename it to index.php and overwrite the index.php that you are using. Empty you cache  and reload the page. Let me know if it worked.

PS:  After every TNG update you have to do that again, so keep a copy of my updated index-birkey.php

 

• I tested it on my local host and server with my AVADA theme and I tested it with TNG stand alone. Everywhere it works fine with me, width is 1050 px, table is nicely centered in the middle and the text aligned to the left as you preferred. So I see no reason why it should not work with the DIVI theme. If it does not work with the DIVI theme, then I am out of options.

index-birkey4.php

[rbirkey]

Cees,

Thank you. I have been able to implement these changes.

My last question has to do with the display of this page on mobile devices. Is there a way to add some margin on the left on the mobile view?

Randy

[klooster]

There probably is, I will look into it. 

[rbirkey]

Cees,

Attached is the most recent version of DIVI if you want to test it.

Randy

Divi.zip

[klooster]

Thanks, installed the DIVI theme.

• Try this, put the next css in your WP additional CSS (play with the 90%)

 

/* START WP-TNG INDEX_PHP RESPONSIVE */

@media screen and (max-width: 360px)  and (orientation:portrait) {
.b-famtree {
width: 90%;
    }
}
@media screen and (max-width: 480px)  and (orientation:portrait) {
.b-famtree  {
width: 90%;
    }
}

@media screen and (max-width: 640px)  and (orientation:landscape) {
.b-famtree {
width: 90%;
    }
}

@media screen and (max-width: 750px)  and (orientation:portrait) {
.b-famtree {
width: 90%;
    }
}

@media screen and (max-width: 1136px)  and (orientation:landscape) {
.b-famtree  {
width: 90%;    
    }
}
/* END WP-TNG INDEX_PHP RESPONSIVE */

 

 

• Publish, empty cache and reload

[rbirkey]

Cees,

Awesome! Setting it at 80% looks great on mobile!

Thank you!

Randy

[klooster]

Glad that we figured it out Randy, by the way where do you live?

 

"It's not that I'm so smart, it's just that I stay with problems longer."

-- Albert Einstein --

[rbirkey]

I'm in Madison, Wisconsin, about 2 hours north of Chicago. My Mom, the family genealogist, lives in the Chicago area.

How would I go about creating CSS to format these additional screens into the same center column?

https://birkey.org/family-tree/surnames.php

https://birkey.org/family-tree/statistics.php

https://birkey.org/family-tree/browsemedia.php?mediatypeID=photos

https://birkey.org/family-tree/places.php

https://birkey.org/family-tree/anniversaries.php

https://birkey.org/family-tree/browsesources.php

https://birkey.org/family-tree/whatsnew.php

I assume I could use your CSS as a guide?

[klooster]

Hy Randy, I anticipated that question and are already looking into it. So far I have not found the class or Id yet that controls just the width of only the content of a Divi page in stead of the whole page. 

[klooster]

Try this in WP additional css :

div#et-main-area {
width: 1050px;    
    margin: auto;
}

[klooster]

Hi Randy, I think this works even better with DIVI:

div#et-main-area {
max-width: 1050px;    
    margin: auto;
}

PS: with the css  "width: 1050px"  the TNG pages are not responsive, with  "max-width: 1050px" they are responsive

• See screenshot how the TNG pages of my website look on my local host with the DIVI theme and the css above

[rbirkey]

Cees,

Thank you for giving this additional attention.

On my site, we are using the DIVI "Fullwidth Section (Purple)" for the headers and the footers are set to fullwidth also.

Unfortunately, your code affects those as well.

We need find a way to limit the width on TNG pages that reflect the same width as the "Standard Section (Blue)" DIVI sections between the header and footer.

[klooster]

I understand that Randy, but I do not have the time and the inclination to fully dive into the ins and outs of the DIVI theme, so you have to find out for yourself. Good luck and if you find a solution, I am interested to know how you did it.

All the best!

PS: I think there are a few TNG user in the forum that use my WP-TNG integration and use the DIVI theme, maybe they can help you solve this problem

[klooster]

Hi Randy, could not let it go, my very last call, now with completely  different approach:

1.] Put this class in your WP additonal css:

.divi-tng {
border: 1px solid silver;
background-color: #f9f9f9;
padding: 20px !important;
width: 1050px;    
margin: auto;
}

2.] Place the new divi-tng class in WPTNGtopmenu.php like this:

<?php
/** Loads the WordPress Environment and Template */
require ('../wp-blog-header.php' );
get_header ();
?>
<div class="divi-tng">

 

3.]Put a closing div in WPTNGfooter.php like this::

</div>
<?php
get_footer('tng');
?>

 

Clear your cache and reload.

This wil keep the Fullwidth in the header and the footer of the DIVI pages I think and will only affect the 1050px in the TNG pages (I hope)

 

Ik worked with my TNG_WP DIVI on my localhost. Let me know if it worked on your site.

 

 

 

[klooster]

Did my last solution with the different approach work Randy??

[klooster]

I have send you a PM Randy

[klooster]

Randy just send me a message with the next text:

“ Cees,THANK YOU! Works like a charm! 
Wonderful!
Randy”

So If anyone has the same problem With WP_TNG and the DIVI theme, feel free to use my solution.

[stackos]

Cees,

Wonderful write-up! I'm just hitting a few snags. I'm Using the GeneratePass WordPress theme. Prior to writing and uploading those three files per your instructions, everything looked good minus the header and footer. Then, the pesky TNG menu was there.

View screenshot WordPress - TNG Error(2) for this.

I uploaded those three files and got the header and footer showing perfectly. It's just a huge problem. The width and a weird menu setup no longer bind the width.

Would you be willing to determine the TNG menu and the width issue? If not, I fully understand and will run them as separate entities and link them together using URLs and some menu adjustments. That's just the bad thing about going with multiple themes.

Thanks,
Eric

[klooster]

Hi Eric,

I have no experiences with the GeneratePass WordPress theme and It takes a lot of time and energy trying to solve everyones specific WP theme  layout problems, so I do not want to to do that anymore.

But saying that I will have a quick look at your site, what is the URL, which PhP and TNG version are you using, which pages have the problem you described.

 

[stackos]

On 7/15/2024 at 10:42 PM, klooster said:

Hi Eric,

I have no experiences with the GeneratePass WordPress theme and It takes a lot of time and energy trying to solve everyones specific WP theme  layout problems, so I do not want to to do that anymore.

But saying that I will have a quick look at your site, what is the URL, which PhP and TNG version are you using, which pages have the problem you described.

 

I could have sworn I replied to this with that information. -face palm-

I purchased the Avada theme and followed your method to the T. Sometimes, that's the easiest. Now, I have to learn about theme layout and editing. I am used to Astra. Thank you again for your work on implementing WordPress and TNG.

[stackos]

Does this method work on the 14.0.6 version of TNG? I am doing a local side project and would like to implement either 14.0.6 or 15 with WordPress.

Everything was going smooth like the first time I did this until I get to the table prefix step. I connect to the database, but it will not create the tables.

I'm going to work on it some more tomorrow as I'm getting stir crazy to get started on this project. I know it worked on the 14.0.5 version of TNG without issue as StackClan was running the Kloosterman Method before I just decided to use one of the TNG templates when I upgraded it to 15. I can't try the 14.0.5 version as I no longer have the file. 🤦‍♂️

[klooster]

Hi Eric,

It will work with any version of TNG

[RickM]

31 minutes ago, Eric Stack said:

Everything was going smooth like the first time I did this until I get to the table prefix step. I connect to the database, but it will not create the tables.

@Eric Stack

What error messages do you get?? Installing TNG and using the Kloostermans method should not be an issue especially when setting up the database and creating tables. I'm not really good with database stuff, but am happy to try and work through this with you.. if you could pm me your tng config.php file that might give a clue to what is happening..

I'm sure there will be error logs that might help as well, but am not sure what they may be.. One of the more smarter folks might be able to answer that one..

 

[stackos]

5 hours ago, klooster said:

Hi Eric,

It will work with any version of TNG

Good to know. I'll focus on the TNG side of things.

5 hours ago, RickM said:

@Eric Stack

What error messages do you get?? Installing TNG and using the Kloostermans method should not be an issue especially when setting up the database and creating tables. I'm not really good with database stuff, but am happy to try and work through this with you.. if you could pm me your tng config.php file that might give a clue to what is happening..

I'm sure there will be error logs that might help as well, but am not sure what they may be.. One of the more smarter folks might be able to answer that one..

 

Connected successfully with the database yet when creating the tables. Says TNG can't communicate with the database and no tables were created.

 

Checked the config file and it's like the file isn't being updated even though I'm being shown that it is.

There is a complete install of TNG in the server under another directory that is connected and working correctly so it's this specific install giving issues.

[RickM]

Eric,

Are you using the same database and or tables?? IF so perhaps copy the config.php file or at least the Database info to the new config.php..

If you have created a new database then make sure the database name is correct in the config.php. Have you checked the new database to see if the tables are there..

I don't have much more to offer I'm sorry.. As already said I'm not great with database stuff..