Styles
Form Properties
Class and Custom Class
The program formats the table using CSS styles.
It creates a CSS style definition in the HTML code by
default.
Table Class = aft
| Left Cell Class = afl | Right Cell Class = afr |
| Text Name |
Experts can use their own CSS Classes (Custom CSS Class) to
override the styles created by the program.
Width
You can specify the Table Width in percent or in pixel.
Sample: 80%
| Left Cell Width | Right Cell Width |
| Sample: 30% | Sample: 70% |
The Left and Right Cell Width can also be
specified in percent or in pixel.
You can also specify the Table Width in pixel and
the Cell Width in pecent.
See also: Spacing
Alignment
Table Alignment: left, center, right or none. The table will be aligned using a div surrounding the table and the table margin. Use "none" if you already have aligned the block element containing the placeholder keyword in your HTML host page.
Left Cell and Right Cell Alignment:
| Left Cell Alignment | Right Cell Alignment |
| left | left |
| center | center |
| right | right |
Left Cell and Right Cell Vertical Alignment:
| Left Cell Vertical Alignment | Right Cell Vertical Alignment |
| top | top |
| middle | middle |
| bottom | bottom |
The Left Cell and Right Cell Vertical Alignment will only have any effect if your cell has a static height or contains multiple lines.
Colors
Format: #RRGGBB - the red (RR), green (GG) and
blue (BB) hexadecimal integers specify the components of
the color from 00 to FF.
| Table Text Color | Table Text Color |
You can override the Table Text Color with the
Left Cell and/or Right Cell Text Color.
If you specify a Left Cell and Right Cell Text Color,
then the Table Text Color will not be used!
| Left Cell Text Color | Right Cell Text Color |
Background-Color:
The form is transparent and has no background
color, so you need to change the background color of the element
hosting the form.
See: How to
change the background color
Font
You can specify multiple fonts here as fallback font. If the first font is not supported by the browser, then the fallback font will be used instead. Separate each font with a comma. If you define a font-family for the table, then the text on the table (both cells - left and right cell) will use the same font.
You can override the Table Font with the Left
Cell and/or Right Cell Font Family.
If you specify a Left Cell and Right Cell Font Family,
then the Table Font Family will not be used!
In addition to the Font Family, each font can have a
different Font Size.
You can specify the Table, Left Cell and Right Cell
Font Size in points (pt), pixels (px) or
percent (%).
Sample: 11pt
Sample: 20px
Sample: 100%
Web Safe Fonts
The following list contains so called "web safe fonts", which are supported on most systems and web browsers.
Arial
Comic Sans MS
Courier New
Georgia
Tahoma
Times New Roman
Verdana
You can also use other fonts, but its recommended to
include a "fallback" font.
e.g. Calibri, Arial
Spacing
The spacing defines the vertical space between the
element border and the element content.
Sample: 5px
The "Row Spacing" defines the space (in pixel) between two rows.
The following illustrations shows the difference between "Spacing" and "Row Spacing":
- Blue = Row Spacing (defines the vertical spacing between 2 form elements)
- Green = Spacing (defines the vertical spacing "inside" a form element)
- Grey = Table (reduce the table "Width" if you need space between the table border and the surrounding)
Styling Form Elements
This section can be used to style some form elements:
Text
Multi Text
Password
Numeric
Drop Down
Selection
Multi Selection
You can specify a different border, font-family,
font-size, color and background-color.
This setting will not affect the buttons!
Form Elements Border:
Format: border-width border-style border color. Sample:
1px solid #FF0000 ... for 1px solid red border.
Form Elements Background Color:
Format: #RRGGBB - the red (RR), green (GG) and blue (BB)
hexadecimal integers specify the components of the color
from 00 to FF.
Form Elements Text Color:
#RRGGBB - the red (RR), green (GG) and blue (BB)
hexadecimal integers specify the components of the color
from 00 to FF.
Form Elements Font Family:
You can specify multiple fonts here as fallback
font, if the first font is not supported by the browser.
Separate each value with a comma.
Form Elements Font Size:
Format Size pt ,px, em or %(percent). Sample: 100%
Form Elements Custom CSS Class:
The class must be defined in your HTML template file or
in an external CSS file defined in your HTML template.
