Understanding TNG css styles

From TNG_Wiki
Jump to: navigation, search

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