Understanding TNG css styles
TNG style sheets
genstyle.css
- 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
%target:genstyle.css% %location:% /* Classes for TNG Mods to be added below */ %end:%
- Styles that are added for TNG Add-ons, can use their own style sheets
templatestyle.css
- 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
tngtabs1.css
- Set in Admin > Setup > General Settings > Site Design section
- Provides the styles for the old slanted style tabs
tngtabs2.css
- Set in Admin > Setup > General Settings > Site Design section
- Provides the styles for the newer rounded-corner tabs
tngmobile.css
- Provides the style definitions and overrides for smart phones when $sitever == "mobile"
modmanager.css
- Provides the style definitions used by the Mod Manager and are loaded only by the Mod Manager programs
mytngstyle.css
- 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 { max-height:none; }
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
lightback
- used for table backgrounds
fieldnameback
- provides the background for table header cells
fieldnameback
- provides the font definitions for the fieldnameback cells
databack
- provides the table data cell background
databackalt
- provides an alternate table data cell background that can be used for striping to help readability in tables with many rows
aligntop
- used to align text to the top of data cells
center
- can be used to center text within a cell
smaller
- can be used to reduce the font size of text within a cell
nw
- can be used to prevent text wrapping within a cell
lightlink
- used by TNG for links
notearea
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 {
max-height:200px;
overflow:auto;
}
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 {
max-height:none;
}