Flat and Squared mod

Flat and Squared mod
Summary	Makes the interface flat and squared.
Validation	The mod is XHTML compliant.
Mod Updated	01 Oct 2020
Download link	For TNG 14.0 TNG 13.0 Flat_and_Squared_v13.0.0.2.zip For TNG 12.0 TNG 11.1 Flat_and_Squared_mod_v11.1.2.2.zip
Download stats	Flat and Squared
Author(s)	Erik Hoppe
Homepage	Flat and Squared mod (this page)
Mod Support	TNG Community Forums
Contact Developer	TNG Community Forums
Latest Mod	11.1.2.2 for TNG v11.1.2+ 13.0.0.2 for TNG13+
Min TNG V	11.1.2
Max TNG V	14.0+
Files modified	See TNG Modules Impacted
Related Mods
Notes	Author of TNG Colouring Book Mods by me: At my user page.

Purpose of the mod

While I was adding Template #15 to the TNG Colouring Book I was inspired by the flat look of the index page - and some recent webdesigns I've seen.
So I created a design add-on that I call

Flat and²

It removes shadows, 3D-borders and rounded corners making the interface "flat and squared".
A site using this mod with template #15 (customized) is found here: botebygden.se (Community research site - in Swedish only).

Developer

This mod was developed by Erik Hoppe who is NOT maintaining or developing this mod.
See Mod Support in the data box top right.

Requirements

TNG 12.0

TNG 11.1

• A working TNG installation.
• A backup of all affected files (see the list below)
• An installed current version of the Mod Manager (is already included in TNG)

Before Installation

• If you want to use one or more of  templates # 9, 10, 11, 13 a/o 14 
• If you use the  Scrollbox mod 

You may need to edit a few things at the end of file flat2.css.php that is found in the mod folder Flat_and_Squared.X ("X" being the current version number).
You will have access to that folder and file when you have un-zipped the download file.

Scrollbox mod users

The mod will by default make a 1-pixel border to mark the scrollbox. This is a good visual sign.
The Flat and ² mod removes this border.
If you want to keep this border, there are two lines you have to delete or remark (I suggest remark, so they are left there).

>>> Look for this, close to the end of the file:

/* *** SCROLLBOX MOD */
/* *** If you use my SCROLLBOX MOD and WANT TO SEE THE BOX BORDER: DELETE/REMARK the next TWO lines */
#xerxxScrollbox { border: none !important; }
#fanWrapper { border: none !important; }

Remark (or delete) the two last lines:

/* *** SCROLLBOX MOD */
/* *** If you use my SCROLLBOX MOD and WANT TO SEE THE BOX BORDER: DELETE/REMARK the next TWO lines */
/* #xerxxScrollbox { border: none !important; } */

/* #fanWrapper { border: none !important; } */

Templates #9 and #10

The horizontal bar, below the toplogo and the background of the right side menu headings of the index-pages, are graphics:
If you have set colour to any of them, and want to keep the colour

there are a few lines you need to delete or remark (I suggest remark, so they are left there).

>>> Look for this, close to the end of the file - there are corresponding lines for template #10:

/* *** TEMPLATE #9: If you HAVE SET COLOUR to the horizontal bar: DELETE/REMARK the next line */
.art-nav-l, .art-nav-r { background-image: url('img/f2t9nav.png'); }

/* *** TEMPLATE #9: If you HAVE SET COLOUR to the right side menu headings background: DELETE/REMARK the next line */
.art-blockheader .l, .art-blockheader .r { background-image: url('img/f2t9blockheader.png'); }

Remark (or delete) the two lines:

/* *** TEMPLATE #9: If you HAVE SET COLOUR to the horizontal bar: DELETE/REMARK the next line */
/* .art-nav-l, .art-nav-r { background-image: url('img/f2t9nav.png'); } */

/* *** TEMPLATE #9: If you HAVE SET COLOUR to the right side menu headings background: DELETE/REMARK the next line */
/* .art-blockheader .l, .art-blockheader .r { background-image: url('img/f2t9blockheader.png'); } */

Templates #11 and #13

The top horizontal bar will lose its colour. If you use another colour than the light grey, you will have to edit that colour.

>>> Look for this, close to the end of the file - there are corresponding lines for template #13:

/* *** TEMPLATE #11: Set the colour of the Top bar if not original (gray) */
/* Try = class ".art-sheet-cc" (= center background: See file "templates/template11/css/templatestyle.css") */
.art-nav-inner {
	background-color: #D5D5D5; /* Gray */
}

Change the D5D5D5 to your chosen colour.
(I suggest you look for the colour of class .art-sheet-cc in the TNG file templates/template11 (or 13) /css/mytngstyle.css.
If it's not there, it will be in templates/template11 (or 13) /css/templatestyle.css.)

Template #14

The top and bottom horizontal bars will lose their colour. If you use another colour than the light brown, you will have to edit that colour.

>>> Look for this, close to the end of the file:

/* *** TEMPLATE #14: Set the colour of the Top and Bottom bars if not original (brown) */
/* Try = class "div.innercontainer" = #E2B993, the menu bar (see file "templates/template14/css/templatestyle.css") */
.art-nav-inner {
	background-color: #CCA37D; /* Original-ish */
}

Change the CCA37D to your chosen colour.
(I suggest you look for the colour of class div.innercontainer in the TNG file templates/template14/css/mytngstyle.css.
If it's not there, it will be in templates/template14/css/templatestyle.css.)

Installation

1. Click on the download link, shown in the summary in the upper right corner of the page.
2. Un-zip the file you receive and you will find a folder called Flat_and_Squared_mod_v11.1.2.2. Open it.

Now perform the above step (Before Installation) and make sure it's complete.

1. Move/copy/FTP the file flat_and_squared_mod_v11.1.2.2.cfg and the included folder Flat_and_Squared.2 to the mods folder of your TNG system.
2. Follow the normal automated installation for Mod Manager, as shown in the example Mod Manager - Installing Config Files to install the mod.

In the event of a problem

• Try using the Mod Manager Remove capability
• Replace all affected files with the copies you made before the installation.
• TNG Community Forums: TNG Specific - Code Discussion - Addons

Conflicts

No known conflicts - yet.

Uninstalling the mod

If you want to completely Remove (uninstall) this mod and all its tables, you should

1. click the Remove button to uninstall the mod and then
2. click the Delete button to delete the config file from the mods folder.

Revision History

Version	Date	Description
v13.0.0.2	1 Oct 2020	Update for TNG v13
v11.1.2.2	13 Oct 2018	Template #16 index page works now. Pages in Subdirectories don't lose icons now. DD-menuitems now have thin border. Menus' downarrows are stable.
v11.1.2.1	7 Jan 2018	Mod Maternal Paternal Lines (if installed), Modmanager styles (both thanks to Jean-Louis V.) and Mainphoto for templ #2 included. Borders in the left menu of template #9 removed.
v11.1.2.0	26 Dec 2017	Introduction.

Visualization of this mod

Have a look through the Botebygden site, at the top of the below site-table:

Sites using this mod

If you download and install this mod, please add your TNG site to the table below:

URL	User	Note	Mod-Version	TNG-Version	User-language
Botebygden Swedish only (community research site).	Lars Arén	Open public site: Many of Erik Hoppe's mods on display.	13.0.0.2	13.1.2	SE
Racine d'Alsace	J-Louis Valory	Public/Private - Template 1		11.1.2	FR
Familiestamboom.frl	Renze Petersohn	Public/Private - Template 16	11.1.2.2	12.0.2	NL,DE,EN
Van Peer Project	Drew McClenaghan	Private Site - Installs and works well with TNG12.3 & 14.0 and Template 15. Great little Mod, currently under modification and testing across all Templates.	13.0.0.2	12.3 / 14.0	NL,EN
The SandBox	Drew McClenaghan	The Sand Box - Installs and works well with TNG14.0 14.1 14.2 and 14.3 on Template 15. Upgraded the Sprite Menu icons to test further.	13.0.0.2	14.1 / 14.2 / 14.3	NL,EN

TNG Modules Impacted

The following TNG Modules are modified, and should be backed up prior to installing this mod:

• descend.php
• familychart.php
• pedigree.php
• adminlib.php
• genlib.php