The information in this ドキュメント applies only for Natural for Ajax.
The font, the color and the representation of the PF keys is controlled by a style sheet (CSS file). Depending on the settings in the configuration file for the session, the style sheet is either predefined or can be selected from the logon page.
Natural for Ajax is delivered with a number of predefined style sheets. The default style sheet is natural.css, which is intended for a 80x24 screen resolution. If you require a higher resolution (for example, 80x43), you should use the style sheet natural highres.css instead; this style sheet uses a smaller font.
This ドキュメント covers the following topics:
For more information on style sheets, see http://www.w3.org/Style/CSS/.
The location of the style sheets depends on the application server:
JBoss Application Server
../njx<nn>.ear/cisnatural.war/resources
Sun Java System Application Server
../j2ee-apps/njx<nn>.ear/cisnatural_war/resources
where <nn> is the current Natural for Ajax version.
It is recommended that you have a basic understanding of CSS files.
You can edit the predefined style sheets or create your own style sheets.
It is recommended that you work with backup copies. When a problem occurs with your style sheet, you can thus always revert to the original state.
To see your changes in the browser, you have to
delete the browser's cache, and
restart the session.
This feature is available with Natural for Ajax only.
If enabled in the configuration file for the session, a user can switch to another style sheet during a running session. In this case, the user can open the Style Sheet control in the output screen.
To switch to another style sheet, the user has to select it from the drop-down list box and then choose the button.
The following elements are available:
| Element Name | Description |
|---|---|
#mainlayer |
Controls the position of the main output in the output window. |
#pfkeydiv |
Controls the position of the PF keys in the output window. |
If the PF keys are to appear at the bottom, define these two elements as shown in the following example:
#mainlayer {
top: 0px;
left: 0px;
height: 80%;
}
#pfkeydiv {
bottom: 0px;
left: 0px;
width: 100%;
height: 100px;
}
If the PF keys are to appear at the left, define these two elements as shown in the following example:
#mainlayer {
top: 0px;
left: 100px;
height: 100%;
}
#pfkeydiv {
top: 0px;
left: 0px;
width: 100px;
height: 100%;
}
ヒント:
In the above examples, the height is defined dynamically (for example,
height: 100%;) in several places. You can also define fixed
heights (for example, height: 500px; for the
#mainlayer element).
Predefined sample CSS files are also provided in which the PF keys are defined to appears at the right or at the top.
The font size is defined in the body element.
Example:
body {
background-color: #F3F5F0;
font-family: Courier New;
font-size: 14px;
}
As a rule, you should only use monospace fonts such as Courier New or Lucida Console. With these fonts, all characters have the same width. Otherwise, when using variable-width fonts, the output will appear deformed.
If you want to define a different font type, you should define the same font type for the body, the output fields and the input fields as shown in the following example:
body {
background-color: #F3F5F0;
font-family: Lucida Console;
font-size: 14px;
}
.OutputField {
white-space:pre;
border-width:0;
font-family: Lucida Console;
font-size: 100%;
}
.InputField {
background-color: white;
font-family: Lucida Console;
border-width: 1px;
font-size: 100%;
border-color: #A7A9AB;
}
The following elements are available:
| Element Name | Description |
|---|---|
.naturalwindow |
Controls the rendering of the Natural windows. |
.wintitle |
Controls the rendering of the titles of the Natural windows. |
Example:
.naturalwindow {
border-style: solid;
border-width: 1px;
border-color: white;
background-color: black;
}
.wintitle {
left: 0px;
top: 1px;
height: 17px;
width: 100%;
color: black;
font-size: 100%;
font-weight: bold;
background-color: white;
text-align: center;
font-family: Verdana;
border-bottom-style: solid;
border-bottom-width: 2px;
}
The rendering of the message line is controlled by the
.MessageLine element.
Example:
.MessageLine {
color: blue;
}
The background color is defined in the body
element.
Example:
body {
background-color: #F3F5F0;
font-family: Lucida Console;
font-size: 14px;
}
You can define different colors for all Natural color attributes. These are:
Red
Green
Blue
Yellow
White
Black
Pink
Turquoise
Transparent
You can define these color attributes for input fields and output fields, and for normal output and reverse video.
The following examples show how to define the color attribute "Red".
Define the color for a normal output field:
.natOutputRed {color: darkred;}
Define the foreground and background colors for an output field with reverse video:
.reverseOutputRed {background-color: darkred; color:#F3F5F0;}
Define the color for a normal input field:
.natInputRed {color: darkred;}
Define the foreground and background colors for an input field with reverse video:
.reverseInputRed {background-color: darkred; color:#F3F5F0;}
The following elements are available:
| Element Name | Description |
|---|---|
.PFButton |
Controls the style for normal rendering. |
.PFButton:hover |
Controls the style that is used when the mouse hovers over a PF key button. |
Example:
.PFButton {
text-align: center;
width: 90px;
border-style: ridge;
border-width: 3px;
padding: 2px;
text-decoration: none;
font-family: Verdana;
font-size: 12px;
height: 22px;
}
.PFButton:hover {
color: #FFFF00;
background-color: #222222;
}