Stylesheet files (.css)
Cascading Style Sheets (or style sheets) are used in ZIETrans Toolkit within template files to specify appearance items such as colors, fonts, borders, whitespace, images, margins, and spacing between lines.
The stylesheet files provided by ZIETrans can be grouped into categories.
- Unique templates
- Some ZIETrans templates use individualized style sheets. The following style sheets are used by the Finance, Industry,
Medical, Research, and Transport templates, respectively.
- finance.css
- industry.css
- medical.css
- research.css
- transport.css
Font
andUnique
style sheets listed below. For example, you can use a font style sheet to override the default defined fonts. You should not use theMain
orReverse video
style sheets listed below in combination with these unique template style sheets. - Main
- Some ZIETrans templates use a combination of general
purpose style sheets. These general purpose main
style sheets determine the overall appearance of the template
and other controls that you might add to a project. Examples of these
controls include buttons, input fields, tables, fields, and links.
These style sheets are named with
theme
at the end, such as blacktheme, whitetheme, monochrometheme, and tantheme. The appearance of the controls in a project is determined by classes named in the style sheets, for example, HATSCHECKBOX, HATSRADIOBUTTON, and HATSDROPDOWN. - Reverse video
- Templates that use a general purpose main style
sheet, also use a general purpose secondary style sheet that
determines the color scheme of any reverse video items in a project.
These reverse video style sheets are
named with
reverseVideo
at the beginning, such as reverseVideoGray, reverseVideoTan, reverseVideoBlack, and reverseVideoWhite. Some of the classes named in the style sheets are RHBLUE, RHGREEN, and RHMAGENTA. - Font
- Some of the style sheets provided by ZIETrans
are not named in the templates by default. However, you can apply
these style sheets to the templates to change
the font family (Arial, Tahoma) or font size of the text. The names
of the style sheets give you an idea of their
purpose:
- normalFont.css
- scaleableFont.css
- nonFixedFont.css
- largeFont.css
- smallFont.css
- xlargeFont.css
- xsmallFont.css
- Unique
- Three additional style
sheets provided by ZIETrans each have their own unique purpose.
These are:
- calendar.css
- This style sheet controls the appearance of the calendar widget date picker when launched in a new browser window. This style sheet has no effect when the date picker is launched in the current Web page using the Use inline calendar setting on the Calendar widget.
- inlinecalendar.css
- This style sheet controls parts of the appearance of the calendar widget date picker when launched in the current Web page. To display the calendar in the same page, select the Use inline calendar setting on the Calendar widget. This style sheet has no effect when the date picker is launched in a new browser window, that is, when not using the Use inline calendar setting.
- PrintJobWindow.css
- This style sheet controls the appearance of a print job in a project, including the PrintJobHeading, ListHeader, and ListEntry.
Stylesheet files are stored in the project_name/Web Content/common/stylesheets directory. You can edit the stylesheet files by double-clicking on the name of the style sheet in the ZIETrans Project View to open the stylesheet editor.
For more information on editing cascading style sheets, see Using style sheets.