Jump to content
TNG Community

Finding a good Theme


HerbKilby

Recommended Posts

I am trying to get a wordpress theme that works with TNG and the Kloosterman method of integration. I have tried several themes that seem to work okay, including the Family Memories theme that supposedly was built specifically for integration between WP and TNG using the Kloosterman method.

They all seem to be working okay until you start testing the various charts; specifically the ancestor or descendant charts in the compact, box, and text representations.

I have attached 4 images.

  • First is a text chart using Wordpress theme (I've tried several and they all do the same thing. Notice how the lines are corruped into black boxes).
  • Second is a text chart without integration (this is the way TNG ships and the way it should be).
  • Third is a box chart using Wordpress theme. (notice how the bottom of the box cuts off text.
  • Last is a bocx chart without integration. (once again this is how TNG ships and should be).

I looked at the theme Kloosterman is using, (which he created himself), and none of the problems I've mentioned exist on his site.

So besides the BIG question which is "Has anyone found a pre-made theme that works well with TNG?" What is it in Wordpress that is interfering with TNG's chart presentation?

ScreenHunter_06 Oct. 30 15.57.jpg

ScreenHunter_05 Oct. 30 15.56.jpg

ScreenHunter_03 Oct. 30 15.55.jpg

ScreenHunter_04 Oct. 30 15.56.jpg

Link to comment
Share on other sites

Okay so it seems that this forum's software will only show my first three images. Well the first two are good proof that the specific theme you choose for wordpress can have dire results when using the Kloosterman method of integration.

The problem is that when showing TNG pages, TNG loads all of it's stuff in the <head></head> of the webpage (this includes all of its css declarations regardless of whether it is from a css file or written in the head, then Wordpress css is written. What does this mean? CSS stands for cascading style. In other words, your browser obeys the last command first. So when TNG set, say, a line height of 1 and then your Wordpress theme set the line height to 1.5 or some other number greater than 1, it will do things to the presentation of the TNG part of the page that mess things up. Simply put, in the box chart, TNG specifies the size of the box that the information will go in. The boxes size is calculated so that the information will all fit. Then along comes the wordpress theme and changes the font, font size, and line height. All of the sudden the information no longer fits in the box.

It would seem that the simplest solution would be to have the wordpress theme load all of its css stuff first then tng adds its css and all would be right with the world. But, this can have a cascading effect on Wordpress. That theme designer went to all the trouble to build a great looking theme. Of course he/she did. That is why you chose that theme in the first place. Most of what makes that theme look so good is its css. Now we would be stepping all over that and probably making it look in ways never intended.

What is the solution? That all depends on what you really are doing with the integration of Wordpress and TNG. It would seem that most of us that are using or thinking about using it for, is to have a presentation layer out side of just showing what TNG shows, that is easy to maintain and looks good. But when we are showing the TNG portion of the site, we simply want the page to look just like the rest of the site; all the time. So we might have a global navigation that is handled through Wordpress, a common page top, and a common footer. We really aren't tapping into all the bells and whistle Wordpress offers while we are on the TNG part of the site.

Since no one has really addressed this issue before, that I know of, and there hasn't been an outpouring of advice or suggestions, I will take that this is somewhat of a unique discussion. I will try to disseminate what I have learned and what I have done, here; and probably through the wiki or some other means of presenting a more durable, time wise, presence that can be referenced in the future. 

Link to comment
Share on other sites

1 hour ago, klooster said:

You have to modify the the genstyle.css (or the mytngstyle) to get the TNG colors to match the WP theme colors. 

Cess,

The problem is not colors, but that the themes are stepping all over TNG's css. Your method results in TNG's css being loaded in the head first then WordPress's css is loaded. Editing TNG's css still results in WordPress loading last and therefore cascades in over writing it.

We're talking about changing line-height and font and font size. Most all of the themes' css is a big bloated cow.

Link to comment
Share on other sites

I have no problems with my theme and from what I read in the forum there are a lot of users of my integration method that also do not not have your problem. I must be theme related.

 

Link to comment
Share on other sites

5 hours ago, klooster said:

I have no problems with my theme and from what I read in the forum there are a lot of users of my integration method that also do not not have your problem. I must be theme related.

 

It is theme related. Of all the people that posted links to their site using your method, which I can view, are having the same problem, with exception of those using the suffusion theme. The suffusion theme is no longer available since WordPress has decided it is a non-compliant theme.

I have even tried _score's WordPress theme that is supposed to be, well unformatted. I believe the problem lays in the Customizer that WordPress insists be included in compliant themes.

There is nothing wrong with your method. In fact I think it was a brilliant idea. The problem is that theme writers want to format every little thing. TNG is being effected by inheritance, which gives me an idea. I'll have to do some experiments to see if I can create a way to force the themes to behave differently through their css.

Link to comment
Share on other sites

Why not design your own unique theme. I did that with Artisteer.

Artisteer download

 

Artisteer is a template creator allowing quick and easy creation of design templates for Joomla, WordPress, Drupal, HTML and more. Artisteer is a truly excellent tool, it’s very simple to use and the finished product is every bit as professional as the leading premium template sites have to offer.

 

  • Artisteer supports HTML5, CSS3, Google Web Fonts and has Online Access to Flickr Images.
  • Artisteer has the ability to set forms for shapes and images in the Header.
  • Custom Position control in the Header.
  • Transparent masks allow user to make part of the Header transparent so the background is shown.
  • You can add multiple Text Blocks (Shapes), plus style them with masks, textures, glares, etc.
  • The software can output designed theme to many famous platforms, including Blogger, WordPress, Joomla, DotNetNuke, Joomla, Code Charge Studio, Visual Studio ASP net and pure HTML.
  • Add your own rich user experiences, such as animations, directly in Artisteer.

What about the finished code? It’s pretty clean and has all of the cross-browser fixes and patches loaded into the code, so you don’t need to worry about browser compatibility with your new template or theme. It was clear for me (and still is) that Artisteer is a perfect tool for creating WordPress templates. The rest of the functionality I realise by implementing or creating custom CSS or extensions for CMS.

Link to comment
Share on other sites

Regarding overriding stylesheets.

Any generally inline styles (including WP or TNG styles) can be overridden with the !important rule

How Cascaded Style Sheets Work

In order to understand how the !important rule works, you will first need to understand how cascaded style sheets work. As the name implies, the styles in cascaded style sheets are processed by the web browser in a certain order. The first order is based on the source of the style sheets and can be listed as the following by increasing importance:

1. Browser styles. These are the default styles declared by the web browser.

2. User styles. These are the custom styles the user declares using browser’s user style sheets.

3. Author styles. These are the styles the developer of the website declares in CSS style sheets.

4. !important author styles. Author styles with !important rules.

5. !important user styles. User styles with !important rules.

In addition to the above precedence order of styles, the order of importance for the style sheets within the author styles is as follows:

1. External style sheets, which are located in separate .css files.

2. Internal style sheets, which are located in the same document, usually within the <head> element.

3. Inline style sheets, which are applied to specific elements at the point where they appear within the HTML code.

As demonstrated in the above section, CSS has a natural order of importance assigned to declarations depending on where they are located. The !important statement is used for breaking this order and adding weight to a specific declaration to put it in effect, ignoring the others. It is used for overriding the styles that are previously declared in other style sources, in order to achieve a certain design or layout goal.

Here is a simple example

1

a { color: #333 !important; }

This will render all the links on the page with #333 color regardless of what other CSS declarations are made that are affecting the link elements. As you can see from the above example, the !important keyword must be placed at the end of the declaration, after the property value and before the semicolon. In the example below, the font-size of the paragraphs is overridden by !important rule in the first declaration, even though the second declaration should have been in effect considering the natural flow of CSS.

How to Override !important in CSS

The !important rule is used for overriding the previously assigned CSS declarations. But it is also possible to override itself. You can override the !important rule, naturally by another one. The overriding !important rule should be declared lower on the CSS flow and it should have the same or higher level of specificity in order to be in effect.

1

2

img { border: none !important; }

#article img { border: 2px solid #fff !important; }

This is how the CSS !important rule works and hopefully this post will help you in deciding where to use it and where not to use it.

Link to comment
Share on other sites

On 31/10/2016 at 9:12 AM, HerbKilby said:

They all seem to be working okay until you start testing the various charts; specifically the ancestor or descendant charts in the compact, box, and text representations.

I have attached 4 images.

  • First is a text chart using Wordpress theme (I've tried several and they all do the same thing. Notice how the lines are corruped into black boxes).
  • Second is a text chart without integration (this is the way TNG ships and the way it should be).
  • Third is a box chart using Wordpress theme. (notice how the bottom of the box cuts off text.
  • Last is a bocx chart without integration. (once again this is how TNG ships and should be).

I looked at the theme Kloosterman is using, (which he created himself), and none of the problems I've mentioned exist on his site.

Hi Herb,

Your descendant tracker charts appear to be doing the same thing... http://kilbygenealogy.com/genealogy/desctracker.php?trail=I38,F8,I43,F10,I60,F492,I2552&tree=Culpeper

I was wondering if the new Scrollbox Mod by Erik Hoppe would have any affect on those charts?... http://tng.lythgoes.net/wiki/index.php/Scrollbox_mod

... The other thing is the link to your site at the bottom of your comments doesn't appear to be working today?

Link to comment
Share on other sites

Try another theme.

I tested the free Response theme, downloadlink below.

No problem there, see attached printscreen. You only have to make the popup boxes in TNG admin a litte bigger.

Downloadlink: Responsive

Schermafbeelding 2016-11-02 om 07.34.48.png

Link to comment
Share on other sites

13 hours ago, Merv said:

Hi Herb,

Your descendant tracker charts appear to be doing the same thing... http://kilbygenealogy.com/genealogy/desctracker.php?trail=I38,F8,I43,F10,I60,F492,I2552&tree=Culpeper

I was wondering if the new Scrollbox Mod by Erik Hoppe would have any affect on those charts?... http://tng.lythgoes.net/wiki/index.php/Scrollbox_mod

... The other thing is the link to your site at the bottom of your comments doesn't appear to be working today?

Thanks Merv for pointing out that I can't even spell my domain name correctly. It's fixed now.

Link to comment
Share on other sites

Okay, we are down to one problem, and that is IMG.

Everybody building themes that are intended for immediate implementation are producing "responsive" design.

Images are not naturally responsive and are usually inserted into html with specific dimensions of height and width in pixels. The problem with defining dimensions is that as the view port changes, the image won't. This is not desirable in responsive design.

CSS3, in an attempt to make it easy to make images responsive by allowing the height property to be set to auto.  Auto trumps all other settings, regardless of cascade precedence when applied to an element like IMG.

TNG draws the lines that connect individuals in the text chart of ancestors using a 1 pixel black image. The text chart positions the individuals using a table to simulate a grid. Furthermore, the 1 pixel black image is set to a 1 pixel height using in line styling. When the theme's css sets the IMG height property to auto, the browser uses that setting and applies it to that image and expands it to the height of the container; the table.

As seem in the image I included at the beginning of this post.

I am still working on a simple solution that can be implemented by anyone on any theme.

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...