Templates - Getting Started

From TNG Wiki

Jump to: navigation, search

TNG Templates - Getting Started


Article Still Under Construction

Contents

Where do you get the templates?

in a full install

Starting with TNG 7.0 full install, the template files are unzipped in the templates subfolder. So if you go to the location where you unzipped the TNG files, the templates can be found in the templates/templateN folder, where N represents the template number from 1 through 8.

in all TNG versions

In all TNG versions, the templates are available as downloads in the Pre-built Templates section of the TNG download page which shows a preview of the Home page and an Individual page for each of the 8 templates available with TNG

How do you determine what template you want to use?

The easiest way is to take a look at

Items you should look at

  • the Home page (index.php) which you will need to modify to include your own text is displayed when you first access the demo public site, so select 1 through 8 and plain, which is the default TNG template to view the various data items in each template's home page
  • the individual pages displays created by TNG can be accessed by selecting a menu entry from the Home page

Decisions you should make

  • whether you want a left nav area menu as provided by templates 4 and 7
  • whether you only want the pull down menu

How do you setup your site to use a template?

You have to copy all the files from the unzipped template folder to your TNG install folder.

Backup default template files

First backup the following TNG default template files:

  • topmenu.php,
  • footer.php,
  • index.php,
  • templatestyle.css

by renaming the files or copying them to another location

Copy template files

Then copy all the files from the template folder for the template you selected.

For example, if you chose template 3, then copy all the files from the unzipped templates/template3 folder and paste them in your TNG install folder.

In TNG V8 you must copy the template style sheets from the templates/template3/css folder to your TNG css folder, and the images from the templates/template3/img folder to your TNG img folder.

You must overlay the existing files, which is why you should create a backup first.

How do you change your Home page?

To make changes to your Home page in TNG V7, you should

  • Care should be exercised if you use FrontPage or Dreamweaver to use those two products as ASCII editors only and not allow them to fix what it perceives as errors
  • Replace the Lorem ipsum dolor sit amet... text on the index.php (used in the Home pages of template 4, 5, and 7)

In TNG V8, see the Template Settings for instructions on using the new TNG V8 Setup >> Configuration >> Template Settings capability.

How do you change the colors used?

  • Use the FireFox browser with the Web Developer extension installed to determine the CSS class controlling the area where you want to change the color
  • Open the genstyle.css or templatestyle.css
  • Copy the definition you want to change
  • Paste the copied text in mytngstyle.css
  • change the values you want to override and delete all parameters you are not overriding

See Templates - Overriding for examples of overriding some of the template style definitions

How do you change the photos and banners used?

Using a photo editor, such as IrfanView, you can look at the pixel dimensions of the original template photos by selecting Image, Resize and make note of the dimensions of the photo image you want to replace in your template.

Then you can resize (or crop) the photo you want to use to the same dimensions.

Note that if you use a different sized image, you will have to make adjustments to the template source file and may have to also make adjustment to the template formatting.

For detail instructions to make changes to your Home Page, see

How do you change the banners used?

Some of the templates use an image for the banner title, but with TNG 7.0 all templates offer an optional text replacement for the graphic image title.

  • You can use a photo editing tool like Adobe Photoshop Elements or Microsoft Paint to create a new graphic image title.
  • You can use the optional text string and edit it to match your site.

See the information below on what file to change or on how to change the optional text string for each template.

How do you change the tab colors?

Some TNG pages have a series of tabs across the top. You can choose from two different tab styles

  • square provided by tngtabs2.css
  • slanted provided by tngtabs1.css

as specified in Admin >> Setup >> General Setting >> Site Design >> Tabs Style Sheet

change colors to match

You will want to make your

active tab match the fieldnameback definition

inactive tab match the databack definition

from genstyle.css or the templatestyle.css for the template you have selected.

  • If you choose the square style, you can change the colors of these tabs in the tngtabs2.css file.
  • If you choose the slanted tab style, you can change the attributes in tngtabs1.css, but the colors are made from image files.

creating new tab images

To create new tab images in a different color, make sure your photos folder has been made writeable, then go to the page switchcolor.php in your browser, for example http://www.yoursite.com/genealogy/switchcolor.php.

The tab images can also be changed by using the readme.html file that you used for the initial full install of TNG, where if you are using the readme.html from your web site in your browser URL, you can then click here: switchcolor.php in the Customizing Your TNG Pages section of the readme.html full install.

Switch tab colors
Switch tab colors

Make sure you backup your existing tngtabs.png (inactive tab) and tngtabsactive.png (active tab) files before replacing them with new ones.

You can Display the new tabs to see if you like the color chosen before you decide to save them.

Related links

Retrieved from "http://tng.lythgoes.net/wiki/index.php?title=Templates_-_Getting_Started"
Personal tools
Translators