Jump to content
TNG Community

TNG does not follow the theme of Wordpress


Jan Bos

Recommended Posts

I try (offline) to integrate TNG in Wordpress. That is not so difficult when I follow the instructions from the WIKI. But the layout of the the pages do not follow the layout of the pages of the Wordpress theme and the blocks in the charts are to small to show all the text.

Again: What can I do?

Jan

Excuse my English: I studied English at about 55 year ago and after that I did not use it very often.

Link to comment
Share on other sites

This is because the TNG css overrides the WordPress css. The easiest way I found to solve this, is to empty the TNG css file, after which the pages will use the WordPress css and your tables and headers etc will be the same style as on the rest of your website. You then need to go through each page to tweak any issues with objects that are defined in TNG but not in WordPress, and add them in your WordPress style editor.

Link to comment
Share on other sites

WARNING: If you empty the whole TNG genstyle.css you will lose a lot of important TNG css.

Quicker and easier just to tweak the needed TNG color in WP, customise, css.

Try this:

/* START databack: background color for data  */

.databack {
background-color: #YOUR CSS COLOR  !important;
}

/* fieldnameback: background color for column and row title sections */

.fieldnameback {
background-color: #YOUR CSS COLOR  !important;
}

/* END databack: background color for data  *

Link to comment
Share on other sites

2 hours ago, klooster said:

Quicker and easier just to tweak the needed TNG color in WP, customise, css

That doesn't work. TNG css overrides *all* WordPress css, also the customized ones. The only different way to change colours, is to change the TNG css. But that means downloading the css, change it, upload it, test it, and start over.

2 hours ago, klooster said:

you will lose a lot of important TNG css.

Much of the css in TNG is also present in WordPress (fonts, tables, lists,...). The TNG specific lines need to be added where necessary, which is what I called "tweaking" in my previous post. There are not that many, only 300 lines or so. The most difficult part, was adapting the sections where styles are hardcoded in TNG and don't use the stylesheet. It's a pain to change those.

Link to comment
Share on other sites

4 hours ago, Jan Bos said:

I try (offline) to integrate TNG in Wordpress. That is not so difficult when I follow the instructions from the WIKI. But the layout of the the pages do not follow the layout of the pages of the Wordpress theme and the blocks in the charts are to small to show all the text.

Again: What can I do?

Jan

Excuse my English: I studied English at about 55 year ago and after that I did not use it very often.

Are you using the TNG-WordPress-plugin, or are you using the Kloosterman method?

If using the plugin, then this works...

find the file css/mytngstyle.css make changes there. Here's the mytngstyle.css file from my site which is using the plugin

http://lisaandroger.com/tng/css/mytngstyle.css

all of the changes of colour so TNG matches WordPress, and some changes for compatibility of buttons etc

Roger 

Link to comment
Share on other sites

49 minutes ago, klooster said:

No disrespect Fluffy, but you are wrong, IT DOES WORK, all my TNG colors are with css through WP, customise css. You have to put !important; behind the css.

Putting !important behind each and every line did not work for everything in my case, and it is from an IT point of view a very unelegant and even confusing solution. You are loading so many pieces of css that in the end you don't know which one is overriding which one and why... The first thing you learn in programming classes, is "less is better". A website should never have 3-4-5 different definitions for the same item within the same context.

I totally stand by my opinion that using the WordPress css as a basis, and only add the few missing TNG lines is the best way to go. It is easier to do, it involves less useless loading of files or code which you don't use anyway, it's clearer and more organised, and - most of all - it results in a way better visual integration. I dare to say that my website (kind of) looks like a unity with the WordPress pages on the same site, and not just like any standard TNG website with a different header/footer.

Link to comment
Share on other sites

I'm using the Kloosterman method. And now I followed his suggestion of extra css in the Theme customizer. But I think it is the half of the work: the pages are still in an other color and the text in the charts is not complete.

Image 6.jpg

Image 7.jpg

Link to comment
Share on other sites

Hi Fluffy, you are completely right in “less is better” and that you have to be very careful to use the !important css rule. Thats why I keep a close watch on when and where I use it. Every WP-css TNG override rule  in my custom css start with a explanation what it does and where it ends.

But fore someone like Jan (sorry Jan) who has probably little knowledge about css etc. A few lines in WP custom, additional css can accomplish the colors he wants to use.

What I like about the WP, customise, additional css is that it works like a visual editor. You can see directly the  css override rule you put into it on the page next to it, even before Saving/publishing it. 

PS: you have a great website

 

Link to comment
Share on other sites

Thanks Klooster,

In this days (in the lockdown for corona) I have more time to work with the familytree and the website. And I take time to learn CSS (and HTML) and some results you can see in the site online: www.janbos.net/tng. But there is so much to learn and after that I should learn the rules in the files of TNG. And most of the stuff goes in English . . . . and that is not so easy for me. So it goes very slow forwards. But I do my best.

Link to comment
Share on other sites

Hi jan,

 

You can change the setup of the boxes in TNG, admin, charts or through ccs in WP, customise, additional css:

 

HERE are my WP, customise  css settings for TNG:

/* START TNG BOX STANDARD */

.pedbox.rounded10 {
height:85px !important;
line-height: 1.1 !important;
}

.pboxname {
font-weight: bold;
font-size: 14px;
}

/* END TNG BOX STANDARD */

 

/* START TNG FAMBOX */

.smallpic {
margin-top : 0px !important;
}

.mfambox {
height: 63px !important;
font-size: 14px !important;
width: 200px !important;
}

.mfambox a:link {
font-size: 14px !important;
}

.fambox  {
font-size: 12px !important;
height: 63px !important;
font-size: 14px !important;
width: 200px !important;
}

.fambox a:link {
font-size: 14px !important;
}

.fambackground {
background-color: #F9F9F9 !important;
}

/* END TNG  FAMBOX  */

Link to comment
Share on other sites

17 hours ago, klooster said:

Every WP-css TNG override rule  in my custom css start with a explanation what it does and where it ends.

That's a good habit! I never thought of doing that, great idea. I usually do it when changing php files through mods, but I can also do it with css of course.

17 hours ago, klooster said:

A few lines in WP custom, additional css can accomplish the colors he wants to use.

You are absolutely right if it is only a couple of colours. But there is much more to change if you want to make TNG and WordPress perfectly similar... 

 

17 hours ago, klooster said:

What I like about the WP, customise, additional css is that it works like a visual editor

Absolutely! That's why I use that rather than looking for the WP code/styles and transferring them to the TNG files.

 

17 hours ago, klooster said:

PS: you have a great website

Thanks :)))
Your site was actually my trigger to build one myself!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...