You are currently viewing Zend Server 5.x documentation. Click here to view the latest Zend Server online documentation.

You are here: Zend Server User Guide > 5250 Bridge > CSS Editing

CSS Editing

Formatting for modern Web applications is normally controlled by a CSS (Cascading Style Sheet) file. Editing the CSS file will apply global changes to all screens displayed by the Emulator.

Note:

Many PHP development teams have pre-designed CSS files created for them. If your company has standard CSS templates and formats, we recommend using those as much as possible to ease user adoption and familiarity. You may need to make some adaptations to them.

The following can defined by customizing your CSS file:

Background color
Background images (e.g. logos)
Text colors
Text styles (bold, italic, underline)
Text font and size

Note:

5250 Green Screens are monospaced. Therefore changing your text's font and size from the default font (Courier) will probably cause alignment problems. If you need to change your application's fonts, it is recommended to use the Zend 5250 Bridge API.

Note:

Zend Studio for i5/OS contains special editors for editing CSS files. See CSS Editing in the Zend Online Help for more information.

CSS File location

By default, the Emulator's CSS files are situated in /usr/local/zendsvr/5250l/Emulator/html/styles/themes.

Note:

The Emulator provides three default CSS files (greenOnBlack.css, blackOnWhite.css or custom.css). Whilst all of these can be customized, the custom.css file has been provided specifically for this purpose.

It is recommended that CSS files are edited in Zend Studio's CSS editor.

See Opening Files in Zend Studio for information on accessing your CSS files through Zend Studio for Eclipse.

See the Zend Studio for Eclipse Online Help for more information on Zend Studio for Eclipse's CSS editor capabilities.

Below are various examples of the customization that can be performed by editing your CSS file:

Example 1 - Editing Background Colors:

In HTML/CSS, colors are defined using a hexadecimal number or letter value corresponding to a particular color (e.g. #fff = white) or by using the color's name (e.g. by simply typing 'white'.) To see a list of available colors, go to http://www.w3schools.com/colors/colors_names.asp.

To edit your screens' background color, edit the value in the body's 'background' attribute.

Usage Example

To change the background color from white to black:

Change the following code:

body {

background: #fff;

body {

background: #000;

Example 2 - Editing Font Colors:

Your CSS files contain font color attributes for each of the font colors available in i5. Editing the color value of one of these attributes will cause all text in the original color across all screens to be displayed in the newly defined color.

Usage Example

To change all blue text to black:

Change the following code:

.color-attr-blue {

color: #3366cc;

.color-attr-blue {

color: #000;

To see a list of available colors, go to http://www.w3schools.com/colors/colors_names.asp.

Example 3 - Editing Font Styles

In order to change the fonts used in your screens you simply need to edit the 'font-family' attribute in your CSS file with the required font value.

Note for Emulator users:

5250 Green Screens are monospaced. Therefore, changing your text's font and size from the default font (Courier) will probably cause alignment problems.

Usage Example

To change the font used from courier to arial:

Change the following code:

font-family:courier;

font-family:arial;

Example 4 - Adding an Image

You can add a background image to all screens through the CSS file.

Before you add code to the CSS file, you will need to add the image to a directory on your i5 server. You then add code to your CSS file which sets the background image position.

Usage Example

To add an image to the top-right corner of all your screens:

Add the following code within the body attribute of your CSS file:

background: #fff url(my_logo.gif) 98% 25px no-repeat;

Note:

In this example, my_logo.gif is situated in the same directory as your .css file. If it was located in a different directory, you would have to specify the full or relative path to the image's location.

See http://www.w3schools.com/Css/css_positioning.asp for more on how to set your image's position.