Chapter 7
Customizing Graphics and Color
This chapter describes how to change the appearance of default gateway forms. Topics include:
Appearance of Gateway Forms
The default gateway installed during directory server installation matches the standard appearance of iPlanet products. The gateway Interface Templates can be modified to customize the appearance of the following:
Banner image
Buttons
Background color
Text color
Link color
Banner Image
The default gateway banner image that appears at the top of the gateway forms is title.gif. This image can be replaced by a different banner image stored as dsgw/html/title.gif.
Updating the Banner Image (title.gif)
The following sections describe how to change the dimensions of the banner image as well as how to change the banner image filename.
Changing Dimensions of Banner Image
The default iPlanet banner image has a height of 40 pixels and a width of 530 pixels. When using a banner image with a different pixel height and width, change the specifications of the image in all files in dsgw/html where the image is referenced:
maintitle.html
authtitle.html
searchtitle.html
csearchtitle.html
newentrytitle.html
Changing Filename of Banner Image
Keep the default filename—title.gif—for the banner image. Changing the default filename of the banner image requires updating the filename in all files where the image is referenced.
|
Note
|
Any image used to replace title.gif must be a true gif image. Images in other formats (PICT, EPS, BPX, TIFF) will not appear as intended.
|
Button Images
Buttons on gateway forms can be replaced by updating button image files stored in the dsgw/html directory. Table x describes the button image files stored in the dsgw/html directory:
Table 7-1 Button Images
|
Button Image
|
Description
|
|
stsearch_off.gif
|
Used in the maintitle.html, authtitle.html, csearchtitle.html, and newentrytitle.html pages
|
|
stsearch_on.gif
|
Used on the searchtitle.html page
|
|
adsearch_off.gif
|
Used in the maintitle.html, authtitle.html, searchtitle.html, and newentrytitle.html pages
|
|
adsearch_on.gif
|
Used on the csearchtitle.html page
|
|
newentry_off.gif
|
Used in the maintitle.html, authtitle.html, csearchtitle.html, and searchtitle.html pages
|
|
newentry_on.gif
|
Used on the newentrytitle.html page
|
|
authen_off.gif
|
Used in the maintitle.html, searchtitle.html, csearchtitle.html, and newentrytitle.html pages
|
|
authen_on.gif
|
Used on the authtitle.html page
|
Updating Button Images
The default iPlanet button images have a height of 24 pixels and a width of 122 pixels. If the new button image uses a different pixel height and width, these specifications must be changed in all files in dsgw/html where the image is referenced:
maintitle.html
authtitle.html
searchtitle.html
csearchtitle.html
newentrytitle.html
Changing the default filename of a button .gif file requires updating the filename in all files where the image is referenced.
Any image used to replace a button image must be a true gif image. Images in other formats (PICT, EPS, BPX, TIFF) will not appear as intended.
Color Schemes
Changing the color schemes for a form requires editing the files that make up a gateway form. The procedure for changing colors depends on the gateway file type.
Files Controlling Colors on Gateway Forms
Table 7-2 describes the gateway files that control the appearance of gateway forms. These files may need to be updated when changing the appearance of the banner image, button images, or background and body colors.
Table 7-2 Files Controlling Appearance of Gateway Forms
|
To Change Colors on the
|
Edit
|
File Type
|
|
authentication forms
|
authtitle.html
|
banner
|
|
authPassword.html
|
script
|
|
authSearch.html
|
script
|
|
standard search forms
|
searchtitle.html
|
banner
|
|
searchString.html
|
script
|
|
greeting.html
|
HTML
|
|
list-*.html
|
search result
|
|
advanced search forms
|
csearchtitle.html
|
banner
|
|
csearchAttr.html
|
script
|
|
csearchBase.html
|
script
|
|
csearchMatch.html
|
script
|
|
csearchString.html
|
script
|
|
csearchType.html
|
script
|
|
emptyFrame.html
|
HTML
|
|
list-*.html
|
search result
|
|
new entry forms
|
newentrytitle.html
|
banner
|
|
newentryType.html
|
script
|
|
newentryName.html
|
script
|
|
display-*.html
|
template
|
|
view or edit entry forms
|
display-*.html
|
template
|
Changing Colors Using BODY Tag
Table 7-3 lists the five standard color attributes that can be changed.
Table 7-3 Colors and Related Attributes for BODY tag
|
Color
|
Using attribute
|
|
text color
|
TEXT
|
|
background color
|
BGCOLOR
|
|
link color
|
LINK
|
|
visited link color
|
VLINK
|
|
selected link color
|
ALINK
|
To adjust background colors in the banner files and other standard HTML files, edit the HTML to change the color associated with the BGCOLOR and TEXT attributes to a different RGB color value (for example, to change background to aquamarine and text to white, use <BODY BGCOLOR="#70DB93" TEXT="#9932CD">).
Changing Colors Using Directives
To change background colors in script files, add a COLORS directive immediately before the BODY tag. The syntax in the following example shows the use of the COLORS directive to change text color to blue, background color to aqua, and the link color to red:
<!-- COLORS "attribute=color [attribute=color [...]]" -->
<!-- COLORS "TEXT=#0000FF BGCOLOR=#00FFFF LINK=#FF0000" >
DS_NEWENTRY_TYPE_BODY -->
In the example, the attribute is a standard HTML %color attribute and color is an RGB color value in the form #rrggbb (or a standard color name, e.g., aquamarine).
Changing Table Colors
The following sections describe procedures for customizing the color of tables.
Specifying Color Names and Color Codes
There are two ways to specify colors:
Use a color value, a six digit hexadecimal number known as the red-green-blue (RGB) triplet. The RGB triplet always begins with a hash mark (#) followed by 3 2-digit codes that represent the amount of red, green, and blue that make up the color (#rrggbb). There are over 16 million RGB color codes.
Use a color name. There are sixteen standard case-insensitive color names. Table 7-4 lists the sixteen standard color names and their equivalent RGB values
Table 7-4 Sixteen Standard Colors and their Hexadecimal Values
|
Color name
|
Hexadecimal value
|
|
black
|
#000000
|
|
silver
|
#C0C0C0
|
|
gray
|
#808080
|
|
white
|
#FFFFFF
|
|
maroon
|
#800000
|
|
red
|
#FF0000
|
|
purple
|
#80080
|
|
fuchsia
|
#FF00FF
|
|
green
|
#008000
|
|
lime
|
#00FF00
|
|
olive
|
#808000
|
|
yellow
|
#FFFF00
|
|
navy
|
#000080
|
|
blue
|
#0000FF
|
|
teal
|
#008080
|
|
aqua
|
#00FFFF
|
Changing Color of Table Headings
To change the color of table heading text, edit the following lines within the template file:
<TR BGCOLOR=006666 COLSPAN=4><FONT FACE=ARIAL, HELVETICA
COLOR=WHITE>
so that the BGCOLOR value is an RGB color value in the form #RRGGBB or a standard color name. The font color can be changed from white to another color using the same method. Within a single template file there may be multiple tables and consequently multiple table head rows that need to be modified to maintain a consistent color scheme.
Changing the Background Color of Table Rows
To change the color of the table body rows, edit the following line for each table within the template file:
<TABLE CELLSPACING="2" BORDER BGCOLOR=#F2F2F2 ...
so that the BGCOLOR attribute specifies the RGB color value in the form #rrggbb or a standard color name representing the new color.