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
- 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.