Flexible TNG Template

From TNG_Wiki
Jump to navigation Jump to search
Restricted Downloads of Flexible TNG Template are restricted to logged in users. If you do not have a user account on the TNG Wiki use the Request Account link to request a user account Restricted
Caution If you have trouble downloading with Google Chrome, Vivaldi, Brave or other Chromium based browser, try using a right-click and select Open in new Window, then F5, or use another browser such as Firefox


Caution


Flexible TNG Template
Summary Customizable Template for TNG site
Validation
Mod Updated 27 Jun 2020
Download link
Download stats view statistics
Author(s) Rick Bisbee
Homepage Bisbee Family Connection
Mod Support Support for Flexible_TNG_Template
Contact Developer As above
Latest Mod 12.3.0.0
Min TNG V 12
Max TNG V 12.3.0
Files modified
none
Related Mods
Notes



Description

You can see this template in action on my live website: https://bisbeefamily.com.

  • Uses any available template number. For this discussion we installed it as template93.
  • Includes install.php utility to insert template data into the TNG database.
  • Select as website's active template in the TNG Admin's Template Settings area.
  • Create custom content by editing three PHP files in the template's 'inc' folder.
  • Other content files may be added as desired.
  • Programming by example for default content files.
  • Implement one of four customizable color themes on the fly.
  • Degrades gracefully with changes in screen size.
  • supports mobile displays.

Screenshots below show the green & white theme. Others are black, blue and red.

Normal Display

Tmp001.jpg

Squeezed Display

Tmp004.jpg

Mobile

Tmp005.jpg

Compatibility

Tested with TNGv12.3 but will probably work with earlier versions of TNGv12.

Tested with PHP 7.4.1 but should work with earlier versions.

Tested with MySQL mysqlnd7.4.1. Should work with earlier versions.

Installation

If possible, install the template on a WAMPS test site and add your custom content off-line. Then upload the entire template folder to your live site and install it there.

  1. Download, unpack and copy the 'template' folder to your templates directory and append any unused template number to the folder name, for example, template93.
  2. Navigate your browser to templates/template93/install.php and follow the directions. This updates the database templates table with the new template93 information.
  3. In your admin setup, select template93 as your current template, enter your website title and save it.
  4. Go to the home page and read the instructions for adding your own content.
  5. At the bottom of the home page is a link (not shown) -- Theme -- that takes you to a page with options for changing the template panel colors.

To uninstall the template, set your site to a different template number in your Admin template setup. Then navigate your browser to templates/template93/uninstall.php to remove the template's information from the the database. Then to remove it entirely from the site, delete the templates folder you created for it.

Customizing

  • Nav Bar. The top Nav Bar can be modified in templates/template93/topmenu.php. For example, you might want to remove the Profile link to keep users from changing their contact information.
  • Title Text. Site Title text is set in the Admin Template Settings screen.
  • Title Font. To use a different true type font, add the new TTF file to the template folder, and change the name in the templatestyle.css rules for @font-face and .maintitle styling. You may also need to change the font size.
  • Site Photo .If you want to replace the site photo at the top of the home page, make your own photo 1100px x 260px. It can be taller or lower, but stay with 1100px width because that is the max size for the entire page when opening the browser up wide. Use the Admin Template Settings to install your new photo -- Main image (home page).
  • Home Page. To add your own home page content, open templates/template93/inc/frontmatter.php and modify it with a text (code) editor. Basic knowledge of HTML is required, but you can us the initial content as a guide. If proficient in HTML/PHP, you can also add structures such as menus or PayPal buttons.
  • Sytles and Themes. You may use one of provided template themes, or style your custom home page elements in the template's css/mytngstyle.php, but leave the @import statement at the top of the file.
  • Bottom Panel. The links in the panel at the bottom of the page can be found and edited in templates/template93/inc/bottommatter.php. Use the initial links as a pattern for creating your own HTML links. Unused links can be deleted. This panel can be used for a different purpose if you choose.
  • About Us. Edit templates/template93/inc/about.php with information about your organization or website. This content will be displayed when a visitor clicks on About in the top Nav Bar.

Language Support

No problem if your site supports multiple languages. The template will install the initial default links to content files for you to customize in your primary language. You can then create other-language versions of the content files, and in the Admin Template Settings you can create a copy of the element with a link pointing to the file in a different language. So for example, if your site is in English but supports French, use the TNG Admin page to create a copy of front-matter link, select French-UTF8 as the language for the new link, and edit the new link to point to your French-UTF8 front-matter file -- for example, frontmatter_fr.php in the template's 'inc' folder. When a visitor selects French-UTF8 as his language, the French-UTF version of your front matter will be displayed.

To avoid modifying TNG factory files to get more meaningful labels in the Admin Templates Settings, stock TNG language-supported links are used:

  • featuretitle1 - link to file containing front matter for the home page.
  • featuretitle2 - link to file with About US information.
  • featuretitle3 - link to file with bottom matter (links)

Regarding featuretitle3 (bottom-matter), if the content contains links to other on-site pages, those pages can also be in other languages and will be selected the same way as the front matter links. An example might be a links to your FAQ page written in several languages.

You can expand the number of database supported elements by editing templates/template93/install.php. Use the template's uninstall.php/install.php to reinstall all the template elements in the database. Then modify your content to use the new elements with getTemplateMessage().

Themes

Themes are simple color assignments to the TNG label and data panels. They also apply to the home page top bar and bottom-panel.

  • Color themes can be changed on the fly by clicking on the 'Theme' link at the bottom of the home page. This link is only available to admins.
  • You can alter the colors/shades of the default selections by editing theme.php. If you are comfortable using CSS, you have an unlimited palette of colors for the title and other panel colors to choose from.

Tmp003.jpg

How Themes Work

When an admin clicks on the Themes link at the bottom of the home page it launches 'theme.php'. After choosing one of the four themes, the script saves the relevant CSS to a new file -- 'templates/template93/css/theme.css'. During execution, mytngstyle.css imports theme.css and because the styles are loaded last, they take precedence over all other TNG and template rules.

Serious tinkerers can modify or add to any of the four options by editing themes.php.

Template with red panels
Retrieved from "https://tng.lythgoes.net/wiki/index.php?title=Flexible_TNG_Template&oldid=66237"