Which css files to use

[John Paul]

Hey everyone.  Question about the Kloosterman Method.

When you guys are talking about using wordpress css file(s) instead of tng css files, what wordpress css files are you referring to?  The actual wordpress css or the themes style.css?  Just a little confused about that.

I have a live test site setup (well not setup, but viewable).  https://wptng.joneshyman.org

 

[fluffy82]

1 hour ago, John Paul said:

Hey everyone.  Question about the Kloosterman Method.

When you guys are talking about using wordpress css file(s) instead of tng css files, what wordpress css files are you referring to?  The actual wordpress css or the themes style.css?  Just a little confused about that.

I have a live test site setup (well not setup, but viewable).  https://wptng.joneshyman.org

 

Your theme's css.

[klooster]

 

The easiest way to customize your WordPress theme is using the WordPress Customizer.

You access this in one of two ways:

• When viewing your site (when you are logged in), click the Customize link in the admin bar at the top of the screen.
• In the admin screens, click on Appearance > Customize.

The Customizer gives you a variety of options for tweaking not only your Theme css BUT ALSO your TNG css.

You do not need to do it with the mytngstyle.css anymore!

[John Paul]

Thanks fluffy82 and klooster for the info.  Got both posts printed out and in my notes.

[John Paul]

ok, I'm still confused about which exact .css file to be using.  In genealogy /css/ folder there are multiple .css file, but I figure either genstyle, mytngstyle or templatestyle.css

I use the Astra theme in wordpress, so in the Astra folder there is a style.css with nothing in it.  In /astra/assetts/css/minified or unminified/ there are many css files.  So you see I'm a little confused about all that.

I know I can add css to each element thru customize or additional css fro each element in elementor, however I find that some added css doesn't work ib this case...

 

[fluffy82]

21 minutes ago, John Paul said:

I know I can add css to each element thru customize or additional css fro each element in elementor, however I find that some added css doesn't work ib this case...

In my experience, this only works if genstyle.css is emptied.

[John Paul]

2 minutes ago, fluffy82 said:

In my experience, this only works if genstyle.css is emptied. 

Thanks Fluffy82, I'll try it, but I wonder why that is?  I'll keep you posted.  gotta leave the house for a few hours, be back later.

[klooster]

With all respect Fluffy82, but that is not true.
The WP Customize css will override any CLASS  or ID in genstyle.css and if it occasionally does not just change the ending ; into !important;

The genstyle.css does NOT have to be empty. 

That’s the beauty of TNG integration with Wordpress.

PS: I do not even bother with genstyle.css anymore, even after an TNG update, the WP Customize css does it all.

[fluffy82]

1 hour ago, klooster said:

The WP Customize css will override any CLASS  or ID in genstyle.css and if it occasionally does not just change the ending ; into !important;

That's what I said (in a different thread about the same question).

Sorry to say, but the WP css *DOES NOT* always override the TNG css, and the only way to make sure it does, is to put !important all over or, as I do, simply not use the TNG css. It's not "occasionally", it's almost all the time.

[klooster]

My whole TNG-WP website is governed with css changes through the WP-customize. Some with just  ;  and a lot with !important; .

So Fluffy you are right at that point, most of the time with !important;  at the end and not occasionally. And personally I do not care if I have to put  !important;  at the end, as long as it overrides the TNG ID and/or CLASSES.

But the point I am trying to make is that you can do all your TNG css changes from within the WP customize and with !important; at the end, if necessary, it will override the TNG css.

 

 

PS: 

[fluffy82]

32 minutes ago, klooster said:

So Fluffy you are right at that point, most of the time with !important;  at the end and not occasionally. And personally I do not care if I have to put  !important;  at the end, as long as it overrides the TNG ID and/or CLASSES.

In my experience putting !important all over the places gives some weird results. It's much cleaner and less confused if you don't do that. Removing the TNG css also makes sure absolutely everything that can be used from the WP css actually is used. I see far too many WP-integrations where the TNG portion just looks like TNG inside an iframe in WP, with its own styles and colours because (for example) the WP button styling does not override the TNG styling, so buttons will look differeny on WP and TNG pages. There's a WP button css, there's a TNG button css, and you add another WP-override button css (or keep different buttons). While I don't need to add anything, my buttons are the same on all pages.

[klooster]

I am always  ready to learn Fluffy

So you emptied the genstyle.css?

Did you put all the genstyle.css in WP customize?

[fluffy82]

37 minutes ago, klooster said:

I am always  ready to learn Fluffy

So you emptied the genstyle.css?

Did you put all the genstyle.css in WP customize?

I need to keep the genstyle.css file with the phrase "mods put css after this line" (don't remember the exact text) to make sure mods still work, otherwise it's completely empty.

I went over all my TNG pages one by one, starting with the most elaborate ones (getperson, searchform, surnames) and checking which parts of the layout needed to be changed (mostly background colours and "display:" settings, and some padding/margins for TNG specific buttons like the letters of the alphabet in the search pages). I used the original genstyle code as a guideline, but didn't copy everything. Only the bare minimum to make the site work. I only needed to do this once, there have been no major problems after upgrading TNG. I started with TNG 11 and upgraded every version. up to TNG 14 now.

I have about 1500 lines of css in WP customize, but this includes css for the WP part of the site as well. I estimate that about half of it refers directly to TNG pages, about 800 lines.

My website is a mess for the moment, as about 20% of the mods I use are not updated to TNG14 yet. Among them the most important one, Regroup Person Profile. A lot of css change specific divs inserted by this mod, so these are not visible for the moment, resulting in a jungle...

 

PS the only problem with this method, is that it also removes all the css from the admin part, which for some reason does not or only partially inherites the WP css. I don't care about that portion of the site to be styled like WP, so to make things easier for me, I just place the content of genstyle.css in a new file, and set adminlib.php to grab that file. Problem solved with pink and purple admin pages

[John Paul]

This all interesting, and I've been using the theme customizer and the elementor -edit column - advanced - custom css and that seems to work ok.

Let me rephrase my original question.

It looks like I need to adjust the container width on some tng pages, like searchform.php, cemeteries.php, etc.  So do I set that in /genealogy/css/ mytngsyle or one of the wp theme's css files?  you can't really do that in customizer.....

here's an example...

Edited February 21, 2023 by John Paul
add screenshot

[fluffy82]

33 minutes ago, John Paul said:

you can't really do that in customizer.....

You can

Mine shows correct automatically, so I didn't have to change anything.

In your case, you probably need to add 

#tngwp {
width: 100%;
}

to the custopmizer (with !important in case it doesn't work).

 

PS don't mind the two muddled up buttons bottom right on my screenshot, it changed after the last upgrade and I didn't have time yet to change it.

[John Paul]

That didn't work for me, or I'm putting it the wrong css.  I put it in appearance - customize - additional css.  used it like you showed and added !important; to it.

 

[fluffy82]

1 hour ago, John Paul said:

That didn't work for me, or I'm putting it the wrong css.  I put it in appearance - customize - additional css.  used it like you showed and added !important; to it.

 

It's in the correct css.

You can already see a difference though: #tngwp is now the full width of the container (look at the lilac bar on top, which is wider than before). The problem is the size of .ast-container which is set to maximum 1240px.

You can put, for example:

.ast-container {
  max-width: 1920px;
}

But keep the #tngwp at 100% too.

[John Paul]

I don't want the container to be full width of the site, 1920px (that's the width of the header image).  I see that the ribbon bar (lilac bar...) is now full width of the container the tng scripts run in.  That's what I need, then some of the other stuff will straighten out like famsearchform.php...

so maybe just put max-width: 1212 or whatever it's supposed to be...?

Gotta go, dr's appt.  be back in a couple of hours.  Thanks edglimited.

[fluffy82]

1 hour ago, John Paul said:

so maybe just put max-width: 1212 or whatever it's supposed to be...?

It's totally your choice how wide you want it to be.

[John Paul]

6 hours ago, fluffy82 said:

The problem is the size of .ast-container which is set to maximum 1240px.

ok This is the size of the container that is should be, so why doesn't the tng scripts use that space?  some do but most don't.  I'll keep digging at it.

[John Paul]

ok, I put that in tng css mytngstyle and it works.

But I still have issues with 5 tng scripts.  Should I create a new thread for that?