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
In addition, you can use these style sheets in combination with the "Font" and "Unique" style sheets listed below. For example, you can use a font style sheet to override the default defined fonts. You should not use the "Main" or "Reverse 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.