Flat and Squared mod

From TNG_Wiki
Revision as of 07:56, 5 November 2018 by XerxX (talk | contribs) (added text)
Jump to navigation Jump to search
Restricted Downloads of Flat and Squared mod 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


Flat and Squared mod
Summary Makes the interface flat and squared.
Validation The mod is XHTML compliant.Valid-xhtml10.png
Mod Updated 13 Oct 2018
Download link for
TNG 12.0
TNG 11.1
Flat_and_Squared_mod_v11.1.2.2.zip
Download stats Flat and Squared mod
Author(s) Erik Hoppe
Homepage Flat and Squared mod (this page)
Mod Support My Mod Support
Contact Developer My Mod Support
Latest Mod 11.1.2.2 for TNG v11.1.2 and above
Min TNG V 11.1.2
Max TNG V 12.x
Files modified
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 and2

It removes shadows, 3D-borders and rounded corners making the interface "flat and squared".
A collection of sample pages from different templates are found here: https://xerxx.se/f2/index.html
Note that these samples may not reflect the latest changes/additions.


Developer

This mod was developed by Erik Hoppe


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 2 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
Colouredt9.jpg
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


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
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

There are twelve sample pages you can look at here: Sample pages


Sites using this mod

Support this mod by adding your TNG site to the table below:

-
URL User Note Mod-Version TNG-Version User-language
Andersson, Hoppe, Sahlin, Thorell Erik Hoppe Mod author (Not this mod yet) 11.1.2 SE, GB, DE
Racine d'Alsace J-Louis Valory Public/Private - Template 1 11.1.2 French
Familiestamboom.frl Renze Petersohn Public/Private - Template 16 11.1.2.2 12.0.2 NL, DE, UK

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