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

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.

The latest version of The Next Generation of Genealogy Sitebuilding (TNGv7.1) was released today.

In the previous post I mentioned writing a series on modifications to the out-of-the-box installation so I created a new database and uploaded the files for this release.

This version includes an “Express Installation”. After FTP’ing all the files to the server, I went to my browser and navigated to  the Installation instructions found in the TNG readme.html file. I chose “Express”.

Wow! It took about 5 seconds to get through the first two steps. I ran into a snap at that point, where the express launch wouldn’t write the databse credentials to the server. “You must log in first” appeared in red.

No big deal, I navigated to the Database Setup link in the left menu and found the admin link provided in case of failure. In Admin>Settings>General Settings>Database, I entered the database credentials, hit Save at the bottom of the page, and I was done.

Two minutes. Tops. Maybe we can call this “The Two Minute Install”.

Stay tuned for a series on core page modifications to TNG.

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.

Coen had asked me to work up a custom TNG layout to match WordPress “Tarski” theme.

The main WordPress page as rendered by the Tarski theme looks like this:

We skipped the TNG homepage and directed the “Genealogy” link to TNG’s surname page instead. I love the uniformity of the custom design:

Here’s a sampling of out of the box color scheme for TNG  pages with default styles governed by genstyle.css:

I’m not sure what the rhyme or reason was for the choice of colors.

Let’s “pick” it apart:

#343399- dark blue

a (color) selected by a:link, a:active in genstyle.css (line 53)

a:hover (color) selected by a:link, a:active in genstyle.css (line 53)

a.snlink (color) selected by a:link, a:active in genstyle.css (line 53)

a.footer (color) selected by a:link, a:active in genstyle.css (line 53)

a.footer:hover (color) selected by a:link, a:active in genstyle.css (line 53)

#333365 – midnight blue

p.header (color) selected by .header in genstyle.css (line 22)

a.snlink:hover (background-color) selected by a.snlink:hover, .snlinkact in genstyle.css (line 398)

td.fieldnameback fieldname (background-color) selected by .fieldnameback in genstyle.css (line 63)

#E0E1F6 – pale blue

li.drop (background-color) selected by #mnav li in genstyle.css (line 210)

li.drop (border-top-color) selected by #mnav li in genstyle.css (line 210)

a.snlink (background-color) selected by .snlink in genstyle.css (line 387)

td.databack (background-color) selected by .databack in genstyle.css (line 71)

#666634 – olive

a (color) selected by a:visited in genstyle.css (line 58)

a:hover (color) selected by a:visited in genstyle.css (line 58)

#FFCC00/#FFCC33 – yellow

a.lightlink:hover (color) selected by a.lightlink:hover, a.lightlink:active in genstyle.css (line 112)

#FFFFFF -  white

body (background-color) selected by body in genstyle.css (line 45)

ul#first (background-color) selected by #mnav li ul in genstyle.css (line 226)

ul#second (background-color) selected by #mnav li ul in genstyle.css (line 226)

ul#third (background-color) selected by #mnav li ul in genstyle.css (line 226)

a.snlink:hover (color) selected by a.snlink:hover, .snlinkact in genstyle.css (line 398)

#000000 – black

body (color) selected by body in genstyle.css (line 45)

TNG Template 4

This site was initially built with the Template 4 design included with TNG.

When Sharon Randall approached me for help, she asked if I could incorporate a photo of sculptured tree her son gave her which sits on her mantle.

Of course, I’m always excited to have a client offer their own personal inspiration but one look at the image of this beautiful keepsake made me want to do more than just plug it into a pre-made template. As I stared at her Home page, I wondered how I would manage to work that particular image into the original color scheme of this template. Perhaps the green and red would have looked okay, but reducing the beautiful tree to a small enough size to fit into the space where the ‘main street” image sits seemed a sinful waste.

Tree sculpture inspiration

The image offered a rich palette of earth tone colors that were difficult to overlook as inspiration for a custom design.

Using the Colorzilla add-on for FireFox, I pulled colors from the image to replace those in the stock template.

Sharon was thrilled to see the cherished gift from her son showcased on the home page of her new genealogy site and in the time since, the site has taken on a life of it’s own, evolving into a thing of beauty that both of us are proud of.

Watch for future posts on details of the site evolution.

I’m working on a project with a Sharon over at Generations Gone By who has a special affinity for the “Places” category of her family history.

The addition of GoogleMap functionality to TNG fueled the fire of this inspiration. There was a need for more place pins…

In TNG>Admin>Setup>Map Settings>Help:Map Settings

Place Levels Pins: Labels and Colors

Each geocode location can be associated with one of six Place Levels (e.g., Location, Town/City, County/Shire, etc.). The labels for these levels can be found in the “alltext.php” file in each language folder, and you may override them in your “cust_text.php” file (also in each language folder).

The pin colors are determined by values set in mapconfig.php. If you would like to change the pin colors, go to the TNG downloads page and download the full palette of 216 different pin colors, then open your mapconfig.php file in a text editor and enter the number of the new pin color next to the corresponding place level variable. Finally, upload the new pin image file(s) to the googlemaps folder on your site.

For more detailed instructions on how to generate your own custom Google Map pins, visit Google Chart API.

As such, I feel it is my responsibility to oversee user registration. All registered users must prove relationship with a name in my database in order to gain access to view “living” information.

I have a few tricks to handle registered users which you may find helpful.

When a new user registers for access, copy the email address of the user and store it below in the “Notes” field. Enter an administrative email address into the email field. Set the “Rights” and “Access Limits”. Check the box “Notify this user upon account activation”. Click “Save”.

Once activation notification is sent to the administrative email account, edit the user account  to remove the administrative email address by replacing it with the user’s email stored in the “Notes” field. Click “Save”.

The activation notification email includes the user account login info.  Copy the account info from the activation notification into a new email and send it to the user.

The original activation notification is kept on record in a folder of the email program.

If a user forgets the login info, a request to have it sent to the account email address can be made.  However, registered users may forget over time, which email address was used to establish an account.

By retaining a copy of the user registration outside of TNG, the site administrator can use it for the following:

1. Log in as the registered user to view and/or verify access controls are set properly.

2. Supply the user with account registration info if they cannot gain access.