Overriding Colors in a Template
When you want to override colors in a TNG Template, you should use the mytngstyle.css in that template's css folder to save your definitions, so that you don't lose them across a TNG upgrade.
The mytngstyle.css overrides the TNG following TNG style sheets:
- genstyle.css the default TNG style sheet when you do not select a template
- templatestyle.css the template override style sheet
- tngtabs1.css
- tngtabs2.css
You might find the following web sites handy in picking colors:
- Color Schemer Online where you can display what a color looks like when you know the hex code, and you can lighten or darken colors
- W3 Schools CSS Color Names where you can click on the color to see how different text colors look on that color
- Dynamic Drive Gradient
- Color Palette Creator
- Contrast-A: Find Accessible Color Combinations Lets you see how different colour combinations meet accessibility guidelines.
You should also keep in mind that some users are color-blind any may not see certain color combinations. See:
Note that when you override style definitions, you do not need to specify the whole class definitions. For example, you only need to specify the parameters that you are overriding, such as
.header, (
color: #000099;
}