In TNG, these details of biographical or historical interest can be added to the an individual person’s page through addition of custom event types.

Occupation: Cattle Rustler

From the Edit view of the person’s page, the administrator can create Events under “Other Events”. In the “Detail” field, text can be directly quoted from a source .  The source can be attached to the Event.

This method displays the content of the Detail field to the right of the Event, while the Source is placed as a footnote near the bottom of the page.

One caveat to the default TNG page design is that addition of an Other Event Place to the Google Map includes duplication of the Details field for that Event in the map legend.

Occupation: untidy

Since the map legend is a narrow column to the right of the Google Map, these duplicated Details become condensed into short lines of distracting and difficult to read wrapped text.

To remove the duplicated Event Details from the Google Map area, one line of code can be disabled in the getperson. php file.

Find the line:

if($description) $persontext .= " - $description";

and replace it with:

// next line removed to disable mapped Event Details display
// if($description) $persontext .= " - $description";

To further cleanup the Map Legend,  the Place name can be pushed down to the next line with a page break by modifying the next line of code:

$persontext .= " - $dateforeventtable - $place</span></td>\n";

to

$persontext .= " - $dateforeventtable<br/>$place</span></td>\n";

The result is an easier-to-read Google map legend…

Cleaner TNG Google Map Legend

The No. 1 Ladies Detective Angency by Alexander McCall Smith

Old bookjackets are a great resource for page layout inspiration.

The artwork is royalty free and examples are easily found in the public domain.

I ran across this one a while back and loved the simple landscape shapes of the tree near a cabin near which stands a cock crowing at the sunrise.

Peaceful and well-placed country elements gather comfortably around day break on this wilderness home,  reminding the viewer to remember a simpler time of days gone by.

The framing adds subtle interest to the layout, with ribbon-like textures  and transparent borders over a rich torn parchment base.

The typography seems out of place, perhaps hand drawn but ill-placed, as if the work was done by another artist with less skill or understanding of symmetry that the background achieves effortlessly.

The teapot, steaming coffee cups and other seemingly randomly placed clip-art give an impression of afterthought and distracts much from the simple beauty of the page layout background.

Front cover base layout of vintage book jacket after Photoshop cleanup.

With all the clutter removed, the charm of the layout jumps out to please the eye:

Great inspiration for web page template design, perhaps a Family History or Genealogy layout…

Drop menus exist by default in the upper right corner of most core TNG pages. These menus organize links to other core pages for easy access by the user under the three categories titled “Find”, Media” and Info” as shown:

Navigational consistency is important when planning the overall User Interface of a site as it minimizes confusion through familiarity. New users are less frustrated making their way through a new website when they can easily determine how to properly navigate the way to preferred content quickly and with minimal effort.

Once a user becomes confident of navigating as expected, finding content becomes less of a chore and concentration can be focused on the information presented. For most genealogists, providing information to visitors arriving from any where in the world is a primary reason for maintaining a Family History website.

Since the drop menus already exist on most TNG core pages, a User will become familiar with the order of the links in each category and expect to find a similar category grouping order no matter what page is being viewed.

When designing custom pages, and in particular the Home page, similar grouping order can be used to establishing site-wide navigational consistency for the User. With a little planning it’s possible to make the User feel right at Home on each and every page of a website.

While TNG is a powerful application for bringing one’s genealogy to the web, the display and layout of pages “out of the box” is somewhat outdated with respect to web standards. I’ve been using TNG since 2004 and the page layouts are largely the same as they were more five years ago.

My purpose for writing this series is twofold: 1. to record the changes I make for future reference, and 2. to make those changes available to others who may be interested in achieving site-wide uniform page layouts within TNG.

For reference, the following is a list of the core TNG pages as shown on the “out of the box” Home (index.php) page under the heading titled “Other Features”.

TNG Home page "out of the box"

Login/Logout
Register for a User Account
Surnames
Bookmarks
Statistics
Photos
Histories
Documents
Videos
Recordings
Albums
All Media
Cemeteries
Headstones
Places
Notes
Dates and Anniversaries
Reports
Sources
Repositories
What’s New
Most Wanted
Change Language
Access Log
Administration
Contact Us

For the purpose of effective User Interface Design, there doesn’t seem to be any discernible order to the above list. Moreover, the “Other Features” heading is not used on any other page so may serve to confuse a new user. To be fair, a disclaimer at the bottom of the generic Home page states, “Please customize this page!”.

TNG Home page with simple category lists

Fortunately, core TNG pages (pages beyond the “Home” or Index page), have three drop menus built into the upper right hand corner, with the above links grouped under loosely categorized list titles.

These categories can be used as a guide to achieve navigational consistency, not only on the Home page, but also on other custom pages so that a User can intuitively find information of interest no matter what page is viewed.

On the right is a screen shot of a simple customized  TNG Home page as viewed full scree on a 1280 x 1024 display. The color palette is the same as the “out of the box” TNG install.  In this page layout, list categories have been arranged in the same order as those found on drop down menus within the core TNG pages.

While this custom TNG Home page layout was created on a 1280 x 1024 display, all the content is contained within a fluid block that expands or contracts according to the size of the display.  View the custom TNG Home page layout over at my TNG Test database.

Screenshot of Husing.org

I’ve been working on a major project over at Husing.org.

I had free reign on the site, so chose to couple WordPress and TNG.

I used the incredible ThemeHybrid for the framework in WordPress and it’s a joy to work with.

Inspiration for the color scheme came a simple question to the owner, “What’s your favorite color?”.

Imagine my surprise at the nonchalant reply, “RealTree APG“.

After I got the Wordpress layout and color scheme somewhat satisfied, I jumped over to TNG. As I got into development, several inconsistencies in page layout elements began to emerge.

I’ll be covering those modifications in a future series of posts once TNGv7.1 is released a few weeks from now.

Here’s the color palette from ColorZilla:

#e5cfd2 -mauve
#a8001c -red
#006a80 -turquoise
#cfe2e5 – sky blue
# 8fbf60 -lime green
# ece9d8 -concrete gray

Default Tarski color palette.

One major issue was the default Tarski #wrapper 760px fixed width.

Because much of the data in TNG is laid out in tables, content rich pages need a minimum of 800px width to display properly when adopting the Tarski  200px wide sidebar and larger font styles. The 20px Tarski gutters add to the need for increased real estate. In addition, core TNG pages have a variety of table widths, with the Individual pages having the widest table displaying the most content.

Fortunately, the Tarski theme  scales up nicely. The most practical approach was to increase the #wrapper width to 1000px.  This width allowed any size TNG data table to display fully as intended.