Understanding TNG css styles

From TNG_Wiki
Jump to: navigation, search

TNG style sheets


Contains the TNG styles used for all templates including when no template is selected
Provides an anchor /* Classes for TNG Mods to be added below */ that should be used by Mod Developers to add new style classes used in TNG mods that modify TNG code. Classes should be added using an %insert:after% for the following

/* Classes for TNG Mods to be added below */

Styles that are added for TNG Add-ons, can use their own style sheets


TNG uses the templatestyle.css to provide classes that are unique for the specific templates/templateN
TNG also uses the templateN/css/templatestyle.css to modify some of the genstyle.css definitions to match template colors for example


Set in Admin > Setup > General Settings > Site Design section
Provides the styles for the old slanted style tabs


Set in Admin > Setup > General Settings > Site Design section
Provides the styles for the newer rounded-corner tabs


Provides the style definitions and overrides for smart phones when $sitever == "mobile"


Provides the style definitions used by the Mod Manager and are loaded only by the Mod Manager programs


Can be used by the user to override any of the above style sheet definitions
The css/mytngstyle.css in the TNG root folder is used for overrides when no template is selected, otherwise the mytngstyle.css in the templates/templateN/css folder is used for the selected template
For example, if you wanted to remove the scrollbars that appear in the Notes section on some templates, you would insert the following into your mytngstyle.css file
.notearea {

Some TNG style classes

The following are some TNG styles that can be used when developing add-on programs so that the styles matchn the template selected by the user


used for table backgrounds


provides the background for table header cells


provides the font definitions for the fieldnameback cells


provides the table data cell background


provides an alternate table data cell background that can be used for striping to help readability in tables with many rows


used to align text to the top of data cells


can be used to center text within a cell


can be used to reduce the font size of text within a cell


can be used to prevent text wrapping within a cell


used by TNG for links


Controls how much of the Notes textarea is displayed. If you do not want a scrollbar for the notes section, you will need to override the genstyle.css definition

.notearea {

by changing it in the appropriate mytngstyle.css in your template/css folder if you use a template or in the css/mytngstyle.css if you do not use a template

.notearea {